정적 분석 및 린팅 도구 ESLint Prettier

ESLint는 자바스크립트 및 타입스크립트와 같은 언어의 코드를 분석하여 잠재적인 오류나 문제점, 특정 스타일 가이드 위반 사항을 찾아내는 정적 분석 도구이다. 이 도구의 핵심 개념은 소스 코드를 실행하지 않고도 코드의 구조와 패턴을 검사하여 일관성을 유지하고 버그를 사전에 방지하는 것이다. ESLint는 추상 구문 트리를 기반으로 동작하며, 사용자가 정의하거나 커뮤니티에서 제공하는 규칙 집합에 따라 코드를 평가한다.

동작 원리는 크게 세 단계로 나눌 수 있다. 첫째, 파싱 단계에서 ESLint는 소스 코드를 읽어 ECMAScript 파서를 사용해 AST로 변환한다. 둘째, 트래버싱 단계에서 이 AST를 순회하며, 활성화된 각 린트 규칙에 코드 조각이 부합하는지 확인한다. 셋째, 보고 단계에서 규칙 위반이 발견되면, 해당 위치, 규칙 이름, 심각도(에러/경고)와 함께 메시지를 출력한다. 이 과정은 구성 파일(예: .eslintrc.js)에 정의된 설정을 바탕으로 이루어진다.

ESLint의 설계 철학은 완전한 구성 가능성에 있다. 개발자는 프로젝트의 필요에 따라 규칙을 켜거나 끄고, 심각도를 조정하며, 심지어 커스텀 규칙을 직접 작성하여 적용할 수 있다. 이는 다양한 코딩 컨벤션과 프로젝트 요구사항을 유연하게 수용할 수 있게 한다. 또한, --fix 명령어 옵션을 사용하면 일부 규칙 위반 사항을 자동으로 수정할 수 있어 개발자의 생산성을 높인다.

ESLint는 JavaScript 및 JSX, TypeScript와 같은 관련 언어의 코드를 분석하여 문제를 찾고 일관된 코딩 스타일을 강제하는 데 사용되는 도구이다. 그 핵심 기능은 구성 가능한 규칙 세트를 기반으로 코드를 검사하고, 발견된 문제를 보고하거나 자동으로 수정하는 것이다.

주요 구성 요소는 다음과 같다.

* 파서(Parser): ESLint는 기본적으로 ECMAScript 표준 문법을 이해하는 자체 파서를 사용하지만, Babel 파서와 같은 대체 파서를 사용하여 실험적 구문을 분석할 수 있다.

* 규칙(Rules): 코드에서 검사할 조건을 정의하는 핵심 요소이다. 각 규칙은 "error", "warn", "off" 세 가지 중 하나의 상태로 설정할 수 있다. 규칙은 구문 오류, 안티 패턴 사용, 스타일 가이드 위반 등 다양한 범주를 포괄한다.

* 구성 파일(Configuration File): 프로젝트에서 사용할 규칙, 파서, 환경 설정 등을 정의하는 파일이다. .eslintrc.js, .eslintrc.json, eslint.config.js(새로운 플랫 구성) 또는 package.json의 eslintConfig 필드를 통해 설정할 수 있다.

* 플러그인(Plugins): ESLint의 기능을 확장하는 서드파티 패키지이다. React, Vue.js, Jest와 같은 특정 프레임워크나 라이브러리에 대한 규칙 세트를 제공하거나, 새로운 규칙을 추가한다.

* 공유 구성(Shareable Configs): 미리 정의된 규칙 세트를 패키지로 배포하여 여러 프로젝트에서 일관된 구성을 쉽게 재사용할 수 있게 한다. eslint:recommended 같은 기본 제공 구성이나 eslint-config-airbnb 같은 인기 있는 서드파티 구성이 여기에 속한다.

ESLint는 명령줄 인터페이스(CLI)를 통해 실행되며, 발견된 문제를 목록으로 출력하거나 자동 수정 플래그(--fix)를 사용하여 일부 규칙 위반을 바로잡을 수 있다. 또한 대부분의 현대 코드 에디터와 통합되어 개발 중 실시간으로 피드백을 제공한다.

Prettier는 일관된 코드 스타일을 유지하기 위한 코드 포맷터이다. 이 도구는 코드의 의미나 구조를 분석하는 린터와 달리, 순전히 코드의 외관, 즉 들여쓰기, 따옴표 사용, 줄 바꿈, 최대 줄 길이 등 서식에만 집중한다. 개발자가 코드의 논리적 오류를 찾는 대신 스타일 논쟁에서 벗어나도록 설계되었다. Prettier는 파싱 가능한 코드를 받아들여, 자신의 규칙에 따라 다시 쓰고, 일관된 스타일로 출력한다.

Prettier의 핵심 역할은 '의견을 가진' 코드 포맷터로 동작하는 것이다. 대부분의 포맷팅 결정을 개발자에게 위임하는 대신, Prettier는 강력한 기본 규칙 세트를 가지고 있어 사용자의 선호도에 관계없이 일관된 결과를 보장한다. 예를 들어, 자바스크립트에서 문자열을 감쌀 때 작은따옴표를 사용할지 큰따옴표를 사용할지, 객체 리터럴의 마지막 속성 뒤에 쉼표를 넣을지 여부 등을 Prettier가 결정한다. 이로 인해 팀 내에서 코드 스타일 가이드를 길게 논의하거나, 코드 리뷰에서 사소한 포맷팅 문제를 지적하는 시간을 크게 줄일 수 있다.

이 도구는 다양한 언어와 파일 형식을 지원한다. 주요 지원 범위는 다음과 같다.

Prettier의 동작은 구성 가능하지만, 그 철학은 가능한 한 적은 설정을 유지하는 데 있다. 포맷팅 규칙을 프로젝트의 .prettierrc 설정 파일에서 재정의할 수 있지만, 공식 문서는 기본값을 따르는 것을 권장한다. 이 접근 방식은 모든 프로젝트가 동일한 스타일을 따르도록 하여, 컨텍스트 전환 비용을 줄이고 코드베이스 전반에 걸쳐 균일한 가독성을 제공한다.

Prettier는 기본적으로 일관된 코드 스타일을 강제하는 의견 없는 포맷터로 설계되었다. 이는 대부분의 포맷팅 결정을 도구 자체에 위임하여 개발자 간의 논쟁을 줄이는 철학을 반영한다. 따라서 공식 문서에서는 가능한 한 기본 설정을 사용할 것을 권장한다. 그러나 특정 프로젝트나 팀의 요구사항에 따라 일부 규칙을 조정할 수 있는 유연성을 제공한다.

주요 설정 방법은 다음과 같다.

* 설정 파일: 프로젝트 루트에 .prettierrc (JSON, YAML, JS 형식), .prettierrc.json, prettier.config.js 파일을 생성하여 옵션을 정의한다.

* package.json 내 설정: package.json 파일에 "prettier" 키를 추가하여 옵션을 명시할 수 있다.

* 에디터 설정: VS Code 등의 에디터에서 기본 포맷터를 Prettier로 설정하고, 사용자 또는 작업공간(Workspace) 설정에서 옵션을 오버라이드할 수 있다.

일반적으로 커스터마이징되는 옵션은 다음과 같다.

설정 파일 예시 (.prettierrc.json):

```json

{

"semi": false,

"singleQuote": true,

"tabWidth": 2,

"trailingComma": "es5"

}

```

또한, .prettierignore 파일을 생성하여 포맷팅에서 제외할 파일이나 디렉토리를 지정할 수 있다. 이는 node_modules, 빌드 출력물, 특정 설정 파일 등을 무시하는 데 유용하다. 설정의 우선순위는 일반적으로 더 구체적인 설정 파일이 더 넓은 범위의 설정보다 우선한다[1].

Node.js와 npm이 설치된 환경에서 프로젝트에 ESLint와 Prettier를 통합하는 기본적인 절차는 다음과 같다.

먼저, 프로젝트 루트 디렉터리에서 필요한 패키지를 개발 의존성으로 설치한다. ESLint는 코드 검사, Prettier는 코드 포맷팅을 담당하며, 두 도구가 충돌하지 않도록 하는 eslint-config-prettier 패키지도 함께 설치하는 것이 일반적이다.

```bash

npm install --save-dev eslint prettier eslint-config-prettier

```

설치 후, 프로젝트 루트에 구성 파일을 생성한다. ESLint 설정 파일 .eslintrc.js (또는 .eslintrc.json, .eslintrc)를 만들고, 기본적인 규칙을 정의한다. 초기 설정으로는 널리 사용되는 공식 규칙 세트인 eslint:recommended를 확장하는 것이 일반적이다. Prettier와의 통합을 위해 eslint-config-prettier를 확장하여 Prettier의 포맷팅 규칙과 충돌하는 ESLint 규칙을 비활성화한다.

```javascript

// .eslintrc.js 예시

module.exports = {

extends: ['eslint:recommended', 'prettier'],

env: {

node: true,

es2021: true,

},

parserOptions: {

ecmaVersion: 'latest',

},

};

```

Prettier의 설정 파일 .prettierrc는 프로젝트의 코드 스타일을 정의한다. 파일 확장자는 .json, .js, .yml 등을 사용할 수 있다. 가장 간단한 형태는 빈 객체 {}로, Prettier의 기본 포맷팅 규칙을 따르게 된다. 팀의 코딩 컨벤션에 따라 들여쓰기 크기나 세미콜론 사용 여부 등을 명시적으로 설정할 수 있다.

```json

// .prettierrc 예시

{

"semi": true,

"tabWidth": 2,

"singleQuote": true

}

```

마지막으로, package.json 파일의 scripts 항목에 린팅과 포맷팅 명령어를 추가하여 편리하게 실행할 수 있도록 한다. 이 설정을 통해 npm run lint 명령으로 코드 검사를, npm run format 명령으로 전체 프로젝트 파일의 포맷팅을 실행할 수 있다.

```json

// package.json scripts 항목 예시

"scripts": {

"lint": "eslint .",

"format": "prettier --write ."

}

```

협업 프로젝트에서 ESLint와 Prettier를 효과적으로 사용하기 위해서는 모든 구성원이 동일한 규칙과 설정을 공유해야 합니다. 이를 위해 프로젝트 루트 디렉터리에 설정 파일을 명시적으로 관리하고, 버전 관리 시스템에 포함시키는 것이 필수적입니다. 일반적으로 .eslintrc.js(또는 .eslintrc.json), .prettierrc(또는 prettier.config.js), 그리고 .eslintignore, .prettierignore 파일을 생성하여 프로젝트에 맞는 규칙과 예외를 정의합니다.

프로젝트 구성의 핵심은 의존성과 설정의 명확한 정의입니다. package.json 파일에 ESLint와 Prettier, 그리고 필요한 플러그인들을 devDependencies로 명시합니다. 이를 통해 모든 개발자가 npm install 또는 yarn install 명령어 하나로 동일한 개발 환경을 구성할 수 있습니다. 또한, scripts 항목에 "lint": "eslint ."와 "format": "prettier --write ." 같은 명령어를 등록하여 일관된 실행 방법을 제공합니다.

린트와 포맷팅을 자동화하는 도구를 설정하는 것도 협업 효율성을 높입니다. Git의 pre-commit hook을 활용하여 커밋 전에 자동으로 코드를 검사하고 포맷팅할 수 있습니다. 이를 위해 lint-staged와 husky 패키지를 사용하는 것이 일반적인 모범 사례입니다. 이 설정은 코드베이스에 일관성을 강제하고, 리뷰 과정에서 스타일 논쟁을 줄이는 데 기여합니다. 모든 설정 파일은 프로젝트 저장소에 커밋되어야 하며, 프로젝트 온보딩 문서에 사용 방법이 명시되어야 합니다.

ESLint의 규칙 설정은 .eslintrc 구성 파일(또는 package.json의 eslintConfig 속성)을 통해 관리됩니다. 이 파일은 프로젝트에 적용할 린팅 규칙을 정의하는 핵심입니다. 구성은 JSON, YAML, JavaScript 형식으로 작성할 수 있으며, 확장 가능한 구조를 가지고 있습니다.

규칙은 크게 세 가지 상태로 설정할 수 있습니다. "off"(또는 0)는 규칙을 비활성화하고, "warn"(또는 1)은 경고를 발생시키며, "error"(또는 2)는 오류를 발생시켜 종종 CI/CD 과정을 실패하게 만듭니다. 각 규칙은 추가적인 옵션 배열을 받을 수 있습니다. 예를 들어, 들여쓰기 크기나 최대 줄 길이와 같은 세부 사항을 조정할 수 있습니다.

설정은 미리 정의된 구성을 확장(extends)하거나 특정 파일을 무시(ignorePatterns)하는 방식으로 적용됩니다. 널리 사용되는 스타일 가이드인 Airbnb JavaScript 스타일 가이드나 Google 스타일 가이드를 확장하여 시작한 후, 프로젝트 요구사항에 맞게 개별 규칙을 재정의(rules)하는 것이 일반적인 접근 방식입니다. 또한, TypeScript, React, Vue.js와 같은 특정 환경이나 프레임워크를 위한 플러그인의 규칙을 별도로 설정할 수 있습니다.

Prettier는 일관된 코드 스타일을 유지하기 위해 다양한 포맷팅 옵션을 제공한다. 이러한 옵션들은 .prettierrc, prettier.config.js 파일이나 package.json의 prettier 필드를 통해 설정할 수 있다. 주요 옵션은 들여쓰기, 따옴표 사용, 세미콜론, 줄 길이, 객체와 배열의 괄호 처리 방식 등을 제어한다.

일반적인 포맷팅 옵션은 다음과 같다.

이 외에도 파일 종류에 따른 파서 지정(parser 옵션), JSX 문법 처리 방식(jsxSingleQuote, bracketSameLine), 주석 포맷팅(comment 관련 옵션) 등 더 세부적인 설정이 가능하다. 설정 파일 예시는 다음과 같다.

```json

{

"semi": false,

"singleQuote": true,

"tabWidth": 2,

"trailingComma": "all"

}

```

이러한 옵션들은 프로젝트 팀의 코딩 컨벤션에 맞춰 조정된다. 설정을 공유하기 위해 .prettierrc 파일을 프로젝트 루트에 배치하거나, "prettier" 키를 확장하여 공유 설정 패키지를 참조하는 것이 일반적이다[3].

ESLint의 기능은 다양한 플러그인을 통해 확장될 수 있다. 특정 프레임워크, 라이브러리, 테스팅 도구, 또는 코딩 스타일을 위한 규칙 세트를 제공하는 플러그인들이 널리 사용된다. 이러한 플러그인을 프로젝트에 추가함으로써, 개발 팀은 해당 기술 스택에 특화된 일관된 코드 품질 기준을 쉽게 적용할 수 있다.

다음은 특히 React, TypeScript, Vue.js 등 현대적인 프론트엔드 개발 환경에서 자주 사용되는 플러그인들이다.

이 외에도 특정 코드 스타일을 강제하는 eslint-plugin-sonarjs[5], 보안 취약점을 검사하는 eslint-plugin-security 등 수많은 커뮤니티 플러그인이 존재한다. 프로젝트에 필요한 플러그인을 선택하여 설치한 후, ESLint 설정 파일(.eslintrc.js 등)의 plugins 배열에 등록하고, rules 섹션에서 필요한 규칙을 활성화하면 된다.

ESLint와 Prettier를 에디터에 통합하면 코드를 저장할 때나 작성 중에 실시간으로 린팅과 포맷팅을 적용할 수 있어 개발 효율성을 크게 향상시킨다. 대부분의 현대적인 코드 에디터와 통합 개발 환경(IDE)는 공식 또는 커뮤니티 확장 기능을 통해 이 두 도구를 지원한다.

통합 설정의 핵심은 저장 시 자동 포맷팅을 활성화하는 것이다. Visual Studio Code에서는 settings.json 파일에 "editor.formatOnSave": true와 "editor.codeActionsOnSave": { "source.fixAll.eslint": true } 규칙을 추가하여 저장 시 Prettier로 코드를 포맷하고 ESLint 오류를 자동으로 수정하도록 구성할 수 있다. 두 도구의 충돌을 방지하기 위해 eslint-config-prettier 같은 구성 패키지를 사용하여 ESLint의 포맷팅 관련 규칙을 비활성화하는 것이 일반적이다.

에디터 통합은 협업 시 일관성을 유지하는 데 필수적이다. 프로젝트 루트에 .eslintrc와 .prettierrc 설정 파일을 공유하면, 모든 팀원이 동일한 규칙을 에디터 수준에서 적용받을 수 있다. 이는 코드 리뷰 부담을 줄이고, 포맷팅 논의를 불필요하게 만든다. 또한, ESLint와 Prettier 확장 기능은 일반적으로 프로젝트의 로컬 node_modules에 설치된 도구 버전을 우선 사용하므로, 프로젝트별 버전 차이로 인한 문제도 방지한다.