[WIL] 행동대장 프로젝트 2주차 회고

기술적 의사결정

• Recoil
  • 전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택
  • 보일러 플레이트 코드를 줄일수 있음
  • 사용법이 직관적이고 쉬워 협업에 유리
  • 최신 라이브러리를 도입해 봄으로써 최신 기술 도입에 익숙해지기 위함

 

• TS
  • 버그를 사전에 발견하고 코드의 안전성을 높임
    • 런타임 에러를 줄임
  • TypeScript의 정적 타이핑이 코드 작성 시점에 오류를 캐치

 

• ReactQuery v4
  • 서버쪽의 데이터를 좀더 쉽게 관리쉬워 데이터 패칭, 캐싱, 동기적 서버의 상태의 업데이트에 용이
  • 별도의 옵션을 지원하여 복잡한 코드를 reactQuery 로직을 통해 짧은 코드로 대체
  • 프로젝트 구조가 기존보다 단순해져 유지보수하기 쉽고 새로운 기능을 쉽게 구축
  • 최신 라이브러리를 도입해 봄으로써 최신 기술 도입에 익숙해지기 위함

 

• CRA
  • 복잡한 환경설정을 건너뛰고 바로 애플리케이션 개발에 집중할 수 있음
    • (웹팩, 바벨 등의 복잡한 설정을 씨알에이가 미리 해줌)
  • CRA는 TS를 기본적으로 지원하기 때문에 복잡한 설정 없이 즉시 TS와 React의 조합으로 개발을 시작할 수 있음

 

• styled-component
  • 컴포넌트 기반 개발이 가능
  • JS와 CSS 사이의 상수와 함수를 쉽게 공유

 

• Cloudinary
  • 원본 미디어를 안전하게 보관하고 필요에 따라 여러 버전의 변환된 미디어를 생성하여 저장 공간을 절약할 수 있음
  • 자동으로 이미지와 비디오를 최적화하여 사용자에게 더 빠르게 제공하며 대역폭 비용을 절감함

 

• React-hook-form
  • 회원가입 모달 중 사용자의 정보들(이메일, 닉네임, 비밀번호 등)을 효과적으로 관리하기 위해 선택
  • react-hook-form의 자체 최적화 기능

 

• use-timer
  • 회원가입 모달 중 인증코드 보내기 버튼을 누르면 구현되는 3분 타이머 구현 위함

 

이번주 한 일

• 개발 시작 (폴더 구조 정리)
• CI / CD 구축 및 HTTPS 적용 (AWS S3, Route 53, ACM, CloudFront)
• 페이지별 들어갈 기능 구체적으로 정리

 

다음주 할 일

• 랜딩 페이지, 게시글 작성, 수정페이지 개발
• 이미지 업로드 기능 구현
• Kakao map 이용(지도 불러오기, 핑 찍기, 주소값 불러와서 서버에 전달하기)
• 댓글 기능 구현
• 반응형 UI 작업

 

기술적 고민

 

현재 recoil을 전역상태관리 툴로 사용하고 있음
Recoil Provider는 App.tsx에 씌워져 있기 때문에, recoil에는 페이지들을 아우르는 전역적인 데이터(ex. 유저 로그인 여부, 테마 등..)가 들어가야 한다고 생각하지만
현재 특정 페이지 혹은 모달에서만 공유되는 데이터를 로컬 상태관리로 하려다 보니 props drilling 레벨이 깊어짐
props drilling을 자제하기 위해 이러한 데이터들을 recoil로 관리하는 게 맞는지, 전역 상태관리라는 규칙을 위배하지 않기 위해 계속 props drilling을 해야 하는지
만약 recoil로 관리해도 된다면, 어떤 데이터를 주로 recoil로 관리하고 어떤 데이터를 로컬 state로 관리해야 할 지