👩‍💻 Coding Convention

코딩 컨벤션

import 규칙

• 외부 모듈과 내부모듈을 구분하여 사용한다. 외부모듈과 내부모듈 선언시 공백으로 구분한다. 내부모듈의 경우 절대 경로를 사용하는 모듈과 상대 경로를 사용하는 모듈을 추가로 구분한다.

import axios from 'axios'; 

import router from '@service/router'

import util from './util'

변수, 함수, 클래스 명명 규칙

• 파일네이밍

  • 컴포넌트 → PascalCase
  • 외 → cammelCase

• 상수 → SNAKE_CASE

• 함수 및 변수 → cammelCase

• 컴포넌트 → PascalCase

• 창의적인 단어 쓰지 않기 😁 (제일 떠오르기 쉽고 기본적인 단어)

• 변수는 명사형으로 작성

• 함수는 서술형으로 작성

기타 코딩 규칙

• html태그 선언 시 최대한 시멘틱한 태그 사용
• 모두가 approve 한 후에 merge 할 수 있다
• 코드 리뷰는 필수! 꼭 확인하기! 😠
• html id + className은 snake_case로 한다.

eslint & prettier

• 기본적으로 eslint airbnb를 따른다
• 추가하고 싶은 룰이 있을 경우 의견을 제시해서 논의 후에 반영 할 수 있다

eslint

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'airbnb-base',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    'linebreak-style': 0,
    'import/prefer-default-export': 0,
    'prettier/prettier': 0,
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      alias: {
        map: [
          ['@api', './src/api'],
          ['@auth', './src/auth'],
          ['@config', './src/config'],
          ['@models', './src/models'],
          ['@util', './src/util/*'],
          ['@', './src'],
        ],
      },
    },
  },
};

prettier

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always"
}

tsconfig

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es2015", "es2016", "es2017", "es2018", "es2019", "es2020"],

    // sourceMap
    "sourceMap": true,

    // module
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,

    // lint
    "strict": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noFallthroughCasesInSwitch": true,

    // more spec
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "baseUrl": ".",
    "paths": {
      "@api/*": ["src/api/*"],
      "@auth/*": ["src/auth/*"],
      "@config/*": ["src/config/*"],
      "@models/*": ["src/models/*"],
      "@util/*": ["src/util/*"],
      "@/*": ["src/*"]
    }
  }
}