ESLint 란?
ESLint는 ECMAScript/JavaScript와 Lint가 합쳐진 단어로 Lint는 코드에서 문제점, 버그, 스타일 오류를 찾아주는 도구이다.
왜 써야하는가??
그러면 이런 버그나 문제점을 그냥 수정하면 되는데 왜? ESLint를 사용하는 걸까?
1. 팀 프로젝트에서 각자 코드 스타일이 다르다면?
팀원들 모두 코드 스타일이 완벽하게 같을 수는 없다.
그러면 어떤 파일은 ", 어떤 파일은 ', 또 어떤 파일은 ; . . .
이렇게 파일마다 각자 다른 스타일을 유지한다면 코드가 혼란스럽고 코드 리뷰가 어렵고 생산성을 하락하게 한다.
ESLint가 이런걸 통일 시켜준다.
2. 실수를 미리 잡아줌!
const num = 10;
console.log(numm);예를 들어 이렇게 num을 numm으로 쓰는 타이핑 실수들을 ESLint가 잡아준다.
3. React에서 흔한 실수들도 잡아줌
- useEffect dependency 실수
- props를 잘못 넘기는 경우
- 변수를 선언만 하고 사용하지 않는 경우
- unused import
- console.log 제거
여기서 React에서 흔한 실수들을 잡아준다고 했다.
그러면 Next.js에서는 이러한 실수들을 잡아주지 않는걸까?
전혀 그렇지 않다!!❌❌
Next.js에는 ESLint가 기본 내장되어 있다.
Next.js ESLint 기본 내장
React는 ESLint를 직접 설치해야 하지만 Next.js는 프로젝트를 생성하면 자동으로 ESLint 설정이 붙어있다.
Next.js는 Next.js 전용 ESLint 플러그인을 제공하여 React보다 더 많은 규칙을 추가로 검사한다
1. 이미지 최적화 오류
<img src="kimjiyu.png" />Next.js에서는 img 태그를 사용하게 되면 성능이 떨어진다고 판단해 Image 컴포넌트를 사용하라고 경고를 표시한다.
2. Link 컴포넌트 사용 실수
<a href="/jiyu">kim</a>a 태그 사용시 Link 태그를 사용하라고 표시한다.
이외에도 Next.js 사용시 ESLint는 렌더링, 성능 등 더 많은 것을 검사하게 된다.
동작 방식
그렇다면 ESLint는 이런 검사를 어떤 방식으로 진행하게 될까?
ESLint는 코드를 AST(Abstract Syntax Tree)로 변환한다.
여기서 AST는 추상 구문 트리로 코드를 트리 구조로 변환한 것 이다.
-> 즉 사람이 쓴 코드 문장을 컴퓨터가 이해할 수 있는 형태로 구조화한 것 이다.
예를 들어 코드가 이렇게 있다.
const a = 10 + 20;이 한 줄 코드를 AST로 바꾸면
기본 구조는 이런 트리 형태로 변한다.
Program
└─ VariableDeclaration (const)
└─ VariableDeclarator
├─ Identifier (a)
└─ BinaryExpression (+)
├─ Literal (10)
└─ Literal (20)이렇게 노드들도 쪼개진 구조가 된다.
그리고 각 규칙들이 이런 AST 구조를 보고 문제가 있고 스타일이 다르다 이런 식으로 검사한다.
설치
ESLint에 설치 방법으로는
npm init @eslint/config@latest명령어로 설치한 후
프로젝트 루트에는 .eslintrc.json 파일이 생긴다.
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
}
}원하면 여기서 규칙을 추가하면 된다.
예를 Unused import 경고를 하려면
"rules": {
"no-unused-vars": "warn"
}코드를 추가하면 된다.
Prettier와의 차이
그러면 ESLint를 언급하면 자주 나오는 Prettier는 무엇이고 ESLint와의 차이점은 무엇일까?
Prettier는 포멧터이고
ESLint는 분석기이다.
둘은 목적 자체가 완전히 다르다.
prettier가 하는 일
그러면 prettier는 뭘 하는 것일까?
1. 개행-들여쓰기 자동정리
2. 세미콜론 여부
3. 따옴표 통일
4. 코드 포맷팅 자동 통일
등이 있다.
-> 즉, 예쁘고 일관된 코드 스타일을 유지하기 위해 사용한다.
ESLint는 내가 정한 규칙을 통해 버그나 규칙에 어긋나는 것을 찾아 경고 해준다.
즉, 코드를 올바르게 만드는 게 목적이다.
Prettier는 '들여쓰기, 줄바꿈, 따옴표, 세미콜론' 같은 스타일만 관리하며 개발자가 규칙을 만들 필요 없고 저장할 때 자동으로 전체 코드를 포맷팅 해준다.
즉, 코드를 예쁘게 만드는 게 목적이다.
정리하자면
- ESLint = 버그 방지 + 팀 규칙 강제
- Prettier = 코드 스타일 자동 정리
라고 말할 수 있다.
그래서 대부분은 ESLint와 Prettier 동시에 사용하고 충돌 나는 규칙은 eslint-config-prettier 제거한다.
결국 ESLint와 Prettier는 서로의 역할이 다르기 때문에 함께 사용할 때 가장 강력해진다.
버그 없는 코드를 만들고 싶다면 ESLint를, 일관된 스타일로 정리된 코드를 원한다면 Prettier를 적용하면 된다.
마무리
지금까지 ESLint에 대해 알아보았다!
ESLint는 작은 실수까지 잡아주며 코드 품질을 지켜주는 필수 도구이다.
프로젝트를 진행한다면 설정해두면 좋을 것 같다.
