Code Convention

✍🏻 Commit Message 관련

• 영단어 사용 시, 공백없이 PascalCase 로 작성
• 특수문자 사용 금지

  • 새로운 기능 추가

    feat: 추가한 (기능/문제풀이) 간략히 설명
    
    

  • html, css 문법 추가 및 수정

    design: 변경한 내용에 대해 간략히 설명
    
    

  • 이슈(버그) 수정

    fix: 이슈(버그)내용 + 수정내용 간략히 설명
    
    

  • 코드 구조 개선

    refactor: 리팩토링한 내용 간략히 설명
    
    

  • 폴더 혹은 파일 삭제

    remove: 삭제한 폴더 혹은 파일 이름
    
    

  • 폴더 혹은 파일 이동

    move: 이동한 폴더 혹은 파일 이름
    
    

  • 의존성 추가

    depend: 의존성 추가
    
    

  • README 파일 등 문서 작업

    docs: 문서 작업한 파일 이름
    
    

  • 그 외

    chore: 작업 내용 설명
    
    

📛 변수/상수/파일/폴더 이름 관련

• 변수 이름은 camelCase 로 작성
• 상수 이름은 전부 대문자로 작성하되, 각 단어 사이 공백을 _ 으로 구분
• 파일 이름은 kebob-case 로 작성
• 폴더 이름은 kebob-case 로 작성

📛 Component/Props 이름 관련

• Component 이름은 PascalCase 로 작성
• Props 이름은 camelCase 로 작성
• Style Component 로 전달하는 props 의 이름은 $ 로 시작

📛 상태 이름 관련

• 상태 이름은 camelCase 로 작성
• 상태 변경 함수 이름은 camelCase 로 작성

🛫 Module Export 관련

• Component Export

const ExampleComponent = () => {
  return <></>
}

export default ExampleComponent

• Function Export

export const exampleFunction = () => {
  //...
}

• Constant Export

export const EXAMPLE_CONSTANT = 'exampleConstant'

⛲️ 함수 스타일

• 🏹 Arrow Function 통일
• 함수 이름은 camelCase 로 작성
• 파라미터는 {} 로 감싸, 객체의 값으로 전달

📂 src 하위 폴더 트리 관련

• pages : 페이지 단위 Component 배치
• components : 공용 Component 배치
• libs : 외부 라이브러리 설정 및 관련 기능을 담은 파일 배치
  • libs/{라이브러리_이름} 하위에 배치
• constants : LocalStorage Key 등 상수 관리 파일 배치
• utils : 상태를 관리하지 않는 함수 관리 파일 배치
• asstes : 이미지, 폰트 등 정적 리소스 관리 파일 배치

배열, 객체 관련

• 후행쉼표는 허용 ❌

기타

• 세미콜론 금지
• 들여쓰기 공간은 공백문자 2개
• 문자열 처리 => 홑따옴표
• Barrel File 사용 ❌