[FE] eslint & prettier에서 Biome으로 마이그레이션하기

 센디 웹 프론트엔드 프로젝트를 eslint & prettier에서 biome로 마이그레이션한 후기를 작성하고자 한다. 추후에 센디 테크 블로그가 생성되는 그 날을 기약하며..

 

Motivation

 센디 웹 프론트엔드에서는 린팅과 코드 포맷팅을 위해 eslint와 prettier를 조합해서 사용한다. 팀원이 3명인 소수팀이기도 하고 서로의 코드 스타일을 존중하는 분위기 덕에 린팅 규칙을 빡빡하게 설정하지는 않았다. 불필요하게 빨간 줄을 띄우는 규칙(no-unused-vars 등)만 warn 또는 off로 두면서 린팅과 포맷팅을 최소한으로 적용하고 있었다.

 

린팅&포맷팅 시점

 다른 테크 블로그를 참고해보니 린팅과 포맷팅을 CI 과정에 통합하는 경우가 많던데, 센디 웹 프론트엔드의 경우 husky, lint-staged 툴을 사용하여 커밋 시점에 린팅과 포맷팅을 수행한다. 커밋에 통합하는 것의 장점은 다음과 같다.

 

• CI 빌드 단계에서의 린팅이나 포맷팅 오류로 인한 실패를 미리 발견할 수 있다.
• 모든 개발자가 로컬에서 동일한 린팅/포맷팅 규칙을 적용하기 때문에 코드베이스가 항상 일관된 스타일로 유지된다.

CI 과정 중에 한 번만 린팅&포맷팅하면 될 것을 커밋할 때마다 수행해야 해서 시간이 오래 걸리지 않을까 했지만, eslint & prettier를 도입할 당시만 해도 시간이 3~4초 정도로 빠르게 처리되었다.

 

린팅&포맷팅 10초씩 걸림..

 그런데 어느 순간부터 린팅과 포맷팅에 걸리는 시간이 9초 이상이 걸리기 시작했다. 지난 몇 개월 동안 빠르게 신기능을 추가하면서 코드베이스가 복잡해진 것이 원인으로 보였다.

 

전체 코드베이스를 대상으로 Prettier 포맷팅 시간 측정

 

 앞으로 코드베이스는 더욱 복잡해질 수 밖에 없는 상황 속에서 커밋할 때마다 10초 이상의 시간을 멍하니 터미널만 쳐다보는건 머리 아픈 상황이다.

 

Biome 도입

https://biomejs.dev/

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.

 Rust로 구현된 Biome는 웹 프로젝트를 위한 통합 툴체인이다. 비오메, 비오미, 바이옴.. 뭐라고 읽는지는 모르겠지만 기존에 사용하던 Eslint, Prettier와 97% 호환성을 가지면서 35배 빠른 성능을 보여준다고 한다. 아직 커뮤니티는 작지만 Eslint와 Prettier 사용자들이 넘어오기 쉽도록 마이그레이션 기능도 제공한다.

 

https://biomejs.dev/guides/migrate-eslint-prettier/

Migrate from ESLint and Prettier

 

 

 우리 팀의 경우 기존에 사용하던 린팅&포맷팅 규칙이 빡빡하지 않아서 마이그레이션도 간단하게 끝났다. Eslint와 Prettier의 규칙을 커스텀해서 사용하고 있는 경우 Biome에서 지원하지 않을 수 있으니 조심스럽게 마이그레이션하기를 권장한다.

 

7.7배 빨라짐

 

 Biome로 전체 코드베이스를 대상으로 리팅과 포맷팅을 수행했을 때, 1.53초 소요되었다. Prettier로 포맷팅만 수행했을 때 11.80초가 소요되었으니 대략 7.7배 정도 단축된 셈이다.

 

 

부가 기능 - Import Sorting

 Biome에서는 Prettier에는 없는, import 문을 정렬하는 기능이 있다. biome.config.js에서 옵션을 끄거나 켤 수 있다. import 문이 복잡하긴 하지만 사실 IDE 에서 import 문 그룹을 접으면 보이지 않아서 import 정렬에는 신경을 쓰지 않았는데, Biome에서 자동으로 정렬을 수행해서 편하다.