react-deep-dive 스터디(8장-8.1 ESLint)

8장 좋은 리액트 코드 작성을 위한 환경 구축하기

8.1 ESLint를 활용한 정적 코드 분석

• 정적 코드 분석 - 코드의 실행과 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내서 문제의 소재가 있는 코드를 사전에 수정하는 것
• ESLint - 자바스크립트에서 가장 많이 사용되는 정적 코드 분석 도구

8.1.1 ESLint 살펴보기

• ESLint의 코드 분석 원리
  1. 자바스크립트 코드를 문자열로 읽음
  2. 자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화함
  3. 2번에서 구조화한 트리를 AST(Abastract Syntax Tree)라 하는데, 이 트리를 기준으로 각종 규칙과 대조함
  4. 규칙과 대조시 위반한 코드를 알리거나 수정한다.
  *ESLint는 자바스크립트 분석시 기본값으로 espree를 사용, 타입스크립트의 경우 @typescript-eslint/typescript-estree로 코드 분석

• plugins
  어떤 코드가 잘못됐으며, 어떻게 수정하는지 정하는 ESLint 규칙의 모음
  

8.1.2 eslint-plugin과 eslint-config

• eslint-plugin
  eslint 규칙을 모아놓은 패키지

  ex)

  1. eslint-plugin-import
     import 와 관련된 다양한 규칙을 제공
  2. exlint-plugin-react
     react/jsx-key는 jsx 배열에 키를 선언하지 않았다고 경고
     => ESLint는 정적 코드 분석이라 key가 유니크 값인지는 모르지만 존재 여부는 확인 가능

• eslint-config
  eslint-plugin을 묶어서 한 세트로 제공하는 패키지
  여러 프로젝트에 걸쳐 동일하게 사용할 수 있는 ESLint 관련 설정을 제공하는 패키지

• 자주 사용하는 eslint-config
  1. eslint-config-airbnb
  2. @titicaca/triple-config-kit
  3. eslint-config-next(Next.js 프레임워크 config)
  => next는 정적 코드 분석 뿐 아니라 JSX 구문 및 _app, _document에 작성돼있는 HTML 코드 또한 정적 분석 대상으로 분류해 제공

주의할 점

1. Prettier와의 충돌
   Prettier는 자바스크립트, HTML, CSS, 마크다운, JSON 등 다양한 언어에도 적용 가능하지만 ESLint는 자바스크립트에만 작동
   => 충돌 위험성이 있음

   *해결방법

   • Prettier에서 제공하는 규칙을 어기지 않도록, ESLint에서 규칙을 끄는 방법
   • 자바스크립트, 타입스크립트는 모두 ESLint 적용 / 그 외의 파일은 모두 Prettier 적용 단, 자바스크립트에 추가적으로 필요한 Prettier 규칙은 모두 eslint-plugin-prettier를 사용

2. 규칙에 대한 예외 처리, react-hooks/no-exhaustive-deps
   ㅇ일부 코드에서 특정 규칙을 임시로 제외시키고 싶다면 eslint-disable-주석을 사용하면 됨
   => 생각치 못한 버그를 야기시킬 수 있으므로 꼭 점검한 뒤 사용