애니모리

[애니모리] 개발 준비 단계🤔

soom22 2023. 9. 17. 23:16
SMALL

카카오테크캠퍼스 3단계 프로젝트인 '애니모리' 의 FE 개발 준비 단계에 대해 적어보겠다.

 

먼저 정해야할 목록을 나열하면

  1. 개발언어
  2. 상태 관리 라이브러리
  3. 패키지 매니저
  4. CSS style 라이브러리
  5. 커밋메시지 정하기 -> 공통
  6. pr제목 정하기 -> 공통
  7. 기능 분배하기
  8. Style 라이브러리 추가
  9. 디자인 패턴
  10. 코드 포맷터
  11. Type vs Interface -> Type의 경우, type 통일
  12. props 받는 법 통일 vs 각자 방법으로 사용
  13. 네이밍 컨벤션 정하기

현재까지는 4가지가 확정되었다.

 

1. 개발 언어는 Typescript로 의견 통일이 되어 Typescript로 확정하였고

 

2. 상태 관리 라이브러리는 redux, recoil, jotai 중에서 고민에 빠졌는데 초기 의견은

 

  • 한 분은 2단계에서 깊이 공부해보지 못한 redux를 더 공부해 redux saga까지 사용해보고 싶다.
  • 다른 한 분은 redux 괜찮을 것 같고 recoil도 괜찮은 것 같다.
  • 나는 recoil이나 jotai를 사용하고 싶다.

라는 의견이었다. 서로 아직 잘 모르는 상태로 의견을 낸 느낌이 있어서 각자 더 찾아보고 다시 이야기를 해보았는데

비동기 처리는 react-query를 사용하는 것에는 모두가 동의를 했고

상태관리 툴로 redux & recoil & jotai 중에서 고르게 되었다.

나는 react-query로 비동기 처리를 해주게 된다면 간단하게 사용할 수 있는 recoil이나 jotai를 사용하고 싶었고 나머지 두 분은 redux나 recoil을 사용하고 싶다고 의견을 내셔서 공통 부분인 recoil을 사용하기로 하였다.

 

참고 자료

react-query가 redux같은 전역 상태관리 라이브러리를 대체할 수 있을까
React 상태관리 라이브러리 리뷰 (Zustand, Recoil, Jotai, React-query)
이 기술 스택은 어디서 쓰이고 있을까? | 코드너리 (codenary.co.kr)
State, 슬기롭게 관리하기 (1)
State, 슬기롭게 관리하기 (2)


2. 패키지 매니저는 npm, yarn, pnpm 세가지 중에서 선택했는데 난 속도면에서 우수한 pnpm을 사용해보는 것도 좋을 것 같다고 생각했었는데 팀원 둘다 2단계에서 사용했던 npm 그대로 가고싶어했다. 기존 npm에서 설치 속도를 개선하기 위해서 pnpm을 선택한거라 프로젝트 진행 중에는 큰 차이는 없을 것 같아 npm으로 진행하기로 하였다.

참고 자료

npm, yarn, pnpm 비교해보기

 

3. CSS style 라이브러리는 팀원 모두가 2단계 클론코딩에 사용했던 Tailwind로 사용하기로 하였다.

 



아직 미정

  • 커밋메시지 정하기 -> 공통
  • pr제목 정하기 -> 공통
  • 기능 분배하기
  • Style 라이브러리 추가
  • 디자인 패턴
  • 코드 포맷터
  • Type vs Interface -> Type의 경우, type 통일
  • props 받는 법 통일 vs 각자 방법으로 사용
  • 네이밍 컨벤션 정하기