[이상달] refactor/sprint8

[asksa1256]

주요 변경사항

• 메인 페이지, 로그인 페이지, 회원가입 페이지에서 반복되는 요소들을 컴포넌트화 했습니다.
  • 메인 페이지: 섹션들을 MainSection으로 컴포넌트화
  • 로그인 페이지: 이메일, 비밀번호 필드를 InputField, PasswordField로 컴포넌트화
  • 회원가입 페이지: InputField, PasswordField 컴포넌트 적용
  • 로그인, 회원가입:
    • 공통 로직을 useAuthForm으로 분리
    • 각 페이지에 있던 폼을 LoginForm, SignUpForm으로 컴포넌트화
    • 간편 로그인 영역 SocialLogin으로 컴포넌트화

배포 링크

https://panda-market-react-sd.netlify.app/

멘토에게

• 토큰 관리를 이번 PR에 같이 담으려다가.. 미션 11에 해당 요구사항이 있어서 그때 진행하기로 하고 이번엔 리팩토링만 담았습니다.
• 토큰은 웹 스토리지보다 쿠키로 관리하는 게 보안상 좋다고 하는데, 미션 11에는 로컬 스토리지를 사용하라고 나와있어서.. 일단은 요구사항대로 구현해야 될까요?
• 현재 대부분의 기능 구현을 라이브러리 없이 리액트 api로만 했는데, axios나 react hook form 같은 외부 라이브러리도 사용해보는 게 좋을까요? 개인적으로는 리액트 api만으로도 잘 동작하니 괜찮다고 생각하는데, 예시로 적어둔 라이브러리들이 실무에선 거의 기본 요구사항인 것 같아서 질문드립니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

추가 PR 수고하셨습니다!
상달님 미션을 거듭하면서 코드 퀄리티가 점점 좋아지네요 👍

주요 리뷰 포인트

• Banner 컴포넌트 상속이 아닌 조합 기반으로 바꾸기
• css vars 말고 자바스크립트 변수로 스타일링 관련 변수 관리하기
• 버튼 텍스트 렌더러 만들기 (타입스크립트 활용도 높이기)

[addiescode-sj]

질문에 대한 답변

멘토에게

• 토큰 관리를 이번 PR에 같이 담으려다가.. 미션 11에 해당 요구사항이 있어서 그때 진행하기로 하고 이번엔 리팩토링만 담았습니다.
• 토큰은 웹 스토리지보다 쿠키로 관리하는 게 보안상 좋다고 하는데, 미션 11에는 로컬 스토리지를 사용하라고 나와있어서.. 일단은 요구사항대로 구현해야 될까요?

네, 사실 토큰 관리는 클라이언트보다는 서버에서, 웹 스토리지보다는 쿠키에서 관리하는게 보안상 좋긴 합니다. 하지만 토큰 관리 전략은 프론트엔드와 백엔드의 사전 협의가 필요한 부분이라서 미션 요구사항대로 구현해보시는게 좋을 것 같습니다 :)

• 현재 대부분의 기능 구현을 라이브러리 없이 리액트 api로만 했는데, axios나 react hook form 같은 외부 라이브러리도 사용해보는 게 좋을까요? 개인적으로는 리액트 api만으로도 잘 동작하니 괜찮다고 생각하는데, 예시로 적어둔 라이브러리들이 실무에선 거의 기본 요구사항인 것 같아서 질문드립니다.

• 라이브러리를 사용해서 미션을 구현해본다 (X)
• 라이브러리 사용 경험을 늘려보며, 해당 라이브러리가 기존의 어떤 문제를 해결하려 출시되었으며 어떤 장단점과 특징이 있는지 이해한다 (O)

두번째 이유로 라이브러리 사용 경험을 조금씩이라도 늘려가며 프론트엔드 생태계를 파악해보는것도 좋은 공부가 된답니다 :)

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.