Frontend

• 어느 정도 맞출 수 있는 건 eslint, prettier, stylelint로 세팅하기

  • import/export 순서

    import { a, b, c } from "ddd";
    
    export * from "a";
    export * from "b";
    

  • pre-commit 툴 (husky)

🏷️ 네이밍

변수

• **camelCase**로 작성해 주세요.

• ‘대상’의 의미가 잘 표현되도록 명사로 지어주세요.

• 최대한 축약을 피하고 자세히 작성해 주세요.

  • btn (x) button (o)
  • idx (x) index (o)

• 매직넘버 사용을 지양하고, 상수의 경우 대문자 및 **SNAKE_CASE**로 선언해주세요.

  // Bad
  setTimeOut(() => {}, 1000)
  
  // Good
  const TIME_INTERVAL = 1000;
  setTimeOut(() => {}, TIME_INTERVAL);
  

• Boolean 변수의 경우 수동태(과거분사) 형태로 작성해 주세요. ⇒ selected

함수

• **camelCase**로 작성해 주세요.
• ‘동작’의 의미가 잘 표현되도록 동사로 시작해 주세요.
  • 반환값이 Boolean 타입이라면 be동사로 시작하기
  • ⇒ isCurrentUser(), hasItem(), shouldFetching()
• 이벤트 핸들러는 ‘핸들러 함수 이름 + 대상 컴포넌트명’ 형태로 지어 주세요.
  • ⇒ <button onClick={**onClick**}>다음</button>
  • ⇒ <button onClick={**onClickUploadButton**}>사진 추가</button>

기타

• 디렉토리명은 복수형, 소문자 및 **kebab-case**로 지어주세요. ⇒ components, hooks

• 클래스 및 컴포넌트명은 **PascalCase**로 지어주세요. ⇒ UserListItem

  • 컴포넌트가 디렉토리로 표현된 경우에도 동일
  • components/Button

• URL, API, HTML와 같은 대문자 약어는 대문자 그대로 사용해요.

  • handleUrl (x) handleURL (o)

• 페어 프로그래밍(공동 작업) 한 경우 커밋 메시지의 body에 다음을 추가한다.

  Co-authored-by: LEEJW1953 <[email protected]>
  Co-authored-by: js43o <[email protected]>
  Co-authored-by: ttaerrim <[email protected]>