9.16 금 - 메인프로젝트 데일리 회고

1. 할 일

오늘

• [x] [구현] 로그인, 회원가입 폼 제작

이번주

• fe 멘토 미팅 조언 내용 반영 - 칸반보드, 화면정의, 회고, 파일구조
• redux toolkit 활용안 노션 문서 작성 완료
• 칸반보드 활용안 문서 작성 완료 및 레포지토리 반영
• fe ↔ be 통신 연결 확인
• dev-fe 브랜치 개발환경 초기세팅, 파일구조, 주석 작성

---

2. 오늘 한 일

eslint 설정파일 에러 해결

airbnb 방식 린트 설정에 필요한 추가 패키지들이 package.json에 없어서 발생한 에러였고 누락된 패키지들을 package.json에 추가하여 npm i 해서 해결함.

회원가입, 로그인 폼 제작

기존에는 styled-component 작성과 로직을 따로 분리하지 않고 하나의 파일에서 전부 작성하여 스타일과 로직을 분리시키거나 작성한 styled-component를 재사용하는데에 있어 어려움이 있었다.

프리프로젝트에서 시간에 쫒겨서 파일구조나 컴포넌트 재사용에 대한 고민 없이 마구잡이로 컴포넌트를 찍어냈던 점이 아쉬워 메인프로젝트에서는 상당히 이 부분에 대해서 고민을 많이 하게 되었다.

하지만 머릿속으로만 생각해서 최적의 구조를 생각해낼 실력은 당연 아니기 때문에 로직 없이 단순한 스타일만 있는 로그인, 회원가입 폼, navbar 컴포넌트를 실제로 구현해보면서 프론트 팀원분과 함께 계속해서 좋은 방안을 논의하며 컴포넌트를 만들었다.

src안의 components 폴더의 사용방법이 조금 바뀌었는데, components 폴더 안의 Form 폴더는 모든 컴포넌트에서 사용되는 form들이 전부 들어간다. 이 때, 회원관리(가입, 로그인), SNS(글 추가, 수정 등) 등 기능별로 사용되는 폼들이 달라지므로 회원관리 기능에서 사용될 폼 컴포넌트는 components > user 폴더 안에서 관리한다. 그러면 SNS에서 사용할 컴포넌트들은 components > post(또는 sns) 폴더에서 관리가 될 예정일 것이고 기능별로 나름의 구분이 될 것이다.

재사용성의 경우 components > Form 폴더에서 user 폴더로 뎁스가 내려가기 전에 FormStyles.js 파일에 작성해둔 스타일들을 여러가지 폼들에서 재사용할 수 있도록 하였다.

• Form
  • FormStyles.js
  • user
    • LoginForm.js
    • SignupForm.js

---

3. 공부할 것

• Redux Toolkit
  • 토이프로젝트로 실습해보고 문서화 → 메인프로젝트에 적용
• Axios instance 활용방안
• lit-cars 토이프로젝트
  • react-query 코드 걷어내고 RTK로 대체
  • sns crud 기능 메인프로젝트에 적용할 수 있도록 미리 연습해보기
  • jwt 토큰 방식 인가: 클라이언트에서 할 일, 백엔드에서 할 일 확실히 알고 구현

---