컨벤션
branch 전략
- feature branch에서 feature branch으로 merge 시에는 rebase merge를 사용한다.
- feature branch에서 develop branch으로 merge 시에는 squash merge를 사용한다
- develop branch에서 release branch으로 merge 시에는 merge를 사용한다
- release branch에서 main branch으로 merge 시에는 merge를 사용한다
https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf
NHN Coding Convention 참조 하였습니다.
-
줄임말 쓰지 않기
const Button(O)const Btn(x) -
컴포넌트 폴더 안에 Story 파일 넣기
-
이미지에 alt 꼭 사용해 이미지를 명시해 줄 것.
<img/src="..." alt="빈이미지"> -
컴포넌트 관련
- export를 지우기(서브 컴포넌트 있을 시)
- proptype들은 맨 아래로 모아두기
- 100줄 이상 되면 파일 분리 생각하기
- 서브 컴포넌트 스타일들은 메인 컴포넌트 스타일에 넣어두기(주석 처리하기)
- component.subcomponent 는 proptype 위에 모아두기
- on으로 시작되는 속성의 커스텀 함수를 넣을때는 on빼고 써주기 ex) onClick={InputClick}
| 구분 | CASE |
|---|---|
| 페이지 파일 | PascalCase |
| 컴포넌트 파일 | PascalCase |
| 테스트코드 | PascalCase |
| 이미지 파일 | snake_case |
| styled-component | PascalCase |
| 함수명 | PascalCase |
| React 이벤트명 | camelCase |
| 변수명 | camelCase |
CSS Convention [CSS 코드 작성규칙]
"extends": "eslint:recommended"
https://www.chromatic.com/builds?appId=62ba6453935e74836cffb2d4