코드 컨벤션

• 스타일링 단위 rem? px?
  • rem → 10px 62.5%
• 변수 → camelCase ⇒ camelCase
  • boolean → 앞에 is 붙이기
  • 변수명, 컴포넌트는 축약어로 쓰지 맙시다
  • 최대한 피하자 event → e, prev, i, num 만 가능!
  • onClick, handleClick도 코드리뷰에서 더 자세히 봐주세요.
• interface, type → PascalCase
  • ..Props → interface
  • type
• 모든 함수 화살표 함수
  • 컴포넌트, 페이지 등 정의할 땐 function
  • 그 안에 handler 등 만들 때는 화살표 함수
• Constants
  • 변수 명은 대문자 SNAKE_CASE
  • 파일명은 소문자
  • const MAP_CONTENT = {key: value}
  • 객체 안의 key 값은 SNAKE_CASE
  • **Object.freeze()**로 감싸면 수정이 불가해서 좀 더 안전하다
• .env 파일 → 멘토님께 base url 어디서 관리하는게 좋을지 ??
• jsDocs
• barrel로 import 관리

ESLint, Prettier 설정

• ****single quote ‘ ‘ 사용
• import 순서
  • airbnb extends를 쓰면 import Order 등 따로 추가해주지 않아도 됨
• 일단 기본 설정으로 하고 추가적으로 필요한건 그 때 수정

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": ["tsconfig.json"]
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    **"react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",**
    **"jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-static-element-interactions": "off",**
    **"react/require-default-props": "off",**
    **"jsx-a11y/no-noninteractive-element-interactions": "off",**
    "react/button-has-type": "off",
    "react/jsx-no-useless-fragment": "off",
    **"import/prefer-default-export": "off",**
    "react-hooks/exhaustive-deps": "off",
    "consistent-return": "off",
    "react/no-array-index-key": "off",
    "no-await-in-loop": "off",
    "no-plusplus": "off",
    "no-param-reassign": "off",
    "@typescript-eslint/no-explicit-any": "off", //kakao에서만
    "@typescript-eslint/no-unused-vars": "off",
    "prefer-destructuring": "off",
    "@typescript-eslint/no-shadow": "off",
    **"jsx-a11y/label-has-associated-control": "off"**
  }
}

• 추가 할거 미리 말하고 추가

.prettierrc

{
  "printWidth": 80, //default 80 넣을 필요 없음
  "tabWidth": 2, //default 2라 넣을 필요 없음
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all", 
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

StyleLint 설정