Biome에 대해 아세요?

들어가며

개발자라면 살아가면서 무수히 많은 프로젝트를 하게 됩니다. 다른 말로 하면, 수없이 많은 개발 환경을 세팅해 본다는 뜻이죠. 신기하게도, 거의 모든 프로젝트의 개발 환경 세팅은 조금씩 다릅니다. 팀의 개발 문화, 프로젝트의 성격, 규모 등 여러 요소에 따라 세팅해야 할 디테일이 달라지기 때문입니다. 이 글을 보고 계신 개발자분들은 개발 환경을 세팅할 때 얼마나 많은 고통을 겪고 계신가요?

 

또 Lint 설정이야..?

대부분의 프런트엔드 개발자들은 lint 설정을 위해 ESLint와 Prettier 조합을 선택합니다. 업계의 표준처럼 여겨지는 이 조합으로 개발 환경을 세팅하는 일은 얼핏 보기에는 그리 어려워 보이지 않습니다. "단순히 설치하고 설정만 적용하면 되는 거 아닌가?"라고 생각할 수도 있죠. 하지만 이미 개발 환경 세팅을 몇 차례 경험해 본 사람들은 고개를 절레절레할 겁니다.

 

개발 환경을 세팅하다 보면 마음속 깊은 곳에서 여러 감정이 생겨나게 되는데, 보통은 귀찮음, 짜증, 막막함 등 부정적 감정과 마주합니다. 왜냐하면 ESLint와 Prettier의 설정이 각각 따로 존재해 관련 설정들을 전부 맞춰주거나 기존의 세팅을 긁어와야 하고, 추가로 플러그인을 설치해야 하며, 또 각각의 버전이 다르면 문제가 발생할 수 있기 때문에 버전도 맞춰야 합니다. 게다가 설정이 충돌하거나 예상치 못한 문제가 발생하면 또 해결해야 하고요.

 

물론, 이런 문제들이 있다고 해서 Lint의 중요성을 무시하거나, Lint가 불필요하다고 말하는 것은 아닙니다. 혼자 개발하는 입장에서도 코드의 변경(diff)을 효과적으로 확인하기 위해 Lint는 거의 필수적입니다.

 

하지만 한 번쯤 다시 생각해 볼 필요가 있지 않을까요? 우리가 정말 원했던 것은 무엇일까요? 우리는 그저 코드 포맷팅을 자동으로 적용하고, Lint 체크를 원했던 것뿐입니다. 그런데 왜 이렇게 번거로운 과정이 필요한 걸까요?

 

Biome 한 번 잡숴봐

위와 같은 고민과 문제를 한 번에 해결해 줄 수 있는 친구가 마침내 등장했는데요, 바로 Biome입니다.

 

Biome은 통합 툴체인입니다. 즉, ESLint와 Prettier가 합쳐진 친구라고 생각하시면 됩니다. "통합 툴체인..? 그래서 뭐..?"라는 생각이 드실 수 있겠죠. 다만 이 Biome은 eslint와 관련된 무수히 많은 플러그인 패키지들도, prettier도 필요가 없습니다. 그냥 Biome만 설치하고 init 해주면 됩니다. Biome 외에 어떠한 것도 설치할 필요가 없고, 심지어 “zero-config”로 사용할 수 있습니다. 기본 설정만으로도 충분하기 때문이죠. (물론, 설정을 원하면 할 수 있습니다)

 

어째서 기본 설정만으로 충분하냐고요?

Biome은 ESLint, TypeScript ESLint 및 기타 소스에서 가져온 총 304개의 린팅 규칙을 제공하는 데다가, 최신 JavaScript 및 TypeScript 표준과 모범 사례를 반영하고 있기 때문입니다.

 

물론, 단순히 설정이 편하기만 해서는 안 되겠죠. Biome은 속도까지 빠릅니다. Rust로 작성되어 매우 빠른 실행 속도를 자랑합니다. 공식문서에 따르면, 대규모 코드베이스에서 Prettier보다 최대 35배 빠른 포매팅 속도를 보여줍니다.

 

또한, ESLint 보다도 최대 15배 빠르다고 합니다. Biome의 벤치마크에 대한 자세한 수치들은 아래 링크에서 더 자세히 살펴볼 수 있습니다.

https://github.com/biomejs/biome/blob/main/benchmark/README.md

biome/benchmark/README.md at main · biomejs/biome

 

이런 굉장한 친구는 어디서 갑자기 툭 튀어나온 걸까요? 간단하게 Biome의 탄생 이야기를 알아보겠습니다.

 

Biome의 히스토리

Biome의 탄생

Biome의 탄생은 Rome이라는 프로젝트에서 시작됩니다. TypeScript로 작성된 Rome은 2020년에 등장한 JavaScript 툴체인으로, 번들링, 컴파일, 포매팅, 린팅, 테스트 등 모든 작업을 하나의 CLI에서 수행할 수 있는 올인원 솔루션을 목표로 했습니다. 그러나 Rome 프로젝트는 회사의 어려움으로 인해 중단되었고, 모든 직원이 해고되었습니다. 이에 Rome에 대한 애정이 남아있던 일부 인원들이 프로젝트를 fork 하여 새로운 프로젝트를 시작했는데, 이것이 바로 Biome입니다.

그래서 왜 Biome인가요?

Biome이라는 이름은 상표권 문제로 Rome을 그대로 사용할 수 없어, "Bis(다시) + Rome"의 의미를 담아 지어졌습니다. Biome은 2023년 8월 29일에 공식적으로 발표되었으며, Rome의 유산을 이어받아 개발되고 있습니다.

 

Biome은 자신들의 철학에 대해서도 설명하고 있는데요, 자세한 이야기가 궁금하시다면 아래 링크를 살펴보세요

https://biomejs.dev/internals/philosophy/

Philosophy

 

그럼 이제 Biome을 사용해 볼까요?

사용법은 정말 간단합니다.

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome check --write ./src

 

설치하고, 명령어 한 줄만 입력하면 해결입니다. 너무 간단하죠?

물론, biome.json에서 추가적으로 커스텀 설정을 할 수 있습니다.

아래와 같은 방식으로 사용이 가능합니다.

// biome.jsonc
{
  "formatter": {
    "indentStyle": "space", // default is `tab`
    "indentWidth": 2,
    "lineWidth": 100 // default is `80`
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single", // default is `double`
      "lineWidth": 120 // override `formatter.lineWidth`
    }
  },
  "organizeImports":  {
    "enabled": true
  }
}

 

그리고 Biome을 효율적으로 잘 사용하려면 extension을 설치해주어야 합니다.

https://marketplace.visualstudio.com/items?itemName=biomejs.biome

Biome - Visual Studio Marketplace

 

만약, 모든 프로젝트에서 Biome을 사용하는 경우가 아니라면 추가로 편집기의 세팅을 해주어야 하는데요, 저는 vscode를 사용하고 있기에 다음과 같이 추가세팅을 해주었습니다.

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

 

 

Biome을 직접 사용해 본 소감은..

개인 사이드 프로젝트를 하는 데, 간단한 프로젝트여서 환경 설정을 러프하게만 설정해두고 하고 있었습니다. (사실 귀찮았던 게 더 큰...) 아주 기본 중의 기본인 eslint + prettier로만 사용 중이었습니다. 그런데, 코드가 점점 쌓이다 보니, 기존의 간단한 설정보다는 좀 더 많은 것들이 필요해졌습니다. import order라던가, tailwind css 등 이것저것 추가하려다 보니 설치하고 설정해야 할 것들이 너무 많아졌습니다.

 

설치했던 플러그인만 요정도.. (심지어 전체 설정도 아니고 중간에 추가한 것들입니다.)

"@typescript-eslint/eslint-plugin": "^8.22.0",
"@typescript-eslint/parser": "^8.22.0",
"eslint-import-resolver-typescript": "^3.7.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-next-on-pages": "^1.13.7",
"prettier-plugin-tailwindcss": "^0.6.11",

 

아.. 하기 싫다. 귀찮다는 생각이 점점 커졌는데요.

 

그러던 와중에 Biome을 추천받아 바로 사용해 보게 되었습니다. Biome의 경우, 정말 친절하게도 ESLint와 Prettier를 사용하던 사용자에게 간편한 마이그레이션을 제공합니다. (외쳐! 갓 Biome)

 

설치도, 설정도 간단했던 Biome이었기에 마이그레이션 과정 역시 간단했습니다.

좀 더 deep하게 설정을 건드리려면 건드릴 수 있었겠지만, 단순히 아래 명령어 2줄만으로도 마이그레이션이 가능했습니다.

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

 

확실히 설치해야 할 것도 적고, 설정도 어렵지 않았을 뿐만 아니라 ESLint와 Prettier 설정이 최대한 비슷하게 자동으로 마이그레이션 되는 걸 경험하니 무척 간편하고 꽤 유용하다는 생각이 들었습니다. 사이드 프로젝트를 시작하기 전에 알았다면, 환경 설정에 걸린 시간을 엄청나게 줄일 수 있었을 텐데 하는 아쉬움도 들었습니다.

 

 

Biome의 아쉬운 부분들

앞에서 “좋다.. 정말 좋다”  찬양에 호평 일색이었지만, 사실 단점도 있었습니다.

 

지원 범위 부족

아직 지원되지 않는 언어들이 꽤 있습니다. 물론 열심히 개발중이기 때문에 조금만 기다리면 지원이 되겠지만, 아쉬운 건 사실입니다. react가 아닌 다른 라이브러리나 프레임워크를 사용한다면 도입을 주저할 수밖에 없습니다.

 

레퍼런스 부족

상대적으로 많이 사용되지 않다보니, 레퍼런스가 부족합니다. 기본 설정만으로는 문제가 없지만, 뭔가 커스터마이징을 하다가 막히는 경우, 해결을 위해 자료를 찾아보았지만 레퍼런스가 부족했었습니다.

 

제한된 설정

ESLint에서의 import order와 달리, 세밀한 규칙으로 order를 만들 수 없습니다. 단순히 그저 Biome의 기본 설정을 따라야 합니다. 이 외에도 아직은 ESLint의 모든 설정이 100% 대응되지는 않습니다.

 

마무리

장점도 많지만, 단점을 완전히 무시할 수는 없기 때문에, 반드시 ESLint와 Prettier를 버리고 Biome을 사용해야 한다고 말할 수는 없을 것 같습니다. 저도 아직 회사에서는 사용해 본 적이 없고, 개인 프로젝트에서만 활용하고 있어 코드량이 많지 않아 빠른 속도를 체감하진 못했습니다. 하지만, 무수히 많은 플러그인을 설치하고 설정을 맞출 필요 없이 정말 간단하게 개발 환경을 세팅했던 경험은 매우 긍정적이었습니다. 회사에서 새로운 프로젝트를 시작한다면 반드시 도입해 볼 생각이며, 백오피스 프로젝트에 시범 도입하는 것도 고려 중입니다.

 

자신 혹은 팀의 개발 환경을 살펴봤을 때 충분히 도입이 가능하다고 판단된다면, 한 번쯤 시도해보시길 추천드립니다!