- 프로토타입 메서드와 함수 컴포넌트를 제외하고 함수는
화살표 함수
로 작성한다.
- var를 쓰지 않고,
const와 let
을 사용한다.
- 변수명은
camelCase
로 작성한다. (issueLabel).
- 컴포넌트명 및 페이지명은
PascalCase
를 사용한다. ex) LoginPage.js
- 만약 주석이 필요한 경우 //
TODO
: 해야 할 일을 적고 잊지않고 삭제한다.
- css는
emotion/styled-component
를 사용한다.
- 변수명이 길어도 좋으니 한눈에 봐도 알아볼 수 있는
최대한 명시적인 변수명
을 정해준다.
- 이벤트 핸들러를 정의할때
handle + 메서드명
로 정의한다.
roro-pattern
으로 함수 파라미터를 지정한다.
is~
와 같은 단정문
에는 사용하지 않습니다.
- 컴포넌트의 Props는 구조분해 할당으로 꺼내진 것들 제외한 나머지도 전달해주도록 합시다(그래야 확장이 원활하게 가능)
컴포넌트 구성 (파일 단위 구조입니다. 순서를 유의해주세요!)
import
function
export default
props (PropsTypes)
styled components
컴포넌트 생성, import규칙
// craco.config.js
...
webpack: {
alias: {
'@components': path.resolve(__dirname, 'src/components'),
'@hooks': path.resolve(__dirname, 'src/hooks'),
'@pages': path.resolve(__dirname, 'src/pages'),
},
},