논의한 사항
네이밍 컨벤션 추가
- styled-component
- 첫 껍질은 Wrapper, 그 위부터는 Container
- Wrapper는 컴포넌트만 가능하고 Wrapper나 Container는 감쌀 수 없다
- Typescript
- 타입에 대한 네이밍: 파스칼 케이스 (Props)
- 객체는 Interface 권장
- Component.DefaultProps는 사용하지 않고, props에 기본 값을 지정한다
Eslint 추가
defaultProps off if 1줄일 때 괄호 안쓰게
폴더 구조
- utils: 리액트 라이브러리 안쓰는 헬퍼함수들
- feature
- 페이지에 종속된 컴포넌트 (1회성 컴포넌트)를 작성한다
- 스크럼을 통해 feature로 갈지, 페이지에 존재할지 방향성을 결정한다
- 라우팅은 기존 page 폴더에서 폴더 구조로 가져간다
- component폴더는
코발트 디자인과 비슷하게
ex)
components/Affix 폴더 이런 구조로- Affix.tsx
- Affix.stoires.tsx
- style.tsx
- tsx 문법을 활용하지 않아도 되면 ts로 변경
- index.ts
- 여기에서 Affix를 export하고
components폴더에서 컴포넌트들 한번 더 export- 에러 시 index.tsx가 아닌 component.tsx로 표시되어 에러 추적이 편함
깃 커밋 메시지
- feat: 새로운 기능의 추가 + UI 스타일
- fix: 버그 수정, console.log, css 버그 수정
- docs: 문서 수정, 주석제거….
- Vscode 확장 ‘Comment Anchor’
- 커밋 메시지 제목에 ‘feat: 로그인 페이지 추가’, 내용에 ‘docs: TODO api 반영’ 처럼
- fmt: 코드 스타일 (세미콜론, 코드 수정이 안됐을 때, 공백)
- refactor: 코드 기능 수정 (변수명 수정, 컴포넌트 분리, 가독성 + 효율성이 향상되었을 때)
- test: 테스트 코트, 리펙토링 테스트 코드 추가
- build: eslint, prettier, 라이브러리..…
깃 브랜치 전략
- Main / Dev
- Dev를 기반으로 이슈에 대한 브랜치를 추가해서 개발
- ex)
#237/Feat/DummyData#76/Refactor/Card-to-BaseCardContainer
깃 병합 전략
- 페어 코딩하는 사람끼리 approve
- 리뷰 댓글에 대해 all resolve
- dev 브랜치로의 병합은 merge 또는 rebase merge 중 논의
- 특정 코드가 어떤 커밋에서 추가되었는지 파악하기 위해 squash merge는 사용하지 않음
- release 브랜치로의 병합은 squash merge
- 어떤 내용이 추가되었는지 흐름 정도를 깔끔하게 보기 위해서
- 스터디장
- 스터디원