Biome는 SDK를 개발하고 있는 도중에 IDE 버전에 따라 ESLint가 제대로 포맷팅이 되지않아서 고생하고있는 와중에 프론트엔드 카톡방에서 ESLint을 대신할 녀석이 나왔다는 톡을 보고 알게되었다. Biome에 대해서 알아보자! 🙌
1. 뭐하는 녀석이냐
공식홈에서는 웹 프로젝트를 위한 하나의 툴 체인이라고 소개 하고 있다.
프로젝트를 세팅할때에 eslint과 prettier 설정은 선택이 아니라 필수 도구였고 초기 세팅에 eslint를 어떻게 설정하느냐에 따라 관련 plugin을 직접 설치하고 세팅해줘야한다. 그리고 lint fix시에 (프로젝트 규모에 따라) 걸리는 시간도 꽤 되었다.
Biome는 쉽게 설정이 가능하고 가볍고 빠르다고 하여 한번 스터디 과제에 적용해보았다. 게다가 Biome가 기존 프로젝트의 설정한 eslint와 prettier를 마이그레이션 할 수 있도록 제공해준다하여 더 구미가 끌렸다.
2. 설치 및 설정
- (yarn 기준으로 설명드려요!) Biome 설치를 합니다.
yarn add --dev --exact @biomejs/biome- Biome 구성파일을 만들기 위해 다음과 같이 초기화를 합니다.
yarn biome init
- 위의 명령어를 실행하면 biome.json 파일이 생성됩니다.
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"organizeImports": {
"enabled": false
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}- IDE에 Biome 플러그인 설치를 합니다. (vscode 기준으로 설명드려요!)
3. (자, 이제 Biome의 다왔어요..!!) 기존 프로젝트에서 Migration 하는 방법
마이그레이션 테스트를 하기 위해 create-next-app 으로 새로운 프로젝트를 생성하였고, 해당 프로젝트의 환경은 node는 v22.2.0이고 package.json 다음과 같다.
{
"name": "next-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "14.2.4",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@biomejs/biome": "1.8.3",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.4",
"typescript": "^5"
}
}위의 환경에서 마이그레이션의 명령어는 다음과 같다.
yarn biome migrate eslint --write // eslint 마이그레이션 명령어
yarn biome migrate prettier --write // prettier 마이그레이션 명령어이렇게 했더니 다음과 같은 오류 메세지가 노출되었다.(역시 한번에 마이그레이션되면 재미없지🤪)
로그상으로 보면 nextjs에서 디폴트로 제공하고 있는 eslint와 충돌이 난것처럼 나온다. 그래서 Biome 깃헙 이슈에 동일한 이슈가 있는지 검색해보니 나와 동일하게 오류난 이슈가 있었다!!(레퍼런스가 많이 없다보니 어찌해결하나 싶었는데 휴 다행...😅 나와 같은 현상을 겪으신 분들에게 조금이나마 도움이 되었으면🙏)
깃헙 이슈에 나온것처럼 가능한 버그를 수정할려고 노력하지만 다른 플러그인에서 발생하는 버그는 biome에서 해결할 수 없다고 한다....또르르르....하고있는 찰나에 마지막댓글에
./node_modules/eslint-config-next/index.js 해당 경로에서 56줄을 제거하고 다시 마이그레이션 해보라고한다. (밑저야 본전이니 한번해보자!😱)
해당 소스에 56줄은 'plugin:react/recommended' 였고, 해당 부분을 주석처리해도 동일한 오류 메세지가 나오길래 잘못 주석처리했구나 싶었다. 오류로그를 조금 더 상세히 보니
"at Object. (/Users/encr24n10049/Projects/next-app/node_modules/@rushstack/eslint-patch/lib/modern-module-resolution.js:11:23)" 요부분이 있었고, 52줄에 있는
require('@rushstack/eslint-patch/modern-module-resolution')해당부분을 주석처리하고(위의 모듈이 왜 오류가 나는지 궁금해서 검색해보니 관련 깃헙이슈에서 볼수있었다. 해당 글의 주제와 벗어나는것 같아서 링크만 공유하는걸로), 다시 마이그레이션을 시도하였다.
드디어 마이그레이션이 완료되었다! 0.84초 만에 마이그레이션이 되다니😍
마이그레이션을 하고 나니 biome.json 이 업데이트되었고 다음과 같다.
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"organizeImports": { "enabled": true },
"linter": {
"enabled": true,
"rules": {
"recommended": false,
"a11y": {
"noAriaUnsupportedElements": "warn",
"noBlankTarget": "off",
"useAltText": "warn",
"useAriaPropsForRole": "warn",
"useValidAriaProps": "warn",
"useValidAriaValues": "warn"
},
"correctness": {
"noChildrenProp": "error",
"useExhaustiveDependencies": "warn",
"useHookAtTopLevel": "error",
"useJsxKeyInIterable": "error"
},
"security": { "noDangerouslySetInnerHtmlWithChildren": "error" },
"suspicious": { "noCommentText": "error", "noDuplicateJsxProps": "error" }
}
},
"overrides": [{ "include": ["**/*.ts?(x)"] }]
}
4. 해보니 나의 의견
eslint로 lint fix 하는것과 biome로 lint fix하는건 어떤게 빠를까?를 생각하며 테스트 해본 결과!!
eslint로는 1.82초 걸렸는데, biome로는 0.14초가 걸렸다. 무려 92%나 biome 더 빠르다!! 빠른 속도를 좋아하는 나로써는 굉장히 만족하였지만 biome 관련 레퍼런스가 적은게 단점이 아닐까 싶다.(더 많은 장점과 단점이 있겠지만..)
새로운 도구를 시도하는 것은 항상 흥미로운 도전이며, Biome가 제공하는 혜택은 충분히 매력적이라고 생각한다. 앞으로 더 많은 개발자들이 Biome를 사용하여 경험을 공유해주기를 기대한다. 🌟
