개발자들의 숙명, 코드 스타일 전쟁의 종결자: Prettier와 ESLint

안녕하세요, 코드 한 줄 한 줄에 영혼을 담는 개발자 여러분! 오늘은 프론트엔드 개발 환경에서 거의 필수적으로 사용되는 두 가지 도구, Prettier와 ESLint에 대해 이야기해보려고 합니다. 이 둘은 종종 함께 언급되지만, 각자의 역할이 명확히 다르고, 때로는 서로 충돌하며 우리를 괴롭히기도 합니다. "들여쓰기는 스페이스 2칸이지!", "아니, 4칸이 국룰이야!"와 같은 논쟁, 이제는 그만할 때가 됐습니다. 이 글을 통해 Prettier와 ESLint의 역할을 명확히 구분하고, 둘이 행복하게 공존할 수 있는 완벽한 설정 방법을 알아보겠습니다.

1. 역할 분담: 누구냐, 넌?

먼저 두 도구의 정체성을 확실히 해둡시다.

• ESLint: 코드 품질 검사관 (Linter)

  • 코드의 잠재적인 오류나 버그를 찾아냅니다. (예: 사용하지 않는 변수, 잘못된 스코프 사용 등)
  • 특정 코딩 스타일 가이드(예: Airbnb Style Guide)를 따르도록 규칙을 강제합니다.
  • 문법적인 부분을 넘어 코드의 품질과 일관성에 초점을 맞춥니다.

• Prettier: 의견이 확고한 코드 정리 전문가 (Code Formatter)

  • 오로지 코드의 스타일에만 관여합니다. 즉, 코드를 어떻게 예쁘게 보여줄 것인가에만 집중합니다.
  • 들여쓰기, 줄 바꿈, 따옴표 종류, 세미콜론 사용 여부 등을 정해진 규칙에 따라 자동으로 수정해줍니다.
  • 개발자가 코드 스타일에 대해 고민할 시간을 없애고, 로직에만 집중할 수 있도록 돕는 것이 주된 목표입니다.

문제는 ESLint도 일부 포맷팅(들여쓰기, 줄 길이 등) 규칙을 가지고 있다는 점에서 발생합니다. ESLint가 "줄 길이는 80자여야 해!"라고 하고, Prettier가 "아니, 100자까지는 괜찮아!"라고 한다면? 바로 여기서 충돌이 발생하고, 개발자는 혼란에 빠지게 됩니다.

2. 충돌 해결: 설정으로 평화 유지하기

이 둘의 전쟁을 끝내는 방법은 간단합니다. 코드 포맷팅(스타일)에 대한 모든 권한을 Prettier에게 위임하고, ESLint는 코드 품질에만 집중하도록 만드는 것입니다. 이를 위해 eslint-config-prettier라는 아주 유용한 패키지가 있습니다.

단계 1: 필요한 패키지 설치

먼저 Prettier와 ESLint, 그리고 충돌 방지용 패키지를 설치합니다.

# npm 사용 시
npm install --save-dev eslint prettier eslint-config-prettier

# yarn 사용 시
yarn add --dev eslint prettier eslint-config-prettier

단계 2: .eslintrc 설정 파일 수정

프로젝트의 .eslintrc.js 또는 .eslintrc.json 파일의 extends 배열에 prettier를 추가합니다. 여기서 가장 중요한 점은 prettier가 배열의 맨 마지막에 위치해야 한다는 것입니다. 그래야 다른 설정들(예: eslint:recommended, airbnb-base)의 포맷팅 규칙을 prettier가 덮어쓸 수 있습니다.

// .eslintrc.js 예시
module.exports = {
  extends: [
    "eslint:recommended", // ESLint의 기본 추천 규칙
    "plugin:react/recommended", // 리액트 관련 규칙 (예시)
    "prettier", // 반드시 마지막에 추가!
  ],
  // ... 나머지 설정
};

이 한 줄을 추가하는 것만으로, ESLint의 규칙 중에서 Prettier와 충돌할 수 있는 모든 포맷팅 관련 규칙이 비활성화됩니다. 이제 ESLint는 더 이상 코드의 모양에 대해 간섭하지 않고, 오직 코드의 논리적 오류나 잠재적 문제점만을 지적하게 됩니다.

3. 더 완벽한 통합: eslint-plugin-prettier

여기서 한 걸음 더 나아가, Prettier의 포맷팅 규칙을 ESLint의 규칙 중 하나로 실행시킬 수도 있습니다. 즉, Prettier에 의해 포맷팅되지 않은 코드가 있다면, ESLint가 이를 에러로 표시해주는 것입니다. 이를 위해 eslint-plugin-prettier를 사용합니다.

단계 1: 플러그인 설치

npm install --save-dev eslint-plugin-prettier
yarn add --dev eslint-plugin-prettier

단계 2: .eslintrc 설정 파일 수정

plugins 배열에 prettier를 추가하고, rules 객체에 'prettier/prettier': 'error'를 추가합니다.

// .eslintrc.js 최종 예시
module.exports = {
  extends: [
    "eslint:recommended",
    "prettier", // eslint-config-prettier (충돌 방지)
  ],
  plugins: [
    "prettier", // eslint-plugin-prettier (Prettier 규칙을 ESLint 규칙으로)
  ],
  rules: {
    "prettier/prettier": "error", // Prettier 규칙에 어긋나면 에러 발생
    // ... 다른 규칙들
  },
  // ...
};

이제 코드를 저장할 때마다 (VSCode 등의 에디터 설정이 되어 있다면) Prettier가 코드를 자동으로 수정해주고, 만약 어떤 이유로든 Prettier 규칙에 맞지 않는 코드가 커밋되려고 하면 ESLint가 에러를 발생시켜 일관된 코드 스타일을 강력하게 유지할 수 있습니다.

4. 마무리하며: 이제 싸우지 말고 개발에 집중하세요!

정리해볼까요?

• ESLint는 코드의 품질을 책임집니다.
• Prettier는 코드의 스타일을 책임집니다.
• eslint-config-prettier를 사용하여 둘의 충돌을 막습니다.
• eslint-plugin-prettier를 사용하여 Prettier 규칙을 ESLint에 통합합니다.

이 설정 하나만으로도 팀원들과의 불필요한 코드 스타일 논쟁을 없애고, 모든 팀원이 작성한 코드가 마치 한 사람이 작성한 것처럼 일관성을 유지하게 됩니다. 이는 코드 가독성을 높이고, 리뷰 과정의 효율성을 극대화하며, 결과적으로는 더 중요한 비즈니스 로직에 집중할 수 있는 환경을 만들어 줍니다.

이제 여러분의 프로젝트에도 평화를 가져다줄 시간입니다. 오늘 바로 Prettier와 ESLint를 설정하고, 행복한 코딩 라이프를 즐기시길 바랍니다!