ESLint 설정하기

그동안 ESLint를 제대로 설정해 보지를 않아 이번 기회에 적용해 보기로 생각했다.

나는 Airbnb ESLint 설정을 직접 해보기로 결정했고, 설정에 필요한 패키지 모듈을 찾아보았다.

 

패키지 모듈로는 아래와 같이 찾아볼 수 있었다.

eslint-config-airbnb

eslint-config-airbnb-typescript

yarn add -D eslint-config-airbnb

yarn add -D eslint-config-airbnb-typescript

필요한 모듈을 설치하고, 추가적으로 eslint-config-airbnb-typescript 패키지 설명에 있는 모듈의 의존성을 추가해 주면 된다.

yarn add -D eslint-config-airbnb-typescript \
            @typescript-eslint/eslint-plugin@^7.0.0 \
            @typescript-eslint/parser@^7.0.0

.eslintrc 설정 파일 확인

설정 파일의 위치는 프로젝트 최상위 루트 디렉토리에 .eslintrc 폴더를 생성하면 된다.

.eslintrc.json, .eslintrc.js, .eslint.yml 등 자신에게 편한 확장자 포맷으로 진행하면 된다. ( 작성자는 eslintrc.json을 활용 )

 

작성자는 yarn create next-app 설정에서 eslint를 사용하겠다고 하니, .eslintrc.json을 생성해 주었다.

근데 기본적으로 eslint 설정까지 완료된 상태로 생성되는 건가 하였는데 아래와 같이 처음 보는 설정만 추가된 상태였다.

{
  "extends": "next/core-web-vitals"
}

설정하기 전에 무엇인지 알아봐야겠다.

"next/core-web-vitals" 이란?

관련 내용은 vercel에서 찾아볼 수 있었다.

기본적인 설명으로는 ESLint를 처음 설정하는 개발자에게 권장하는 구성이라고 나온다.

 

근데 이게 무슨 말인지는 이해가 되지 않아서 조금 더 찾아보기로 했다.

Web Vitals  |  Articles  |  web.dev

웹 바이탈은 웹에서 우수한 사용자 환경을 제공하는 데 필수적인 웹페이지 품질 신호에 관한 통합 가이드를 제공하기 위한 Google 이니셔티브입니다. 이 지표는 사용 가능한 다양한 성능 측정 도구를 단순화하고 사이트 소유자가 가장 중요한 측정항목인 코어 웹 바이탈에 집중할 수 있도록 돕는 것을 목표로 합니다.

내용을 보니, 웹 성능을 평가하고 우수한 사용자 경험을 제공하기 위한 측정 도구인 것으로 보인다.

정확한 내용은 조금 더 문서를 자세히 읽어보고 각 용어에 대해서 분석해 볼 필요가 있을 거 같다.

 

결론적으로, 이 core-web-vitals는 웹 성능을 측정할 때 필요한 코드에 lint를 확인해 주는 역할이라고 생각된다.

그렇기에 extends에서 제거하지 않고, airbnb 설정과 같이 설정을 적용해 보기로 했다.

.eslintrc.json "extends"

많은 기업이 eslint 설정을 통해 프로젝트를 설정하고 lint하고 있다.

이렇게 기업들이 공개적으로 설정해 놓은 eslint 설정을 그대로 가져와 base가 되는 설정을 사용할 수 있도록 하는 역할인 셈 ..

 

가져온 설정 중에 필요 없는 설정이 있다고 판단되면 rules 설정으로 비활성화하거나 로그 메세지 타입을 변경할 수도 있다.

작성자의 경우는 "react-in-jsx-scope" 설정을 "off" 했다.

 

요즘엔 기본적으로 "react" 에 대한 의존성이 있는데 또 다시 import "React" from "react"를 선언할 필요가 있나 싶었기 때문이다.

나에겐 너무나 불필요한 코드 입력이라고 생각했고, 모든 파일에 "React" 의존을 추가하는 것은 시간 낭비 같았다.

 

extends에는 위에서 설치한 모든 패키지를 추가했다.

ESLint 설정은 "eslint-config-*" 형식으로 "패키지이름/설정이름" 으로 되어 있어 단축어로 airbnb만을 선언하여 의존을 할 수 있다.

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
  ],
  "rules": {
    "react-in-jsx-scope": "off"
  }
}

ESLint Typescript 검사

Typescript를 사용하는 경우, 추가적으로 파서를 지정해 주어야 한다.

parser와 parserOptions.project를 사용하는 것인데 작성 방법은 아래와 같다.

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react-in-jsx-scope": "off"
  }
}

parser 옵션에 typescript 분석을 위해 설치한 @typescript-eslint/parser를 활용하여 타입스크립트를 파싱하고 분석하는 것이고,

parserOptions.project 설정은 지정한 파일을 활용하여 타입을 검사하도록 파서에게 알리는 것이다.

spread-operator ESLint 오류

마지막으로 yarn run lint 명령어로 설정으로 인해 에러가 발생하는 지점은 없는 지 확인을 해 보고자 했다.

하지만, 역시 한번에 되는 일은 잘 없는 거 같다.

 

바로 펼침연산자 사용으로 인한 오류가 발생하는 것이였다.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

기본적으로 next 앱을 생성하고 _app.tsx 파일엔 ...pageProps로 props들을 내려주는 것을 볼 수 있다.

eslint는 props를 내려줄 때, 어떠한 props가 내려지게 되는지 명시하는 것을 권장하고 있어 이러한 에러가 발생하게 된다고 한다.

 

작성자 생각엔 펼침연산자를 많이 사용하게 될 일은 잘 없기 때문에 그냥 비활성화하기로 결정했다.

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript",
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off"
  }
}

마무리

생각보다 설정할 내용이 그렇게 많지는 않았다.

아마 프로젝트 개발을 진행하면서 여러가지로 고려해야할 설정이 생길 거 같긴 하다.

하지만 그때가서 또 부딪혀 보며 해결하고 이렇게 기록해 나가면 괜찮지 않을까 싶다.

 

개발자는 경험을 함으로서 성장하니까 ..

오늘은 원래 이러한 설정 이야기가 아닌 화면 개발 이야기를 하고 싶었는데 일정이 맞지 않았다.

 

위에 내용에서 부족한 점이 있을 수 있다.

추가적으로 보완해야 할 설정은 더 알아볼 예정이고, 내가 어떤 생각으로 진행한 것인지 정리해 보고 싶었다.

 

고맙습니다.