💥회의 길게 하는 거 안 좋아합니다 - 팀장님 🤗
코딩 컨벤션 → 통일성 높게가져가기
- js, ts, style (네이밍)
- single quote
- 세미콜론
- 네이밍
- 동사 + 명사
- 예시) getValue | getRandomNumber | fetchUsers | onChangeInput
- 풀네임
- 이벤트
- 현재 컴포넌트 내 이벤트 - on + eventName : onChangeInputValue
- props로 받는 것 - ~handler : changeInputValueHandler
- 상태관리
- 2 depth 이상, 부모나 형제 전달 → 전역상태관리(recoil)
- props 순서, import 순서 맞추기
- eslint-config-prettier
- eslint-plugin-import
- eslint-plugin-prettier
- eslint-plugin-react
- eslint-plugin-simple-import-sort
eslint 패키지
- 타입관리
- type
- 재사용할 타입만 분리하여 전역으로 관리 (index.d.ts파일에서)
- 재사용안하는 건 해당 파일의 최상단에 정의
- 타입 별칭 네이빙 방법론으로는 파스칼 케이스 방법론을 따른다.
- 컴포넌트
- type → component → style 순서
- 컴포넌트 정의를 함수 표현식 (arrow)
- <></>
- rendering 관련 return문 생략 or 작성(map, filter, etc…) / 일단 생략하는쪽
- 각 컴포넌트 파일은 하나로 분리한다. 자식 컴포넌트를 컴포넌트화 시키게 된다면 새로운 파일로 분리해서 작업을 진행한다. (논의 필요)
- 경로
- alias 절대 경로 이름 지정
- @: src는 엣@ 사용
- 같은 폴더 위치라면 상대경로로 그 외에는 절대경로 사용
폴더 구조: 페이지 단위
(예시) 📦src ┣ 📂apis ┣ 📂assets ┃ ┗ 📂images ┣ 📂components ┃ ┣ 📂SignUp ┃ ┃ ┣ 📜SignUpButton.tsx ┃ ┃ ┣ 📜SignUpInput.tsx ┃ ┃ ┗ 📜SignUpSelector.tsx ┃ ┗ 📂shared ┣ 📂constants ┣ 📂contexts ┣ 📂hooks ┣ 📂pages ┃ ┣ 📜SignIn.tsx ┃ ┗ 📜SignUp.tsx ┣ 📂styles ┃ ┗ 📜GlobalStyle.tsx ┣ 📂utils ┣ 📜App.tsx ┣ 📜main.tsx ┗ 📜vite-env.d.ts
기술스택 확정
- 언어: TypeScript
- 번들러: Vite
- 백엔드 통신: React Query
- 상태관리: Recoil
- 스타일링: Emotion, Storybook → 디자인 시스템
- 프레임워크: React
- 패키지 매니저: NPM
- 애니메이션 라이브러리 쓸건지?
- Framer Motion + Chakra UI (레이아웃 활용 Goooood)