코드 컨벤션

• 프로토타입 메서드와 함수 컴포넌트를 제외하고 함수는 화살표 함수로 작성한다.

• 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'),
    },
  },

• 컴포넌트 이름의 폴더를 만들고 내부에 index.jsx파일을 만들어서 코드를 작성한다

• src/components/index.js파일에서 다시 export해준다

export { default as Button } from './commons/Button';

• import시 밑의 양식으로 작성해준다

import { Button } from '@components';