들어가며

프로젝트를 세팅할 때 어떤 프레임워크를 쓸 것인지, 버전은 어떤 것을 사용할 것인가를 정하는 것은 아주 중요한 사항입니다. 안정화되지 않은 환경에서 작업하는 것은 매우 위험한 일이니까요. 그래서 저희는 팀 프로젝트와 같은 내부 프로젝트를 진행할 때 새로운 환경이나 신규 버전에서 작업하기를 선호합니다. 규모가 작고 내부적으로만 사용하기 때문에 다양한 테스트가 가능하기 때문입니다.

이번 팀 프로젝트에서는 Next.js 15 환경에서 작업을 해보기로 했습니다. 늘 하던 것처럼 ESLint와 Prettier 조합으로 린팅과 포매팅 설정을 하려고 했는데요, 마침 요즘 주목받는 도구로 Biome이 있다는 이야기를 들었습니다. 내부 프로젝트인 만큼 이번 기회에 ESLint + Prettier 조합 대신 Biome을 한번 써보기로 했습니다.

이번 글에서는 Biome이 무엇인지, 어떻게 프로젝트에 적용했는지, 그리고 실제 사용해보니 어땠는지 공유해보고자 합니다.

---

Biome이란?

Biome은 JavaScript, TypeScript, JSX, JSON을 위한 올인원 개발 도구입니다. Rome 프로젝트의 후속작으로, 린팅과 포매팅을 단일 도구로 처리한다는 점이 가장 큰 특징입니다.

기존에는 ESLint + Prettier 조합으로 각각 린팅과 포매팅을 담당했다면, Biome은 이 둘을 하나로 통합했습니다. 공식 홈페이지에 따르면 Rust 기반으로 작성되어 ESLint + Prettier 대비 10-100배 빠른 성능을 제공한다고 하며, 제로 설정으로 복잡한 초기 설정 없이도 바로 사용할 수 있다는 것이 강점입니다.

Biome 설정하기

먼저 패키지를 설치합니다.

npm install --save-dev @biomejs/biome

그리고 초기 설정을 위해 아래 명령어를 입력합니다.

npx @biomejs/biome init

그럼 아래와 같은 biome.json 파일이 자동으로 생성됩니다.

{
  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

package.json에 실행을 위한 스크립트도 작성해줍니다.

// package.json
{
  "scripts": {
    "lint": "biome lint ./src",
    "lint:fix": "biome lint --apply ./src",
    "format": "biome format --write ./src",
    "check": "biome check --apply ./src"
  }
}

익스텐션 없이는 VS Code가 Biome을 formatter로 인식할 수 없어서 자동 포매팅이 작동하지 않습니다. CLI 명령어는 당연히 작동하겠지만, 개발 중 파일 저장 시 자동 포매팅을 원한다면 익스텐션을 설치해주세요.

# VS Code에서 Extensions 탭에서 "Biome" 검색 후 설치
# 또는 명령어로 설치
code --install-extension biomejs.biome

마지막으로 VS Code 설정만 업데이트해주면 Biome 사용 준비는 끝입니다.

// .vscode/settings.json
{
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit"
  }
}

Biome 사용 후기

Biome을 설치하고 사용해보니 몇 가지 장단점을 알 수 있었습니다.

장점

손쉬운 설치 및 설정
기존처럼 ESLint + Prettier 조합을 쓰기 위해서는 각각의 설정 파일과 충돌을 막기 위한 설정, 패키지 설치 등을 해야 했는데요. biome.json 파일 하나에 설정 값을 넣는 것만으로 모든 것이 처리되는 것이 무척 편하게 느껴졌습니다.

규칙 충돌 문제 해결
별다른 설정 없이도 ESLint와 Prettier를 함께 사용할 때 발생하던 규칙 충돌 문제(예: 세미콜론 사용, 들여쓰기 스타일 등)로부터 벗어날 수 있게 되었다는 것도 큰 장점이라고 느꼈습니다.

빠른 성능
Biome 개발사에서도 그렇고, 다른 분들의 사용기에서도 속도가 빠르다는 것을 장점으로 들었는데요. 프로젝트 규모가 작아서 그런지 실제 속도가 그렇게 빠른지는 사실 체감하지는 못했습니다. 다만 속도에 관한 여러 지표가 있으니, 규모가 큰 프로젝트에서는 빠른 속도를 체감할 수 있지 않을까 싶습니다.

단점

린트 규칙 부족
ESLint에 비해 린트 규칙 수가 적습니다. 특히 접근성 관련 규칙이 거의 없고, React Hook 관련 세밀한 규칙들이 부족합니다. 이러한 이유들로 원하는 만큼 린트 설정을 하지 못해서 조금 답답하고, 체크하지 못하는 로직들에 대한 불안함이 남게 되었습니다. 기존 프로젝트와 다른 린팅 기준 때문에 혼란스러운 부분이 생기기도 했습니다.

VS Code 익스텐션 의존성
협업하는 모든 개발자가 VS Code 익스텐션을 설치해야 하는 것이 조금 번거롭게 느껴졌습니다. 초기 세팅을 제가 했음에도, 익스텐션이 설치되어야만 formatOnSave가 동작하는지 몰라, 이에 대한 안내 없이 팀원들이 작업을 시작했는데요. 커밋을 할 때마다 husky에서 린트 오류가 잡혀서 한동안 꽤나 고생했던 적이 있습니다. 나중에야 익스텐션 때문인 걸 알게 되었죠.

부족한 레퍼런스
아직은 사용자가 많지 않기 때문에 레퍼런스가 부족합니다. 사용법이 쉽고 공식문서가 친절하여 설정이나 사용에 큰 어려움은 없었지만, 경험에서 우러나오는 궁금증을 해결하기에는 다소 아쉬운 부분이라고 생각합니다. 하지만 레퍼런스 부족 문제는 사용자가 늘어나면 해결될 것이라고 생각합니다.

---

마치며

이렇게 Biome 적용 후기를 작성해보았는데요. 계속 Biome을 쓸 것인가? 라고 물으면, 저는 아직은 ESLint와 Prettier를 사용하겠다는 것이 개인적인 생각입니다. Biome만의 장점이 분명히 있지만, 단점이 더 크게 느껴졌기 때문입니다. 오랫동안 사용해왔던 익숙한 환경과 다른 환경에서 작업하면서 오는 불편함이 생각보다 크게 다가왔기 때문입니다.

하지만 다양한 환경과 도구를 사용해보고자 한다면 시도해볼 가치는 있다고 생각합니다. 모든 면에서 완벽한 도구는 없으니까요. 특히 속도가 중요한 프로젝트의 경우 유용하지 않을까요? 프로젝트 상황과 팀 환경에 맞는 선택이 가장 중요한 것 같습니다.

오늘도 읽어주셔서 감사합니다. 🙇‍♀️

참고문헌

Biome 홈페이지