• ASI를 이용하지 않고 세미콜론을 필수적으로 써준다. (prettier로 관리).
• 프로토타입 메서드와 함수 컴포넌트를 제외하고 함수는 화살표 함수로 작성한다.
• var를 쓰지 않고, const와 let을 사용한다.(단, const를 주로 쓰되 변수의 값 변경이 필요할 경우 let을 쓴다.)
• image, svg는 kebab-case 사용하여 네이밍한다.(ex. erase-check.svg).
• 변수명은 camelCase로 작성한다. (issueLabel).
• .jsx 파일의 파일(폴더)명은 PascalCase를 사용한다. ex) LoginPage.jsx.
• webpack alias를 이용해서 파일 절대 경로로 import, export 사용한다. src: @, test: #
• export할때 하나의 파일(ex. index.ts)에 모아서 내보내기식으로 작성!
• 만약 주석이 필요한 경우 // TODO: 해야 할 일 혹은 한 일을 날짜와 함께 적어준다(2021.03.28). 신경써서 사용하기
• css는 emotion/styled-component를 사용한다.
• 명령적인 로직들은 함수로 추상화하여 웬만하면 선언적으로 사용하자.
• 변수명이 길어도 좋으니 한눈에 봐도 알아볼 수 있는 최대한 명시적인 변수명을 정해준다.
• 이벤트 핸들러를 정의할때 handle + 메서드명로 정의한다.

컴포넌트 구성

import

function

export default

props

styled components