코딩 컨벤션

✔️ Coding Convention

컴포넌트 작성 방식, 네이밍 규칙, 프로젝트 폴더와 파일 구조 등 필요한것들을 정하여 일관성 있게 개발했으면 좋겠어요!

• ASI를 이용하지 않고 세미콜론을 필수적으로 써준다. (prettier로 관리).
• 프로토타입 메서드를 제외하고 함수는 화살표 함수로 작성한다. 즉, 함수 컴포넌트도 화살표 함수로 정의해준다.
• var를 쓰지 않고, const와 let을 사용한다.(단, const를 주로 쓰되 변수의 값 변경이 필요할 경우 let을 쓴다.)
• image, svg는 kebab-case 사용하여 네이밍한다.(ex. erase-check.svg).
• 변수명은 camelCase로 작성한다. (issueLabel).
• .jsx 파일의 파일(폴더)명은 PascalCase를 사용한다. ex) LoginPage.tsx.
• webpack alias를 이용해서 파일 절대 경로로 import, export 사용한다. src: @
• style은 CSS in JS 라이브러리인 emotion을 사용한다. -> emotion 사용 컨벤션
• 변수명이 길어도 좋으니 한눈에 봐도 알아볼 수 있는 최대한 명시적인 변수명을 정해준다.
• z-index는 5단위로 사용해준다.
• Fragment는 <Fragment></Fragment>가 아닌 <>/</>로 사용해준다.
• 이벤트 핸들러를 정의할때 handle + 메서드명로 정의한다.

const DateTypeToggleButton = ({ handleClick }: Props) => {
  return <button onClick={handleClick} />
}

const ModalButton = ({ handleClick }: Props) => {
  return <button onClick={handleClick} />
}

const Calendar = ({}: Props) => {
  const handleClickDateType = () => {};
  const handleModalOpen = () => {};

  return (
    <>
      <DateTypeToggleButton handleClick={handleClickDateType} />
      <ModalButton handleClick={handleModalOpen} />
    </>
  );
};