웹 개발을 위한 툴체인 Biome v2 Beta 출시

저는 eslint, prettier 수년간 사용하면서 성능에 대한 이슈가 그리 크게 느껴지지는 않았는데요. 지난 몇 년간 모노리포 환경에서 다수의 프로젝트를 관리하는 코드베이스에 복잡도, DevOps 와 관련하여 반복적인 마이너스 비용이 거슬리기 시작했습니다.

또한 eslint 와 typescript, 프로젝트마다의 설정등에 피로감을 절실히 느끼기 시작했구요.

때마침 babel 만들었던 친구가 Biome 만들꺼야 선언하면서 기대를 많이 하고 있었는데 벌써 v2.0 이 출시가 임박했네요.
사이드 프로젝트에서는 과감하게 Biome 을 사용하고 있으나 VSCode 익스텐션과 Tailwind 호환성이 부족하여 협업하는 프로젝트에서는 사용하지 못하는 아쉬움이 있기는 합니다.

2.0 에서는 어떤 변화가 있을 지 기대됩니다.

Biome 2.0 베타 주요 기능 정리

1️⃣ GritQL 기반의 사용자 지정 린트 규칙 작성

기존 Biome에서는 자체적인 방식으로 린트 규칙을 작성해야 했지만, 2.0에서는 GritQL이라는 새로운 쿼리 언어를 도입했습니다.

• SQL 스타일의 쿼리 문법을 사용하여 AST 노드를 검색하고 규칙을 정의할 수 있습니다.

• 예제: SELECT FROM FunctionDeclaration WHERE name = "console.log" 와 같이 특정 패턴을 탐색하고 린트 규칙을 만들 수 있음.

• 기존 방식보다 더 쉽고 강력한 커스텀 린트 기능 제공.

2️⃣ 도메인(Domains) 기반 린트 규칙 그룹화

Biome 2.0에서는 린트 규칙을 기술 스택 및 프레임워크 기반으로 자동 필터링할 수 있습니다.

• 예를 들어, React 프로젝트라면 @biomejs/domains-react 도메인을 적용하여 React 관련 규칙만 활성화 가능.

• 불필요한 규칙을 비활성화해 프로젝트 맞춤형 린팅 가능.

3️⃣ 다중 파일 분석 지원 (Multi-file Analysis)

이제 린트 규칙이 단일 파일뿐만 아니라 여러 파일을 동시에 분석할 수 있습니다.

• 예: noImportCycles 규칙은 모듈 간 순환 의존성을 감지하여 경고할 수 있음.

• 기존 도구보다 더 깊이 있는 코드 분석 가능.

4️⃣ noFloatingPromises: 타입을 인식하는 첫 번째 린트 규칙

기존 Biome은 타입 정보를 사용하지 않았지만, noFloatingPromises 규칙을 통해 타입을 활용한 린트가 처음 도입되었습니다.

• await 없이 실행된 프로미스를 감지하여 비동기 코드의 실수를 방지.

• 향후 더 많은 타입 인식 린트 규칙 추가 예정.

5️⃣ Import Organizer 개편

기존의 Import 정리 기능이 대폭 개선되었습니다.

• 불필요한 import 제거, 그룹화, 정렬을 자동으로 수행.

• 프로젝트 스타일에 맞춰 더 정돈된 import 구조 유지 가능.

6️⃣ Biome Assist: 진단 없이 코드 개선 (Assists)

새로운 Assists 기능을 통해 특정 코드를 수정하는 제안을 받을 수 있습니다.

• 진단(diagnostics) 없이도 코드를 개선하는 자동 수정 기능 제공.

• 예제: 객체 키 정렬, 특정 스타일 적용 등.

7️⃣ 향상된 규칙 무시 기능 (Suppressions)

기존 // biome-ignore보다 더 강력한 무시 옵션이 제공됩니다.

• // biome-ignore-all → 파일 전체에서 특정 규칙 무시 가능.

• // biome-ignore-start ~ // biome-ignore-end → 범위 지정하여 특정 규칙 무시 가능.

8️⃣ HTML 포매터 (실험적 기능)

Biome에서 처음으로 HTML 코드에 대한 자동 포매팅 기능이 추가되었습니다.

• 아직 실험적 단계이지만, Prettier 같은 도구 없이 HTML도 정리 가능.

• 향후 더 많은 개선이 예상됨.

베타 버전 설치 방법:

npm install --save-dev --save-exact @biomejs/biome@beta
npx @biomejs/biome@beta migrate

원문: https://biomejs.dev/blog/biome-v2-0-beta/

내용과 별개로 이 기사를 작성하면서 GritQL 이라는 것을 처음 알게되어 다음에 GritQL 을 한번 들여다 봐야겠네요.

GritQL은 대규모 코드베이스에서 반복적인 패턴을 찾아 자동으로 수정할 때 유용한 도구,

기존 정규표현식(Regex)보다 훨씬 정교하게 구문 트리(AST) 레벨에서 코드를 분석해, 함수 호출 방식 변경, API 마이그레이션, 코딩 컨벤션 통일 등 복잡한 리팩토링 작업을 단 몇 분 안에 처리할 수 있네요.

개발자에게 필요한 이유

1. "수작업 리팩토링은 이제 그만"

   • 예: 프로젝트 전체의 var → const/let 변경, console.log → 커스텀 로거 교체 등 반복적인 수정을 자동화해 human error를 줄여주고

2. "버그/취약점 사전 차단"

   • == 대신 === 사용 여부, 보안 취약한 메서드(e.g., eval()) 탐지 등 정적 분석과 결합해 위험 요소를 사전에 방지.

3. "팀 코딩 표준 강제 적용"

   • 화살표 함수 통일, 컴포넌트 네이밍 규칙(e.g., Button → PrimaryButton) 등 컨벤션 위반 사항을 자동으로 교정.

4. "의존성 마이그레이션 가속화"

   • 예: 레거시 라이브러리(moment.js) 호출 코드를 최신 대안(date-fns)으로 일괄 변환.