Convention

네이밍 컨벤션

CSS

• kebab-case

DB

• snake_case

파일, 폴더 이름

• 클래스, 컴포넌트 파일
  • PascalCase
• 그 외 파일, 폴더
  • camelCase

JS

• 변수, 함수
  • camelCase
• 클래스, 컴포넌트
  • PascalCase
• indent, semicolon 여부, … 등
• tab = 2, prettier, eslint로 강제

기타

• 그 외 규칙은 코드 리뷰를 하면서 맞춰가기로 결정

코드 스타일

Prettier

{
  "singleQuote": false,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 120,
  "arrowParens": "avoid"
}

Eslint

npx eslint --init 으로 최초 설정 후 prettier, react, react-hooks 관련 설정 추가

  module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  plugins: ["react", "react-hooks", "@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: "./tsconfig.json",
  },
  rules: {},
  settings: {
    react: {
      version: "detect",
    },
  },
};

Github 사용 규칙

브랜치 전략

• Git-flow (without release)
• main, develop, feature, hotfix
• 

커밋 메시지

• git cz 설치하여 사용 → https://www.npmjs.com/package/git-cz
• commit 제목 한글, 명사형
• 세부 내용은 issue를 미리 작성하고 연결

PR 메시지

• 템플릿으로 관리 (참고 사항 이용해서 이슈 연결)

• PR 메시지 - 템플릿으로 관리 (참고 사항 이용해서 이슈 연결)

    ```markdown
    ---
    name: PR template
    about: PR template
    title: ''
    labels: ''
    assignees: c99-coder, seungjae94, kimhyeongjun95, tnghd5761
    
    ---
    
    ## 작업 내용
    - 
    
    ## 전달 사항
    - 
    
    ## 참고 사항
    - 
    ```
  

  • 이슈 메시지

    • 템플릿으로 관리

    ---
    name: issue template
    about: feature template
    title: ''
    labels: ''
    assignees: c99-coder, seungjae94, kimhyeongjun95, tnghd5761
    
    ---
    
    ## 목적
    
    >
    
    ## 작업 내용
    
    - [ ]
    
    ## 참고 사항
    

  • git project(Todo, In Progress, Done) 사용하여 이슈 관리