ESLint: 자바스크립트 코드 품질을 손쉽게 지키는 첫걸음

반응형

 

ESLint: 자바스크립트 코드 품질을 손쉽게 지키는 첫걸음

ESLint 개념 삽화 이미지

1. 왜 ESLint가 필요한가?

🔷 코드 품질이란 무엇인가

소프트웨어 개발에서 코드 품질(Code Quality)이란, 단지 ‘코드가 동작한다’는 것을 넘어서 다음과 같은 의미를 가집니다:

▸ 읽기 쉽고 이해하기 쉬운 구조

▸ 버그(오류)가 적고 유지보수가 쉬운 상태

▸ 팀 내에서 일관된 스타일이나 규칙이 지켜지는 상태

 

비개발자에게 비유하자면, 마치 문서를 쓸 때 맞춤법이 맞고, 표현이 통일되어 있으며, 누군가가 수정하기 쉬운 구성이 되어 있는 상태라고 볼 수 있습니다.

 

🔷 오류와 버그가 생기는 흔한 이유

코드는 사람에 의해 작성되므로 다음과 같은 실수가 흔히 발생합니다

▸ 변수 선언 방법이 일관되지 않음 (var, let, const 섞여 쓰임)

▸ 코드 스타일이 제각각이라 읽기 어렵다

▸ 사용하지 않는 변수나 함수가 남아 있다

▸ 브라우저나 환경별 차이를 고려하지 않는 코드

 

이런 상황이 누적되면 코드 리뷰 시간이 길어지고, 새로운 개발자가 들어왔을 때 이해가 어렵고, 더 나아가 생산 환경(배포된 소프트웨어)에서 오류가 발생할 확률이 올라갑니다.

 

🔷 린팅(Linting)이라는 개념

린팅(Linting)이라는 말은 원래 유닉스 환경에서 코드 내 ‘의심 가는 패턴’을 찾아주는 도구 (lint)가 유래입니다.

개발자 입장에서는 “코드를 자동으로 점검해 주는 ‘코드 문법 검사기’ + ‘스타일 검사기’” 정도로 이해할 수 있습니다.

즉, 코드를 실행하기 전에 정적(compile-run 전)으로 분석해서 잠재적인 문제를 빨리 찾아내는 도구입니다.

 

🔷 ESLint가 등장한 배경

자바스크립트(JavaScript)는 동적 언어이고, 실행 시점에 오류가 나올 수도 있고, 스타일이나 규칙이 엄격히 정해져 있지 않기 때문에 팀이나 프로젝트마다 코드 스타일이 뒤죽박죽이 되기 쉽습니다.

ESLint는 이런 문제를 해결하고자 등장한, 자바스크립트 코드에서 패턴을 찾아내고 보고하는 도구입니다.
예컨대 변수 선언 방식, 사용하지 않는 변수, 콘솔 로그 남용 등 “후에 버그나 혼란을 유발할 가능성 있는 코드”를 미리 알려주는 방식으로요.

 

2. ESLint란 무엇인가? – 개념 정리

🔷 ESLint의 정의

ESLint 공식 문서는 이렇게 설명합니다

“ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.”
즉 ESLint는 자바스크립트 코드 내 패턴을 식별하고 보고하는 도구이며, 코드 일관성과 버그 예방을 목표로 합니다.

 

🔷 ESLint의 핵심 특징

ESLint의 강점은 단순히 ‘문법 검사기’가 아니라, 플러그형 구조와 유연한 설정 덕분에 팀이나 프로젝트의 스타일에 맞게 완전히 커스터마이징할 수 있다는 점입니다.

 

1) 플러그형(Pluggable) 구조

ESLint는 처음부터 ‘확장 가능한 구조’를 염두에 두고 만들어졌습니다.

즉, 기본 규칙(rule) 외에도 추가 플러그인(plugin)을 설치하면 React, Vue, TypeScript 같은 다양한 프레임워크에 맞게 검사할 수 있습니다.

예를 들어:
▸ eslint-plugin-react → React 코드용 린팅
▸ @typescript-eslint/eslint-plugin → TypeScript 지원

이 덕분에 ESLint는 단순한 문법 점검기를 넘어 “생태계 표준” 으로 자리 잡았습니다.

 

2) 설정 가능(Configurable)

ESLint의 또 다른 강점은 ‘규칙을 내 마음대로 설정할 수 있다’는 점입니다.

각 프로젝트마다 개발 문화가 다르기 때문에, 엄격한 팀은 모든 규칙을 에러 수준으로 두고, 유연한 팀은 일부는 경고(warn), 일부는 무시(off)로 둘 수도 있습니다.

 

예를 들어, 아래와 같은 설정이 가능합니다

rules: {
  "no-unused-vars": "error",     // 사용되지 않은 변수는 오류
  "semi": ["warn", "always"],    // 세미콜론 누락 시 경고
  "quotes": ["error", "single"]  // 작은따옴표만 허용
}

즉, ESLint는 ‘정답을 강요하는 도구’가 아니라, 팀이 원하는 개발 스타일을 자동으로 지켜주는 도우미입니다.

 

3) 정적 분석(Static Analysis)

ESLint는 코드를 실제로 실행하지 않고, 코드 구조를 분석(Abstract Syntax Tree, AST 기반)해 문제를 찾습니다.

이런 방식을 정적 분석(static analysis)이라고 하며, “프로그램을 실행하지 않고도 버그를 미리 탐지”할 수 있다는 장점이 있습니다.

 

비유하자면,

“자동차를 출발시키기 전에 정비사가 타이어 공기압, 오일, 브레이크 상태를 미리 점검하는 것”
이 ESLint의 역할과 같습니다.

 

🔷 린터(Linter) vs 컴파일러(Compiler) 차이점

많은 초보자들이 ESLint를 “컴파일러랑 비슷한가요?”라고 묻곤 합니다.

하지만 두 도구의 목적은 완전히 다릅니다.

구분	Compiler	Linter
목적	코드를 실행 가능한 형태로 변환	코드 품질과 일관성 점검
시점	실행(런타임) 전 변환 과정	작성(개발) 단계에서 검사
주요 기능	문법 오류, 타입 체크	스타일, 일관성, 잠재적 오류 탐지
결과물	실행 가능한 프로그램	깨끗하고 읽기 좋은 코드

즉, 컴파일러는 “작동 가능한 코드”를 보장하지만, 린터는 “읽기 좋고 유지보수하기 쉬운 코드”를 보장합니다.

 

2025년 기준 ESLint는 v9.x 버전이 안정화되어 있으며, 기존 .eslintrc 방식에서 벗어나 새로운 “Flat Config” 구조(eslint.config.js)를 공식 권장합니다.

Flat Config는 다음과 같은 장점을 제공합니다

▸ 모듈 단위 설정 가능 (import/export 사용)
▸ Node.js ESM(모듈 시스템) 완벽 지원
▸ 프로젝트별 규칙 관리가 더 간결해짐

 

반응형

 

3. ESLint를 사용하는 방법 – 기본 흐름과 설정

ESLint는 기본적으로 Node.js 환경 위에서 동작합니다.

즉, 브라우저에서 바로 실행되는 도구가 아니라, 개발자가 작성한 자바스크립트 파일을 분석하는 CLI(명령줄 도구) 형태입니다.

준비물
▸Node.js 18.18.0 이상 (또는 20.9.0 이상 권장)
▸npm 또는 yarn 같은 패키지 관리자
▸프로젝트 폴더(package.json 존재 시 더 편리함)

이제 순서대로 ESLint를 설치하고 설정하는 과정을 살펴보겠습니다.

 

🔷 1단계: 설치 및 초기화

가장 간단한 설치 명령은 다음과 같습니다.

npm init @eslint/config@latest

이 명령을 실행하면 대화형 설정 마법사(interactive wizard)가 열립니다.

ESLint가 질문을 하나씩 던지며, 당신의 프로젝트에 맞는 설정을 만들어줍니다.

 

예를 들어

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript

이 과정을 마치면, 프로젝트 루트에 eslint.config.js (또는 eslint.config.mjs) 파일이 자동 생성됩니다.

이는 ESLint 9부터 도입된 Flat Config 방식으로, 기존의 .eslintrc보다 훨씬 명확하고 직관적입니다.

 

🔷 2단계: 설정 파일 이해하기 (eslint.config.js)

ESLint는 이 설정 파일을 기준으로 동작합니다.

이 파일 안에는 검사 대상, 규칙, 실행 환경 등이 담겨 있습니다.

 

▸ 예시

import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    files: ["**/*.js"],
    languageOptions: { ecmaVersion: "latest" },
    rules: {
      "no-unused-vars": "error",
      "prefer-const": "warn",
      "quotes": ["error", "single"],
    },
  },
];

 

▸ 주요 구성 요소

항목	설명
files	검사할 파일의 경로 패턴
languageOptions	ECMAScript 버전, 전역 변수 등 환경 설정
rules	적용할 규칙(에러 수준, 경고 수준 등)
extends / configs.recommended	기본 권장 규칙 세트 불러오기

위 설정은 “사용하지 않는 변수는 오류로 처리”하고, “const를 권장하며, 작은따옴표를 사용하라”는 규칙을 뜻합니다.

 

🔷 3단계: 코드 검사 실행하기

설정이 완료되면, 터미널에서 ESLint를 실행할 수 있습니다.

npx eslint yourfile.js

 

또는 프로젝트 전체를 검사하려면

npx eslint .

이 명령은 현재 디렉토리 아래의 모든 .js 파일을 분석합니다.
결과는 다음과 같이 표시됩니다

/src/app.js
  5:7  warning  'count' is assigned a value but never used  no-unused-vars
  9:3  error    Unexpected console statement                no-console

✖ 2 problems (1 error, 1 warning)

 

✔️ 팁:

ESLint는 일부 문제를 자동으로 고칠 수도 있습니다.

npx eslint . --fix

위 명령을 실행하면 수정 가능한 항목(들여쓰기, 세미콜론 등)은 자동 정리됩니다.

 

🔷 4단계: 에디터(IDE)와 연동하기

대부분의 개발자는 VS Code를 사용하므로, ESLint를 에디터와 연결하면 훨씬 편리합니다.

▸ VS Code 확장 마켓플레이스에서 “ESLint” 검색 → 설치

▸ 설정

ESLint 확장은 프로젝트의 eslint.config.js 파일을 인식하여, 코드를 작성하는 순간 바로 경고나 오류를 표시합니다.

빨간 밑줄(오류), 노란 밑줄(경고)로 즉시 피드백을 볼 수 있죠

예:
const a = 10; → 사용하지 않으면 경고
console.log('debug'); → 배포 시 금지 규칙이면 경고

ESLint 경고 예시화면

이렇게 하면 “코드를 실행하기 전부터 품질을 유지”할 수 있습니다.

 

🔷 5단계: 팀 프로젝트에서의 활용

ESLint는 혼자 쓸 때보다 팀 단위로 사용할 때 진가를 발휘합니다

▸ 모든 팀원이 같은 규칙을 적용 → 코드 스타일 통일

▸ Git Hook(pre-commit)에 ESLint를 연결 → 린트 통과하지 않으면 커밋 차단

▸ CI/CD 파이프라인에서 자동 검사 → 코드 품질 보증

예를 들어 package.json에 다음 스크립트를 추가할 수 있습니다.

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
}

이제 터미널에서 npm run lint만 입력하면, 팀 전체 코드가 자동으로 점검됩니다.

 

4. 입문자를 위한 실전 팁과 적용 사례

🔷 팀 프로젝트에서 ESLint를 적용할 때의 핵심 포인트

ESLint는 혼자서 코드를 점검할 때도 유용하지만, “팀 단위 협업”에서 진가를 발휘합니다.

여러 개발자가 같은 저장소(repository)에 코드를 올리면 각자 스타일이 다르고, 누군가는 세미콜론을 붙이고, 누군가는 var를 쓰고, 또 다른 사람은 let만 쓰기도 합니다.

 

이때 ESLint를 도입하면 팀의 ‘코딩 규칙’을 자동으로 통일할 수 있습니다.

즉, “사람이 스타일을 맞추는” 게 아니라 “도구가 알아서 맞춰주는” 환경이 되는 거죠.

 

✔️ 적용 팁

▸ 처음엔 ESLint의 기본 권장 규칙(eslint:recommended)으로 시작하세요.

너무 많은 규칙을 한 번에 추가하면 오히려 부담이 됩니다.
▸ 팀 내에서 자주 쓰는 프레임워크(예: React, Vue, TypeScript)에 맞는 플러그인만 추가하세요.
예: eslint-plugin-vue, @typescript-eslint/eslint-plugin
▸ Git 저장소에 .eslintignore 파일을 만들어 검사 제외 파일을 지정하세요.

예를 들어 node_modules/, dist/ 폴더는 보통 제외 대상입니다.
▸Prettier와 함께 쓰는 것도 추천합니다.

ESLint는 “문제 탐지와 규칙 위반”에, Prettier는 “자동 포맷팅”에 집중하는 역할로 잘 조화됩니다.

 

🔷 ESLint 자동화: 개발 흐름 속에 녹여내기

ESLint의 진짜 매력은 “자동화”에 있습니다.

한 번 설정해 두면, 매번 수동으로 검사하지 않아도 코드를 작성하거나 커밋하는 순간 자동으로 품질 체크가 이루어지죠.

 

✔️ VS Code 실시간 검사

▸ ESLint 확장을 설치하면 코드를 작성하는 즉시 오류·경고가 표시됩니다.
▸ 예를 들어, 미사용 변수에는 노란 밑줄, 오류에는 빨간 밑줄이 생깁니다.
▸ 저장할 때 자동으로 --fix 옵션을 적용하도록 설정도 가능합니다.

// VSCode settings.json 예시
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

이제 저장만 해도 들여쓰기, 따옴표, 세미콜론이 자동으로 정리됩니다.

 

✔️ Git Hooks 연동 (Pre-commit 검사)

코드 품질을 커밋 전에 자동 점검할 수도 있습니다.

이를 위해 husky나 lint-staged 패키지를 자주 사용합니다.

npm install --save-dev husky lint-staged

 

그리고 package.json에 다음을 추가합니다

{
  "lint-staged": {
    "*.{js,vue,ts}": "eslint --fix"
  },
  "scripts": {
    "prepare": "husky install"
  }
}

이제 누군가 규칙을 어긴 코드를 커밋하려 하면 ESLint가 자동으로 검사합니다.

문제가 있으면 커밋이 차단되므로, 코드 품질이 팀 전체에서 균일하게 유지됩니다.

 

🔷 자주 마주치는 ESLint 경고와 해결법

▸ no-unused-vars

"선언했지만 사용하지 않은 변수가 있습니다."
→ 해결: 불필요한 변수를 삭제하거나 실제 사용하도록 수정하세요.

 

▸ no-console

"console.log는 배포용 코드에 포함되지 않아야 합니다."
→ 해결: 개발 단계에서만 로그를 남기고, 배포 전에는 제거하세요.

 

▸ prefer-const

"재할당하지 않는 변수는 const로 선언하세요."
→ 해결: let 대신 const를 사용하여 불변성을 보장합니다.

 

▸ quotes

"문자열에는 작은따옴표(')를 사용해야 합니다."
→ 해결: "문자열" → '문자열'로 변경 (혹은 반대로 설정 가능)

 

▸ eqeqeq

"== 대신 ===을 사용하세요."
→ 해결: 느슨한 비교(==) 대신 엄격한 비교(===)로 타입 안정성을 확보합니다

 

🔷 실무에서의 적용 사례

✔️ 예시 1: 프론트엔드 프로젝트 (Vue.js)

Vue 프로젝트에서는 ESLint가 .vue 파일 내부의 <script> 블록까지 검사합니다.
예를 들어 다음 코드는 경고를 발생시킬 수 있습니다:

<script setup>
let count = 0;
function increment() {
  console.log(count); // no-console 경고
  count++;
}
</script>

 

ESLint 규칙에 따라 자동으로 고치면 이렇게 됩니다:

<script setup>
let count = 0;
function increment() {
  count += 1;
}
</script>

 

✔️ 예시 2: 백엔드(Node.js) 프로젝트

Node.js 서버 코드에서도 ESLint는 유용합니다.

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello')
  console.log('Request received') // 배포용 코드에서는 경고
})

app.listen(3000)

ESLint 규칙(no-console)을 통해 로그를 분리하도록 안내하거나, 배포 전에는 --fix로 자동 제거할 수 있습니다.

 

✔️ 예시 3: 팀 협업 워크플로우

▸ 모든 팀원이 ESLint를 설치한 상태로 개발
▸ npm run lint 명령을 CI/CD에서 자동 실행
▸ 빌드 전에 린트 통과 여부를 체크 → 실패 시 배포 중단

이 과정을 통해 “품질 기준을 자동으로 보장하는 개발 환경”이 완성됩니다.

 

반응형

 

 

※ 게시된 글 및 이미지 중 일부는 AI 도구의 도움을 받아 생성되거나 다듬어졌습니다.