개발 컨벤션

1. commit convention

1.1 type

• feat : 새로운 기능 추가
• fix : 기존 기능 수정
• bug : 버그 수정
• refactor : 코드 리팩토링, 파일 삭제
• style : 코드 포맷 변경, 세미 콜론 누락, 오타수정, 네이밍 변경, 콘솔 제거
• chore : 설정 및 기타 작업(패키지 매니저, config, 빌드 등)
• docs : 문서 작성 및 수정

1.2 commit message

[type] : [subject] ([issue number])

[body]

// example
feat : 실시간 지하철 api 데이터 연결 (#19)

• [type] : commit 타입(소문자로 시작)
• [subject] : commit 제목(한글로 작성, 끝에 . 금지)
• [issue number] : 해당 이슈 번호
• [body] : commit 내용(한글로 작성)

2.code convention

2.1 ESLint + Prettier 조합을 사용

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "next",
    "plugin:react/recommended",
    "airbnb-typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "useRecoilCallback"
      }
    ],
    "react/prop-types": "off"
  }
}

.prettierrc.json

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5"
}

2.2 폴더, 파일명

• app
  • app/page명/pages.tsx
• components
  • components/page명/컴포넌트분류명/컴포넌트
  • page명, 컴포넌트분류명 : camel case(ex.summaryMap, searchBox)
  • 컴포넌트 : pascal case (ex.RouteCard, DetailRoute)
• public/assets
  • assets/icons/ic_shape_status_color.svg (status, color 가 없으면 생략)

2.3 assets 관리

• png : figma에서 4배수로 export

3. git branch strategy

• 작업 전에 이슈 생성
• branch를 이름/생성한 이슈 내용으로 생성, kebab case 사용 (ex. nyeongnyeon/route-summary-map)
• 작업 후, git pull orign main으로 원격저장소 내용 반영
• main으로 pull request 작성

4. 폴더 구조

 ┣ 📂.github
 ┣ 📂.husky
 ┣ 📂.vscode
 ┣ 📂lib
 ┣ 📂public
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂icons
 ┃ ┃ ┗ 📂images
 ┣ 📂src
 ┃ ┣ 📂api
 ┃ ┣ 📂app
 ┃ ┣ 📂components
 ┃ ┣ 📂constants
 ┃ ┣ 📂recoil
 ┃ ┗ 📂type
 ┗ 📜etc (setting files)