실전프로젝트를 시작한 지, 벌써 3주가 지나갔다. 아무래도 처음으로 진행하는 실전프로젝트이다보니 아쉬움이 많이 남는 것 같다. 무엇이 아쉬운 지는 그냥 잘 모르겠다. 근데 실전프로젝트인데 오히려 미니프로젝트 때보다 열정이 식은 느낌을 나 혼자 받았다. 중간 2주차일때는 정말 코드짜기가 귀찮을 때도 있었다. 아마도 1주짜리 프로젝트만 해오다가, 6주라는 소리에 살짝이나마 안주했던 것 같다.
중간발표때는 서비스 소개 및 아키텍처등을 5분간 발표하여, 멘토님을 통하여 피드백을 받았다.
일단 끝까지 사이트기능에 온 신경을 쓰다가 늦잠을 잤고, 기술질문에 대한 답변을 준비하지도 못했다. 그래서 대답이 매끄럽게 나오지 못했다. 사실 한편으로는 아무것도 찾아보지않고, 내 머릿속에 있는 지식으로 대답하면 어디까지 할 수 있을까란 궁금증때문에 찾아보지않은 것도 있다. 근데 역시나 코드만 짤 줄 알지, 기술 질문에는 제대로 답하지 못했다. 오늘부터 모던자바스크립트 읽어야지.
아래는 중간발표때까지 구현된 기능들을 시연한 영상이다.
색다르게, 그리고 언제나 보드게임을 이용할 수 있게 보드게임메이트를 매칭해주는 서비스이다.
여기서 더 추가될 기능
- 랭킹시스템
- 아바타샵
- 친구추가 및 친구목록
딱 위에 세 가지 기능만 추가하고, 최적화 및 코드 리팩토링에 신경 쓸 것 같다.
그리고 프로젝트 리드미랑 홍보에도 시간을 쓸 예정이다. 딱 2주만 더 집중하자!
중간발표 피드백 및 기술질문 정리 박제하기
Q.1-1) 리덕스를 제외하면서까지 번들사이즈를 줄이려고 하는데 왜 고민을 시작하게 되었는지?
A.1-1) 리액트 싱글페이지라 처음 로드하는데 시간이 걸린다. 웹에 처음 입장하는데 시간이 오래 걸려서 라이브러리를 줄이는 것이 어떤지 생각하게 되었다.
Q.1-2) 리액트쿼리와 리덕스 툴킷 토입을 고려하는 등 라이브러리를 추가는 불가피할 것으로 보여 '라이브러리를 줄인다'는 번들사이즈는 줄이는 대안이 되기 어려울 것으로 보이는데 어떻게 생각하는지?
A.1-2) 리덕스를 사용하지 않기로 한것은 아니다. 리액트 쿼리 같은 경우 최적화에 관한 계획이라고 생각한다. 처음에 번들된 파일을 여러군데로 나눠서 로드하는 것과 리액트 쿼리처럼 불필요한 데이터를 불러오지 않는 것은 다른 방향의 최적화라 생각한다.
Q.1-3) 번들사이즈를 어느정도 수준까지 줄여야 사용자 경험이 최적이 될지?
A.1-3) 기준을 정하진 않았고 개발자가 느끼기에 빠르다 라고 느낄때까지 줄일 예정이다. ADVICE) 개발자의 체감에 의존하기 보다는 느린 3g환경, 빠른 3g 환경 등 구체적인 상황을 설정해서 수치화 하여 대답하는게 앞으로 면접 등에 대비하기 좋을것
Q.2-1) PR, 이슈 템플릿 만들어서 사용중인데 잘 사용 중인지, 어떤 식으로 작성하고 있는지?
A.2-1) PR을 잘 활용하고 있으며 개요, 작업내용, 변경된 로직으로 나눠서 작성중이다.
Q.2-2) 템플릿을 처음부터 넣은건지 필요성을 느낀건지?
A.2-2) 처음엔 형식적으로 넣었는데 사용하다 보니 더 필요성을 느끼게 되었다.
Q.3) 포스트와 코멘트를 리덕스로 전역상태 관리중인데 꼭 사용해야 하는지, 왜 사용하고 있는지
A.3)처음에는 리덕스를 사용하지 않으려 했으나 포스트나 코멘트 쪽을 코드를 작성할 때 axios로 받은 데이터를 usestate를 이용해서 관리하고 있었으나 프로젝트가 진행될수록 파티장일 경우, 댓글 작성자의 경우, 밴 당한 경우 등 유저의 상태를 관리하는 usestate이 과도하게 많아지게 되었다. post뿐만 아니라 comment 파일에서도 같은 변수를 사용하게 되는데 Props로 넘겨야 하는 정보량이 비대해져 좀더 편하게 상태값을 넘겨줄 필요를 느끼게 되었다. comment 쪽에서도 post쪽으로 반대로 데이터를 넘길 필요성이 있을때 가능은 하겠지만 편안하게 보내고 다른 사람이 코드를 보기에도 편안한 코드를 짜기에는 리덕스가 적합하다 생각했다.
Q.4) axios에서 url을 직접 넣고 있다. 불편하지 않은지?
A.4) 인스턴스를 쓰고 있는데 개발하는 도중 작성한 코드가 남아 있거나 급하게 바꾼 것들이 적용 안된 것이라 추후 수정할 계획이다.
Q.5) jxs, js 의 차이점을 알고 있는지?jsx를 리턴하는 파일도 js로 받는 경우 등이 있어서 어떤 이유로 혼용하고 잇는지? A.5) 큰차이를 못 느끼고 사용하고 있다. ADVICE) jsx던 js던 동작하는데 큰 차이는 없는데 jsx만 리턴하는 경우만 있지는 않으니 구분하는걸 추천한다.
Q.6-1) 리액트에서 react-cookies라는 훅을 제공하는데 왜 커스텀 훅을 만들어서 쿠키를 사용하고 있는 건지? A.6-1) 쿠키를 여러곳에서 쓰고 있다. 그래서 커스텀하는게 편할거 같다 생각했다. Q.6-2) 리액트에서도 훅이 있는데 왜 커스텀한건지 다시 다시 질문
A.6-2) 쿠키를 거의 모든 페이지에 적어야 해서 그렇게 했다. Q.6-3) 커스텀도 마찬가지이지 않나 간결하다 생각해서 사용한건지
A.6-3) 원하는 대로 이름을 정할 수 있고 매번 적어야 하는 코드가 간단해져서 커스텀 훅을 사용했다.
Q.7-1) accessToken과 refreshToken을 왜 cookie에 넣어 사용하는지?
A.7-1) accessToken는 cookie에 말고 store에 저장할지 고민중이다. refreshToken은 xss 공격에 취약하다 알고 있어 보 보안상의 이유로 cookie에 넣었다.
Q.7-2) 액세스 토큰은 탈취 당해도 괜찮은건지?? refresh 시간은 어떻게 설정되어 있는지?
A.7-2) accessToken은 refreshToken이 있으니까 괜찮을 거라 생각한다. 15분으로 설정되어 있다.
Q.7-3) 크로스사이트 스크립팅 공격이 어떤식으로 동작하는지 설명가능한지?
A.7-4) 크로스 사이트 출처가 다르거나 http에서 https 로 넘어길때 크로스 사이트로 간주한다. 튜터님 답변) 웹페이지가 다
른 동작을 하게끔 한다. 로컬에 접근이 가능해진다. 이때 accesstoken이 유출될 수 있다.
Q.7-5) 이 공격에 대한 대비책을 세운 것이 있는지 어느쪽이 취약하다고 생각하는지?
A.7-5) 그 부분을 리프레시 토큰이 보완 하고 있다고 생각한다.
Q.7-6) 그렇다면 accessToken이 유출되면 15분 간 공격이 가능하게 되는 것으로 보이는데 맞는지?
Q.7-7) 게시글을 입력할수 잇는 폼이 있는지? html입력 가능한지? 튜터님 답변) 크로스사이트스크립팅, scrf에 대한 보안 대비할 것 +sanitizer로 대비 가능하다.
ㅋㅋㅋㅋㅋ이렇게보니까 그냥 제대로 대답한 게 없네
'프로젝트 > 보드윗 (보드게임원 매칭 서비스)' 카테고리의 다른 글
| [ 항해99 실전프로젝트 ] 외면하지 말기 (0) | 2022.11.29 |
|---|---|
| [ 항해99 실전프로젝트 ] 초기 렌더링 개선 (0) | 2022.11.28 |
| [ 항해99 실전프로젝트 ] interceptor를 활용해 refresh token 관리 (0) | 2022.11.25 |
| [ 항해99 실전프로젝트 ] 중간발표까지 기술적 의사결정 (0) | 2022.11.24 |
| [ 항해99 실전프로젝트 ] 드래그슬라이드를 만들어보자. (0) | 2022.11.22 |
