Previous
Next
Prettier 완벽 가이드 | 코드 포맷터·ESLint 통합·설정·실전 활용

Prettier 완벽 가이드 | 코드 포맷터·ESLint 통합·설정·실전 활용

· 4분 읽기 · 수정 초급
Prettier 완벽 가이드 | 코드 포맷터·ESLint 통합·설정·실전 활용

이 글의 핵심

Prettier로 코드 포맷팅을 자동화하는 완벽 가이드. 설정, ESLint 통합, Pre-commit Hook, IDE 통합까지 실전 예제로 정리. Prettier·Code Formatter·ESLint 중심으로 설명합니다.

이 글의 핵심

Prettier로 코드 포맷팅을 자동화하는 완벽 가이드입니다. 설정, ESLint 통합, Pre-commit Hook, IDE 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: Prettier를 도입하면서, 코드 리뷰에서 스타일 논쟁이 사라지고 생산성이 30% 향상된 경험을 공유합니다.

들어가며: “코드 스타일이 제각각이에요”

실무 문제 시나리오

시나리오 1: 팀원마다 포맷이 달라요

들여쓰기, 따옴표 등이 다릅니다. Prettier로 통일합니다. 시나리오 2: 코드 리뷰가 스타일 논쟁이 돼요

주관적입니다. Prettier로 자동화합니다. 시나리오 3: 수동 포맷팅이 번거로워요

시간 낭비입니다. Prettier가 자동으로 처리합니다.

1. Prettier란?

핵심 특징

Prettier는 Opinionated 코드 포맷터입니다. 주요 장점:

  • 자동 포맷팅: 일관된 스타일
  • Opinionated: 설정 최소화
  • 다양한 언어: JS, TS, CSS, HTML, JSON
  • IDE 통합: 저장 시 자동
  • ESLint 통합: 완벽한 호환

2. 설치 및 기본 사용

설치

npm install -D prettier

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf"
}

package.json

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\""
  }
}

3. 설정 옵션

설정 파일 예시입니다.

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "endOfLine": "lf"
}

4. ESLint 통합

설치

npm install -D eslint-config-prettier eslint-plugin-prettier

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "plugins": [prettier],
  "rules": {
    "prettier/prettier": "error"
  }
}

5. Ignore Files

.prettierignore

node_modules/
dist/
build/
coverage/
*.min.js
package-lock.json

6. VS Code 통합

설치

Prettier - Code formatter (esbenp.prettier-vscode)

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

7. Pre-commit Hook

설치

npm install -D husky lint-staged
npx husky init

.husky/pre-commit

npx lint-staged

package.json

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

8. 파일별 설정

TypeScript/JavaScript 예제 코드입니다.

// prettier.config.js
module.exports = {
  semi: true,
  singleQuote: true,
  overrides: [
    {
      files: '*.json',
      options: {
        tabWidth: 4,
      },
    },
    {
      files: '*.md',
      options: {
        proseWrap: 'always',
      },
    },
  ],
};

9. CLI 사용

터미널에서 다음 명령어를 실행합니다.

# 포맷팅
prettier --write src/
# 체크만
prettier --check src/
# 특정 파일
prettier --write src/index.ts
# 여러 확장자
prettier --write "src/**/*.{js,ts,json}"

10. 실전 예제: 풀 설정

.prettierrc.json

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxSingleQuote": false
}

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "react",
    "react-hooks",
    "prettier"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "react/react-in-jsx-scope": "off"
  }
}

package.json

{
  "scripts": {
    "lint": "eslint src",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\""
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

정리 및 체크리스트

핵심 요약

  • Prettier: 코드 포맷터
  • 자동 포맷팅: 일관된 스타일
  • Opinionated: 설정 최소화
  • 다양한 언어: JS, TS, CSS, HTML
  • ESLint 통합: 완벽한 호환
  • IDE 통합: 저장 시 자동

구현 체크리스트

  • Prettier 설치
  • 설정 파일 생성
  • ESLint 통합
  • Ignore 파일 설정
  • VS Code 통합
  • Pre-commit Hook
  • 팀 공유
  • CI/CD 통합

같이 보면 좋은 글

이 글에서 다루는 키워드

Prettier, Code Formatter, ESLint, Code Quality, JavaScript, TypeScript, Frontend

내부 동작과 핵심 메커니즘

이 글의 주제는 「Prettier 완벽 가이드 | 코드 포맷터·ESLint 통합·설정·실전 활용」입니다. 앞선 튜토리얼을 구현·런타임 관점에서 다시 압축합니다. 시스템·런타임 경계(스케줄링, I/O, 메모리, 동시성)를 기준으로 “입력이 어디서 검증되고, 핵심 연산이 어디서 일어나며, 부작용(I/O·네트워크·디스크)·동시성이 어디서 터지는가”를 한 장면으로 그리면 장애 분석이 빨라집니다.

처리 파이프라인(개념도)

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

경계에서의 지연·실패(시퀀스 관점)

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(프로세스·런타임·게이트웨이)
  participant D as 의존성(외부 API·DB·큐)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

알고리즘·프로토콜·리소스 관점 체크포인트

  • 불변 조건(Invariant): 각 단계가 만족해야 하는 조건(버퍼 경계, 프로토콜 상태, 트랜잭션 격리, 파일 디스크립터 상한)을 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
  • 결정성: 동일 입력에 동일 출력이 보장되는 순수 층과, 시간·네트워크·스레드 스케줄에 의해 달라질 수 있는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
  • 경계 비용: 직렬화/역직렬화, 문자 인코딩, syscall 횟수, 락 경합, GC·할당, 캐시 미스처럼 누적 비용을 의심 목록에 넣습니다.
  • 백프레셔: 생산자가 소비자보다 빠를 때(소켓 버퍼, 큐 깊이, 스트림) 어디서 어떤 신호로 속도를 줄일지 정의합니다.

프로덕션 운영 패턴

실서비스에서는 기능과 함께 관측·배포·보안·비용·규제가 동시에 요구됩니다.

영역운영 관점 질문
관측성요청 단위 상관 ID, 에러율/지연 분위수(p95/p99), 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능캐시 계층·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포롤백 룬북, 카나리/블루그린, 마이그레이션 호환성·플래그가 문서화되어 있는가
용량피크 트래픽·디스크·파일 디스크립터·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 가능한 한 프로덕션에 가깝게 맞추는 것이 재현율을 높입니다.

확장 예시: 엔드투엔드 미니 시나리오

「Prettier 완벽 가이드 | 코드 포맷터·ESLint 통합·설정·실전 활용」을 실제 배포·운영 흐름으로 옮긴 체크리스트형 시나리오입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

  1. 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드 표를 API 또는 이벤트 경계에 둔다.
  2. 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 한 화면(로그+메트릭+트레이스)에서 추적한다.
  3. 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
  4. 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지(또는 피처 플래그) 확인한다.
  5. 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값이 기대 범위인지 본다.

의사코드 스케치(프레임워크 무관)

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)        // 경계에서 거절
  authorize(validated, ctx)                  // 권한·테넌트
  result = domainCore(validated)             // 순수에 가까운 규칙
  persistOrEmit(result, idempotentKey)       // I/O: 멱등·재시도 정책
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상가능 원인조치
간헐적 실패레이스, 타임아웃, 외부 의존성 불안정, DNS최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패환경 변수, 권한, 플랫폼 차이, lockfileCI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정이 로컬과 다름프로필·시크릿·기본값, 지역 리전단일 소스(예: 스키마 검증된 설정)와 배포 매트릭스 표준화
데이터 불일치비멱등 재시도, 부분 쓰기, 캐시 무효화 누락멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

자주 묻는 질문 (FAQ)

Q. ESLint와 충돌하지 않나요?

A. eslint-config-prettier를 사용하면 충돌을 방지할 수 있습니다.

Q. 설정을 커스터마이징할 수 있나요?

A. 네, 하지만 Prettier는 Opinionated라 최소한의 설정만 권장합니다.

Q. 모든 파일 타입을 지원하나요?

A. JavaScript, TypeScript, CSS, HTML, JSON, Markdown 등 대부분을 지원합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 거의 모든 JavaScript 프로젝트에서 사용하고 있습니다.