[Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 2

리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기

(CRA + Prettier + ESLint + TypeScript + Storybook + chromatic)

2022.01.28 - [🛠/Dev Tool] - [Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1

[Storybook] 리액트로 프론트엔드 개발 시 유용한 컴포넌트 관리 도구, 스토리북을 도입해보기 - 1

 

---

Prettier

yarn add -D prettier

# 또는

npm install --save-dev prettier

이제 미리 어떤 포맷을 사용할 것인지 정의하기 위해 프로젝트의 root에서 .prettierrc 파일을 생성한다.

{
  "singleQuote": false,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always",
  "trailingComma": "all",
  "bracketSpacing": true,
  "proseWrap": "preserve",
  "requirePragma": false,
  "overrides": [
    {
      "files": "*.css",
      "options": {
        "parser": "css"
      }
    },
    {
      "files": ["*.mts", "*.cts", "*.ts"],
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

 

- css 파일의 prettier가 에러라고 잡아내는 경우가 있어서 override로 설정을 추가해준다.

- "parset": "typescript"를 override 안에 넣어주어야 쓸데없는 에러를 피할 수 있다. 

 

 

이제 npx prettier --check ./src 명령어를 실행해본다.

일부러 기호 하나를 넣어두었는데, 사실 위에 작성한 것과는 크게 관련 없긴 하지만, 이런 식으로 포맷 실행 시 에러를 보여준다.

만일 prettier로 포맷할 필요가 없다면, .prettierignore 파일을 프로젝트 루트에 생성해서 gitignore처럼 내버려 두고자 하는 파일을 추가한다. 나는 MDX 파일을 계속 에러로 잡길래 아래처럼 해주었다.

# .prettierignore

# Ignore all MDX files:
*.mdx

하지만 매번 이렇게 명령어를 실행하는 것은 귀찮으니, vscode 에디터를 기준으로, extension의 도움을 받고자 한다.

command + Shift + P -> settings.json

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,

위 코드를 중간에 삽입하면, 이제 코드를 저장할 때마다 알아서 prettier가 코드를 .prettierrc에 지정한 대로 고쳐줄 것이다.

ESLint

ESLint는 EcmaSript + Lint의 합성어인데, Lint는 잠재적으로 버그나 에러를 낼 가능성이 있는 코드를 분석해 보여준다.

마찬가지로

npm install --save-dev eslint

# 또는

yarn add -D eslint

디펜던시를 설치해준다.

이제 npx eslint --init

To check syntax and find problems

JavaScript modules (import/export)

React

Yes

브라우저와 노드 위에서 모두 코드를 돌린다고 하면 스페이스 바를 눌러서 둘다 선택해주고 엔터를 친다.

JSON으로 선택했지만, 나중에 ts로 바꾸게 되었다.

 

마지막에 eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest를 npm으로 다운 받겠냐고 하는데, 나는 yarn을 쓰고 있어서 No를 택했고,

yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

위 명령어로 디펜던시를 깔아주었다. npm으로 모듈을 다운받고 있었다면 그냥 yes를 클릭하면 된다.

// .eslintrc.ts
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: "latest",
    sourceType: "module",
    project: "./tsconfig.json",
  },
  plugins: ["react", "@typescript-eslint", "prettier"],
  settings: {
    react: {
      version: "detect",
    },
  },
  rules: {
    // General
    "no-console": "error",
    // TypeScript
    "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-member-accessibility": "off",
    "@typescript-eslint/indent": "off",
    "@typescript-eslint/member-delimiter-style": "off",
    "@typescript-eslint/no-confusing-void-expression": [
      "error",
      { ignoreArrowShorthand: true, ignoreVoidOperator: true },
    ],
    "no-duplicate-imports": "off",
    "@typescript-eslint/no-duplicate-imports": "error",
    "@typescript-eslint/no-implicit-any-catch": "error",
    "no-invalid-this": "off",
    "@typescript-eslint/no-invalid-this": "error",
    "@typescript-eslint/no-invalid-void-type": "error",
    "no-loop-func": "off",
    "@typescript-eslint/no-loop-func": "error",
    "no-loss-of-precision": "off",
    "@typescript-eslint/no-loss-of-precision": "error",
    "@typescript-eslint/no-parameter-properties": "off",
    "no-redeclare": "off",
    "@typescript-eslint/no-redeclare": "error",
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": "error",
    "no-throw-literal": "off",
    "@typescript-eslint/no-throw-literal": "error",
    "@typescript-eslint/no-unnecessary-boolean-literal-compare": "error",
    "@typescript-eslint/no-unnecessary-condition": "error",
    "@typescript-eslint/no-unnecessary-type-arguments": "error",
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-expressions": "error",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-use-before-define": ["error", { variables: false }],
    "@typescript-eslint/prefer-enum-initializers": "error",
    "@typescript-eslint/prefer-for-of": "error",
    "@typescript-eslint/prefer-includes": "error",
    "@typescript-eslint/prefer-nullish-coalescing": "error",
    "@typescript-eslint/prefer-optional-chain": "error",
    "@typescript-eslint/prefer-reduce-type-parameter": "error",
    "@typescript-eslint/prefer-string-starts-ends-with": "error",
    "@typescript-eslint/prefer-ts-expect-error": "error",
    "@typescript-eslint/promise-function-async": "error",
    "no-return-await": "off",
    "@typescript-eslint/return-await": "error",
    "@typescript-eslint/strict-boolean-expressions": "error",
    "@typescript-eslint/switch-exhaustiveness-check": "error",

    // React
    "react/jsx-boolean-value": "warn",
    "react/jsx-curly-brace-presence": "warn",
    "react/jsx-fragments": "warn",
    "react/jsx-no-useless-fragment": "warn",
    "react/jsx-uses-react": "off",
    "react/prefer-stateless-function": "warn",
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",

    // Functional
    "functional/prefer-readonly-type": [
      "warn",
      {
        allowLocalMutation: true,
        allowMutableReturnType: true,
        ignoreClass: true,
      },
    ],
  },
};

 

다음 번에는 코드 husky와 lint-staged를 통해서 코드 포맷 자동화를 하는 것까지 다루고자 한다.