[Refactor] 코딩 컨벤션 재정의 및 적용

[zero0205]

#️⃣ 연관된 이슈

#1

✨ 구현 기능 명세

• airbnb eslint(eslint-config-airbnb) 적용
• 타입 선언 type alias 방식으로 통일

🎁 PR Point

airbnb eslint(eslint-config-airbnb) 적용

airbnb eslint를 적용하기 위한 eslint 플러그인들을 설치했다. 타입스크립트를 사용하기 때문에 타입스크립트 관련 패키지도 함께 설치했다.

pnpm add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc

{
  "parser": "@typescript-eslint/parser",

  "parserOptions": {
    "project": ["./tsconfig.json"],
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },

  "env": {
    "browser": true,
    "es2021": true
  },

  "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "prettier"],

  "settings": {
    "react": {
      "version": "detect"
    }
  },

  "plugins": ["prettier"],

  "rules": {
    // React 관련 규칙
    "react/react-in-jsx-scope": "off",
    "react/no-unescaped-entities": "off",
    "react/prop-types": "off",
    "react/jsx-filename-extension": [
      "warn",
      {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    ],
    "react/require-default-props": "off",
    "react/jsx-props-no-spreading": "off",

    // TypeScript 관련 규칙
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_", // _ 로 시작하는 변수는 무시
        "varsIgnorePattern": "^_", // _ 로 시작하는 변수는 무시
        "ignoreRestSiblings": true
      }
    ],

    // Import/Export 관련 규칙
    "import/no-unresolved": "off",
    "import/extensions": ["off"],
    "import/prefer-default-export": "off",

    // 접근성 관련 규칙
    "jsx-a11y/media-has-caption": "off",

    // 기타 규칙
    "no-param-reassign": [
      "warn",
      {
        "props": false
      }
    ]
  }
}

airbnb의 eslint 설정을 현재 프로젝트에 맞도록 수정한 결과.

정리 문서: 🔗코드 품질 개선2-1: 코딩 컨벤션(eslint-config-airbnb 적용)

타입 선언 type alias 방식으로 통일

기존에 타입 선언 방식으로 interface와 type alias가 혼용되던 것을 하나로 통일했다. 현재 프로젝트에서는 type alias가 적합하다고 생각하여 모두 type alias로 변경했다.

정리 문서: 🔗코드 품질 개선2-2: 코딩 컨벤션(interface vs type alias)

😭 어려웠던 점

프로젝트를 다 개발한 뒤에 코딩 컨벤션을 다시 확인하고 eslint 패키지를 적용하려니 시간이 오래걸리고 어려웠다. 다음 프로젝트를 처음부터 할 일이 있다면 이번에 정리한 내용을 바탕으로 초기 설정을 잘해야겠다.