FEInterview Prep

build-tools · high priority

ESLint & Prettier

Flat Config, 코드 품질 vs 포맷팅, Husky + lint-staged

intermediate 난이도4시간토스당근카카오네이버배민
시작 전
이해도
매우 낮음

학습 개요

쉬운 설명

복잡한 개념을 실생활 비유로 설명합니다.

“맞춤법 검사기(ESLint)와 자동 정렬 기능(Prettier)의 조합”

ESLint는 "이 표현은 논리적으로 잘못됐어"를 잡고, Prettier는 "쉼표 위치, 들여쓰기를 통일하자"를 처리한다. 둘 다 코드를 더 읽기 쉽게 만들지만 서로 다른 관심사를 다룬다.

핵심 개념

ESLint vs Prettier

ESLint
  • 코드 품질 (Code Quality)
  • 버그 패턴 탐지
  • no-unused-vars, no-console
  • react-hooks/rules-of-hooks
  • import 순서 규칙
  • 수정 가능 → 코드 의미 변경
1// ESLint가 잡는 것
2const x = 1; // no-unused-vars
3if (x == '1') {} // eqeqeq
4useEffect(() => {}, [dep]) // 잘못된 deps
Prettier
  • 코드 포맷 (Formatting)
  • 들여쓰기, 줄바꿈
  • 따옴표 스타일
  • 세미콜론 여부
  • 줄 최대 길이
  • 의미 없는 스타일 통일
1// Prettier가 정리하는 것
2const x={a:1,b:2}
3// → const x = { a: 1, b: 2 };
4function foo(a,b,c){return a+b}
5// → 줄바꿈, 들여쓰기 적용

eslint-config-prettier 필수

ESLint에도 포맷팅 규칙(indent, quotes 등)이 있어 Prettier와 충돌한다. eslint-config-prettier를 설치하면 ESLint의 포맷팅 규칙을 비활성화한다.

실무 적용

어떤 상황에서 사용하는가

새로운 Next.js 프로젝트에 ESLint + Prettier + Husky를 셋업할 때

어떻게 적용하는가

1) Next.js 내장 ESLint 설정(next/core-web-vitals)에서 시작, 2) eslint-config-prettier 추가해 충돌 제거, 3) Husky + lint-staged로 커밋 전 자동 검사, 4) VSCode에서 저장 시 자동 포맷 설정

흔한 실수와 안티패턴

  • eslint-plugin-prettier와 eslint-config-prettier 혼용 (eslint-config-prettier만 사용)
  • Prettier와 ESLint 포맷팅 규칙 충돌로 무한 수정 루프
  • husky 설정 후 팀원들에게 npx husky install 실행 안내 누락
  • CI에서 eslint --fix 실행 (CI는 검사만, 수정은 로컬에서)

면접 질문

중급토스당근카카오

답변 방향 힌트

Code Quality vs Formatting, eslint-config-prettier

반드시 언급할 키워드

  • ESLint: 코드 품질
  • Prettier: 포맷팅
  • eslint-config-prettier로 충돌 규칙 비활성화

예상 꼬리 질문

  • ESLint Flat Config(v9)가 기존 .eslintrc와 무엇이 다른가요?
  • Biome을 도입하는 장단점은?

학습 자료

이전

← PRPL Pattern

다음

Auth Strategies →