TypeScript 7 & Next.js 16 환경에서 ESLint 대신 Biome(바이옴) 도입 후기

2026. 8. 15. 08:18

최근 프로젝트에서 TypeScript 7.0과 Next.js 16.3 버전 업그레이드를 진행하면서 기존 정적 분석 및 포맷팅 도구였던 ESLint 생태계와의 호환성 문제와 느린 실행 속도를 해결하기 위해 Rust 기반 초고속 툴체인인 Biome으로 도구를 교체했습니다.

그 과정에서 경험한 설정 노하우와 도입 후기를 공유합니다.

1. Biome을 도입하게 된 이유

최신 TypeScript 7 호환성: `@typescript-eslint` 패키지의 공식 지원을 기다리는 대신, 자체 파서로 TypeScript/TSX를 직접 분석하는 독립적인 도구가 필요했습니다.
통합 툴체인 (Linter + Formatter): ESLint와 Prettier를 조합하는 복잡한 플러그인 설정 없이 단일 바이너리로 린팅과 코드 포맷팅을 한 번에 처리할 수 있습니다.
압도적인 실행 속도: 100여 개가 넘는 프로젝트 파일의 정적 분석 및 포맷팅이 불과 30~40ms 만에 완료됩니다.

2. 프로젝트 설정 방법 (`biome.json`)

`npm install -D –save-exact @biomejs/biome` 설치 후 `npx biome init`을 실행하여 설정 파일을 생성합니다. Next.js 및 Tailwind CSS 프로젝트에 맞춘 실전 설정 팁입니다.

`biome.json` 핵심 설정

{
  "$schema": "https://biomejs.dev/schemas/2.5.6/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "linter": {
    "enabled": true,
    "rules": {
      "preset": "recommended",
      "a11y": {
        "recommended": false
      },
      "performance": {
        "noImgElement": "off"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "semicolons": "asNeeded"
    }
  },
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  }
}

주요 커스텀 옵션 포인트:

Tailwind CSS v4 지원: `css.parser.tailwindDirectives: true`를 추가하여 `@ theme`, `@ utility`, `@ apply` 지시어 파싱 오류를 방지했습니다.
Static Export 환경 예외 처리: Static Site Export(`output: ‘export’`)를 사용하는 경우 dynamic image optimization이 불가능하므로 `performance.noImgElement: “off”`로 설정하여 “ 태그 관련 경고를 예외 처리했습니다.
세미콜론 안 붙이기 (Semi-less): `javascript.formatter.semicolons: "asNeeded”`로 필요 시에만 세미콜론을 붙이도록 설정했습니다.