CRA 없이 React 앱 설정하기 (+ TS, Eslint/Prettier) — (3) Eslint/Prettier

7 min readJul 3, 2022

시리즈

(0) 동기와 방향성
(1) Babel과 Webpack
(2) TypeScript와 React
(3) Eslint와 Prettier

6. Eslint와 Prettier

앞선 내용까지만 적용하더라도 React와 TypeScript에 대한 설정은 마무리가 되었다. 하지만 통상적으로 사용되는 code convention을 강제하고 자동으로 formatting을 하기 위해서 Eslint와 Prettier 두 가지 패키지를 설치하고 설정한다.

먼저 Eslint와 와 필요한 parser, plugin을 설치하기 위해서 아래 명령어를 실행한다.

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks

eslint를 제외한 패키지들은 각각 아래와 같은 역할을 한다.

@typescript-eslint/parser: eslint가 TS를 parsing 할 수 있도록 한다. (github)
나머지 플러그인: 각각 TS, React, React-hooks에 대해서 적용할 lint 규칙을 불러온다

그리고 prettier도 설치한다.

npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

prettier를 제외한 패키지들은 각각 다음과 같은 역할을 한다.

eslint에 prettier의 규칙들을 추가하는 플러그인
eslint와 prettier가 충돌이 발생하는 경우 prettier의 규칙을 우선적으로 따르게 하는 플러그인

우선 eslint를 적용하기 위해서 .eslintrc.json 파일을 생성하고 규칙을 추가한다.

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "env": {
    "browser": true,
    "node": true,
  },
  "parserOptions": {
    "project": ["./tsconfig.json"]
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended", // eslint 기본 추천 규칙
    "plugin:@typescript-eslint/recommended", // ts 기본 추천 규칙
    "plugin:@typescript-eslint/recommended-requiring-type-checking", // 타입 정보를 필요로 하는 특정 규칙들 포함
    "plugin:react/recommended", // 리액트에 필요한 규칙
    "plugin:react/jsx-runtime", // react를 import 하지 않아도 되도록 인식하는 규칙
    "plugin:react-hooks/recommended", // react-hooks에 관한 규칙
    "prettier", // pre
  ],
};

root는 해당 설정 파일의 위치가 프로젝트의 root의 위치며 따라서 이 디렉토리보다 상위 디렉토리에는 관심을 가질 필요가 없다는 사실을 알려주는 설정이다.

parser는 TS를 활용하기 위해서 "@typescript-eslint/parser"로 설정한다.

env는 어떤 환경을 대상으로 작성되는 코드인지에 대한 정보를 제공한다. 예를 들어 browser를 true로 설정한 경우 브라우저의 api인 localStorage를 eslint가 이해할 수 있으며 node를 true로 설정한 경우 nodejs의 api인 process.env로 환경 변수에 접근할 수 있다.

parserOptions는 직접 선언한 타입을 eslint가 이해하기 위해서 필요하다. eslint에서 설정한 parser는 앞서 추가한 이미지에 대한 타입 선언과 같은 custom 타입을 불러와야만 올바르게 parse할 수 있다. 따라서 project의 tsconfig의 위치를 지정해주면 그 설정 내부에서 include하고 있는 파일들을 대상으로 하고 있다는 것을 인지하고, 그곳에 추가한 custom 타입을 불러온다. (참고)

plugin은 규칙들을 적용하기 위해서 설치한 플러그인들을 불러오는 설정이다. prettier를 이곳에 추가하면 앞서 설치한 eslint-config-prettier 패키지에 의해서 충돌이 나는 경우 prettier의 규칙이 우선적으로 적용되도록 설정된다.

extends에서는 설치한 플러그인이 제공한 규칙 중 실제로 적용할 규칙을 기본 설정에 확장하여 추가할 수 있다.

prettier도 설정해주기 위해서 .prettierrc.json 파일을 생성하고 설정을 추가한다.

{
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "endOfLine": "auto",
  "arrowParens": "always",
  "trailingComma": "es5"
}

해당 규칙들을 적용하는 이유는 개인에 따라서 다를 수 있다. 현재 적용한 규칙들을 적용한 이유는 다음과 같다

tabWidth: 2 혹은 4를 사용하는 것이 통상적인데, 같은 너비에서 더 많은 코드를 볼 수 있는 2를 선호한다.
printWidth: default 값이자 가장 많이 사용되는 값인 80을 사용, 개인적인 취향은 90이지만 default에 최대한 맞추고 계속해서 문제가 생기면 추후에 변경하는 것으로 한다.
singleQuote: 때에 따라 다르다. 이번에는 true
endOfLine: auto로 설정하면 코드가 작성되는 OS 환경과 editor의 환경에 따라서 적용된다.
arrowParens: always로 사용하지 않으면 화살표 함수의 매개변수가 한 개일 때 괄호가 생략된다. 생략되지 않는 것이 미관 상으로도, 매개변수를 추가하고자 할 때 다시 괄호를 작성하지 않아도 된다는 점에서도 낫다고 생각해서 always를 사용한다.
trailingComma: es5 설정은 array, object 등의 객체에서는 trailing comma를 허용하고 그 외의 경우에는 제거한다. 그 외의 경우란 함수의 매개 변수 등이 포함된다. never로 설정할 수도 있지만 그렇게 되면 여러 줄로 이루어진 객체에 새로운 요소를 추가할 때 번거롭다. 미관 상 가장 자연스럽다고 생각되는 es5로 설정했다.

맺으며

직접 React 앱을 설정하는 일은 매번 마주칠 때마다 어렵고 두려운 일이었고, 그렇기 때문에 오히려 넘어야만 하는 산이라고 생각했다. 설정을 하면서 많은 공부를 했고 React를 구동시키기 위해서 필요한 환경에 어떤 것들이 있는 지에 대해서 많은 고민을 할 수 있었다. 분명 프로젝트를 진행하면서 많은 변동이 생길 것이고 그에 따라서 설정이 업데이트 되겠지만 지금까지 고민한 내용을 토대로 한다면 금방 어떤 설정을 어떻게 하면 될 지 찾을 수 있을 것이다. 이 글이 마찬가지로 누군가에게 작은 도움이 되었으면 하는 바람이다. 마지막으로 이 머리 아픈 공부를 함께 해준 페어에게 감사의 마음을 전한다.

시리즈

(0) 동기와 방향성
(1) Babel과 Webpack
(2) TypeScript와 React
(3) Eslint와 Prettier

CRA 없이 React 앱 설정하기 (+ TS, Eslint/Prettier) — (3) Eslint/Prettier

6. Eslint와 Prettier

맺으며

Written by Bling