우리 팀을 위한 ESLint, Prettier 공유 컨피그 만들어보기 | 우아한형제들 기술블로그

rules: {
    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
    // <img> 엘리먼트에 유의미한 대체 텍스트가 있는지 체크
    "jsx-a11y/alt-text": [
      "warn",
      {
        elements: ["img"],
      },
    ],
    // 유효한 aria-* 속성만 사용
    "jsx-a11y/aria-props": "warn",
    // 유효한 aria-* 상태/값만 사용
    "jsx-a11y/aria-proptypes": "warn",
    // DOM에서 지원되는 role, ARIA만 사용
    "jsx-a11y/aria-unsupported-elements": "warn",
    // 필수 ARIA 속성이 빠져있는지 체크
    "jsx-a11y/role-has-required-aria-props": "warn",
    // ARIA 속성은 지원되는 role에서만 사용
    "jsx-a11y/role-supports-aria-props": "warn",
    // DOM에 정의되지 않은 속성을 사용했는지 체크 (emotion css 속성 등 예외 케이스가 있으므로 기본은 off)
    "react/no-unknown-property": "off",
    // 정의한 props 중에 빠진게 있는지 체크 (NextPage 등 일부 추상화 컴포넌트에서 복잡해지므로 기본은 off)
    "react/prop-types": "off",
  },

{
  // 화살표 함수에서 매개변수가 하나일 때도 괄호를 항상 사용하도록 설정합니다.
  "arrowParens": "always",

  // JSX 요소의 닫는 태그를 같은 줄에 위치시키지 않고 다음 줄로 이동시키도록 설정합니다.
  "bracketSameLine": false,

  // 객체 리터럴에서 괄호 사이의 공백을 허용합니다.
  "bracketSpacing": true,

  // 코드 내부에 포함된 언어 형식을 자동으로 처리합니다.
  "embeddedLanguageFormatting": "auto",

  // HTML 파일 내에서 공백 민감도를 'css'로 설정합니다. 이 설정은 CSS의 공백 규칙을 따릅니다.
  "htmlWhitespaceSensitivity": "css",

  // 파일 상단에 pragma 주석을 추가하지 않습니다.
  "insertPragma": false,

  // JSX에서 속성 값에 대해 single quote('')를 사용합니다.
  "jsxSingleQuote": true,

  // 코드 라인의 최대 길이를 80자로 설정합니다. 이보다 길어질 경우 줄바꿈이 발생합니다.
  "printWidth": 80,

  // 마크다운과 같은 서식이 있는 텍스트에서 줄바꿈을 항상 허용합니다.
  "proseWrap": "always",

  // 객체 속성 이름에 대한 따옴표를 필요한 경우에만 사용합니다.
  "quoteProps": "as-needed",

  // 파일 상단에 pragma 주석이 있을 때만 포맷팅을 적용하지 않습니다.
  "requirePragma": false,

  // 문장의 끝에 세미콜론을 항상 추가합니다.
  "semi": true,

  // HTML 태그에 하나의 속성만을 한 줄에 위치시키지 않습니다.
  "singleAttributePerLine": false,

  // 문자열에 대해 single quote('')를 사용합니다.
  "singleQuote": true,

  // 들여쓰기를 위해 공백 대신 탭을 사용하지 않고, 탭 너비는 2칸으로 설정합니다.
  "tabWidth": 2,

  // 마지막 항목 뒤에 쉼표를 허용합니다. 단, ES5에서 지원하는 경우에만 해당합니다.
  "trailingComma": "es5",

  // 탭 대신 공백을 사용하여 들여쓰기를 설정합니다.
  "useTabs": false,

  // Vue 파일의 `<script>`와 `<style>` 태그 내에서 들여쓰기를 하지 않습니다.
  "vueIndentScriptAndStyle": false,

  // `@trivago/prettier-plugin-sort-imports` 플러그인을 사용하여 import 문을 정렬합니다.
  "plugins": ["@trivago/prettier-plugin-sort-imports"],

  // import 문을 정렬하는 순서를 지정합니다.
  "importOrder": [
    "^react", // React 관련 모듈을 최상위에 배치합니다.

    "<THIRD_PARTY_MODULES>", // 그 다음, 타사 모듈을 배치합니다.

    "^(@/components)(.*)$", // @/components로 시작하는 모든 import를 정렬합니다.
    "^(@/pages)(.*)$", // @/pages로 시작하는 모든 import를 정렬합니다.
    "^(@/hooks)(.*)$", // @/hooks로 시작하는 모든 import를 정렬합니다.
    "^(@/assets)(.*)$", // @/assets로 시작하는 모든 import를 정렬합니다.

    "^(@/constants)(.*)$", // @/constants로 시작하는 모든 import를 정렬합니다.
    "^(@/utils)(.*)$", // @/utils로 시작하는 모든 import를 정렬합니다.
    "^(@/apis)(.*)$", // @/apis로 시작하는 모든 import를 정렬합니다.
    "^(@/common)(.*)$", // @/common로 시작하는 모든 import를 정렬합니다.
    "^(@/config)(.*)$", // @/config로 시작하는 모든 import를 정렬합니다.
    "^(@/store)(.*)$", // @/store로 시작하는 모든 import를 정렬합니다.

    "^(@/styles)(.*)$", // @/styles로 시작하는 모든 import를 정렬합니다.

    "^(.*)/(.*)$" // 나머지 상대 경로 import를 정렬합니다.
  ],

  // import 문 사이에 빈 줄을 추가합니다.
  "importOrderSeparation": true,

  // import의 세부 사항을 정렬하지 않습니다.
  "importOrderSortSpecifiers": false
}

프론트엔드 기술 스택

API 요청