1. 코드 컨벤션

1.1 기본세팅

{
  // env: 어떤 환경에서 스크립트를 실행할 것인지 설정
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "commonjs": true,
    "es6": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    // ECMAScript 규격의 JSX 사용 여부: true
    "ecmaFeatures": {
      "jsx": true
    },
    // 사용할 ECMAScript 버전을 설정
    "ecmaVersion": "latest",
    // parser의 export 형태를 설정, react는 module 기반의 import, export 사용
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    // 들여쓰기 2칸만 허용
    "indent": [
      "error",
      2
    ],
    // var 키워드 사용 불가능
    "no-var": "error",
    // asynn 함수 내부에 await 키워드가 없으면 오류 발생
    "require-await": "error",
    // ==, != 대신에 ===, !== 사용
    "eqeqeq": "error",
    //프롭스 타입 무시
    "react/prop-types": 0,
    // 호출되지 않은 변수도 사용가능하게 설정
    "no-unused-vars": "off"
  }
}

{
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": true,
    "printWidth": 80,
    "proseWrap": "preserve",
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "useTabs": false,
    "vueIndentScriptAndStyle": false
}

1.2 네이밍 규칙

폴더명 • camelCase
파일명 • REACT 컴포넌트 : PascalCase
• 이미지파일 : kebab-case (어쩌고저쩌고-image, lion-licat-image.png)
• JSX : PascalCase
• JS : camelCase
• 스타일드 컴포넌트 파일 : ~~Style.jsx로 표현
변수명 • 일반적인 변수, 함수 : **camelCase
-**변수: ‘명사형'으로 작성. 무엇을 담고있는지 정확히 표현(예: numberOfPeople)
-불린형 변수: is~~로 표현
-함수 : ‘동사형'으로 작성. 무엇을 하는 함수인지 정확히 표현(예: getInputValue)
어떤 값으로부터 다른 값을 계산하는 함수 ⇒ get으로 시작 (ex: getToday)
이벤트 함수를 보내는 prop 이름은 on__으로 짓고, 이벤트 함수 이름은 handle__으로 짓는다
커스텀 훅의 이름은 use___ (ex: useGetWindowSize)
• 상수 : UPPER_SNAKE_CASE

• 생성자 함수, 클래스 : PascalCase |

1.3 그 외 규칙