Biome 이모저모

들어가기

출근 길에 유튜브를 보면서 꽤나 흥미로운 영상을 하나 보게 되었다.

바로 Biome에 대한 영상이었는데, 기존 Javascript 기반 프로젝트의 코드 품질을 담당하는 ESLint와, Prettier의 설정을 한번에 처리해주고, Lint의 처리시간을 35배를 단축 시킨다는 내용이었다.

얼마나 빠르다길래 그런건지 한 번 찍먹해보기로 했다.

 

 

그 전에 간단하게 ESLint와 Prettier에 대해 정리해보자

ESLint

JavaScript와 TypeScript 코드를 위한 정적 코드 분석 도구이다.

ESLint를 통해 코드를 실제로 실행하지 않고 코드의 문법, 스타일, 오류 등을 점검할 수 있다.

ESLint 사용을 통해 코드 품질을 유지할 수 있고, 프로젝트 특성에 맞게 설정할 수 있도록 확장성도 넓어서 다양한 라이브러리에 맞춰서 세팅이 가능하다.

게다가 어느정도의 오류를 미리 방지할 수 있기 때문에 Javscript를 사용하는 개발자들에게는 필수로 자리 잡았다.

 

Prettier

코드 포매터로서, 코드의 형태를 정리해 주는 도구

Prettier를 통해 코딩 스타일 자동화, 개발자 간 충돌 감소로 협업에 매우 용이하다.

 

 

지러한 장점들이 있지만 프로젝트마다 각각 설정을 해줘야해서 두 번의 작업이 생긴다는 단점이 존재했다.

그리고 특정 플러그인을 사용할 경우에는 린팅 속도가 느려지는 문제도 종종 있곤 한다.

 

 

그렇게... biome이 등장하게 되는데...

Biome이란?

Biome is a fast formatter for JavaScript, TypeScript, JSX, TSX, JSON, CSS and GraphQL that scores 97% compatibility with Prettier, saving CI and developer time.

 

Biome 공식 문서에 소개하고 있는 문구이다.

요약하자면 기존 포매터와 대부분 호환이 가능한 빠른 포매터 및 린터.

 

여담을 들어보면 Biome은 사실 최근에 만들어진 포매터가 아니라고 한다. Prettier에서 성능 개선 및 선의의 경쟁을 위해 상금을 걸고 Prettier와 비슷한 포매터를 만드는 대회를 열었는데 이 때 우승을 차지한 Rome이 회사 사정이 어려워져서 접었다가 다시 만들어서 내놓은데 Biome이라고 한다.

 

Biome에 대한 장점은 다음과 같은게 있다고 한다.

• 빠름: Rust로 구축되어 처리속도가 매우 빠름
• 간단함: 시작하는 데 별도의 설정이 필요하지 않고 마이그레이션도 굉장히 쉽다.
• 확장성: 크기에 상관없이 모든 코드베이스를 처리할 수 있도록 설계되었고, 기존 포매터와의 높은 호환성을 가짐
• 최적화: 내부 통합이 잘 되어 있어 이전 작업을 재사용할 수 있다.

 

이제 공식문서를 따라 기존에 ESLint와 Prettier를 사용한 프로젝트를 마이그레이션 하면서 성능 차이가 얼마나 있는지 비교해보자

∴내가 체크해보는 프로젝트의 코드 라인 수는 대략 23000라인 정도 된다.

 

찍먹

 

설치

yarn add --dev --exact @biomejs/biome

 

프로젝트에 biome 주입

yarn biome init

 

 

이렇게하면 프로젝트안에 아래와 같은 내용의 biome.json 파일이 생성이 된다.

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": { "ignoreUnknown": false, "ignore": [] },
  "formatter": { "enabled": true, "indentStyle": "tab" },
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": { "recommended": true }
  },
  "javascript": { "formatter": { "quoteStyle": "double" } }
}

 

 

 

마이그레이션

하지만 이대로는 내가 기존에 프로젝트에 유지하던 포맷이 아니므로 기존 포맷과 동일하게 마이그레이션 해보자

이 또한 공식문서에 친절하게 나와있고 마이그레이션도 매우 간단하다.

 

yarn biome migrate eslint --write
yarn biome migrate prettier --write

 

이렇게하면 biome.json 파일에 내가 기존에 사용하던 Lint와 prettier 포매터가 주입이 된다.

 

 

 

성능 비교

기존

기존에 사용하던 lint를 체크해보자

약 10초의 시간이 걸렸다.

 

동일하게 prettier format 같은 경우는 2.3초의 시간이 걸렸다.

 

 

Biome

이제 Biome에서 체크해보자

....?

너무 빠른데,,?

 

그렇다면 Prettier의 성능은....

 

1.5초로 감소 되긴 했다.

 

 

정리

기준(s)	기존	Biome
ESLint	9.95	0.58
Prettier	2.3	1.51

 

 

Prettier는 여러번 시도했을 때 0 -0.8초 정도 빠른 반면에 lint 같은 경우는 정말 눈에 띄게 차이가 났다.

기존 git CI가 느린데 Ci 내에서 체크를 했을 때도 prettier는 비슷했던 반면에 lint 같은 경우는

11초 -> 0.51초로 엄청나게 차이가 났다..

 

성능적에서는 엄청 매력적인 것 같다..

그런데 내 프로젝트에는 테스트코드와 Lint가 병렬로 돌도록 세팅되어 있기 때문에 Lint가 빨라져도 테스트코드가 15초가 넘게 걸리기 때문에 Ci 내에선 큰 이점은 없어서 도입은 아직 고려중이다.

 

어떻게 하면 Biome을 도입하면서 개선할 수 있을지 고민해봐야겠다.