일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- Design system
- 웹개발
- frontend
- WebDev
- 개발
- 그룹단어
- 디자인 시스템
- securitypatch
- 리액트
- jotai
- 프론트엔드
- 모음의개수
- 코드개선
- 웹프로토콜
- TypeScript
- React Query
- nextjsmiddleware
- 리액트쿼리
- prettier
- 백준1264
- 백준
- react
- 개발자성장
- NextJs
- Next.js
- 알고리즘스터디
- 개발블로그
- 알고리즘
- 개발공부
- Nest.js
- Today
- Total
한땀한땀
Biome을 모노레포에 도입하며 겪은 설정 문제와 해결 과정 본문
Biome이란?
들어가기 앞서 Biome에 대해 제가 이해하고 있는 선에서 대략적인 설명을 하고자 합니다.
Biome은 JavaScript/TypeScript 생태계를 위한 올인원 도구입니다. 기존에 따로 사용하던 ESLint, Prettier, Babel, Stylelint 등을 하나의 빠르고 일관된 툴로 대체할 수 있는 것을 목표로 합니다.
- Linting
- Formatting
- Code Transformation
- 빠른 실행 속도 (Rust 기반)
- 간결한 설정 방식
Biome의 개념이나 구성 요소에 대한 더 자세한 내용은 공식 문서를 참고하세요.
배경: ESLint + Prettier에서 Biome으로
기존에 사용하는 ESLint와 Prettier 대신 Biome을 도입해 보기로 했습니다.
하나의 도구로 Lint + Formatter를 모두 처리할 수 있고, 속도도 매우 빠르기 때문입니다.
또한 Monorepo를 기반으로 여러 프로젝트를 운영하고 있기 때문에, 설정 역시 공유 가능한 형태로 구성하고 싶었습니다.
문제 상황: Monorepo에서 공유 설정이 적용되지 않음
먼저 packages/biome-config/ 폴더에 공통 설정 파일을 구성했습니다:
packages/
└── biome-config/
├── base.json
├── nextjs.json
└── package.json
그리고 apps/client/main 워크스페이스의 package.json에 다음과 같이 의존성을 추가했습니다:
// apps/client/main/package.json
"@repo/biome-config": "workspace:*"
client-main 워크 스페이스의 루트에 biome.json 파일을 생성하였고 다음과 같이 작성했습니다:
// apps/client/main/biome.json
{
"$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
"extends": ["@repo/biome-config/nextjs.json"]
}
그리고 아래와 같이 lint 스크립트를 실행해봤습니다:
"scripts": {
"lint": "biome check ."
}
하지만 실행 결과는 다음과 같은 에러였습니다:
✖ No such file or directory (os error 2)
원인 분석
여러 리서치를 통해 알게 된 사실은 다음과 같습니다:
🧩 Biome은 아직 Monorepo 환경에서 workspace 패키지를 통한 설정 공유를 공식적으로 지원하지 않습니다.
즉, "extends": ["@repo/biome-config/nextjs.json"]처럼 npm 패키지 스타일의 import는 작동하지 않습니다.
해결 방법
1. 상대 경로 사용하기 (Workaround)
가장 간단한 방법은 extends에 상대 경로를 사용하는 것입니다.
// apps/client/main/biome.json
{
"extends": ["../../../packages/biome-config/nextjs.json"]
}
2. 루트 biome.json에서 overrides 사용하기
루트에서 프로젝트 전체를 대상으로 설정하고, 하위 폴더별로 override를 지정하는 방법도 있습니다:
{
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"overrides": [{
"include": ["apps/client/main/**"],
"linter": {
"rules": {
"suspicious": {
"noConsoleLog": "off"
}
}
}
}]
}
이렇게 하면 하위 워크스페이스별로 개별 설정 없이 중앙 집중적으로 관리할 수 있습니다.
마무리하며
Biome은 뛰어난 속도와 간결한 설정으로 개인 프로젝트나 팀 프로젝트 모두에 적합한 툴입니다.
다만 현재 시점에서는 Monorepo에서 workspace 간 설정 공유 기능이 부족하므로, 위와 같은 우회 방법이 필요합니다.
'FrontEnd Dev' 카테고리의 다른 글
회사 프로젝트에서 발생한 JWT 인증 문제와 개선 기록 (0) | 2025.05.09 |
---|---|
Next.js에서 기존 URL을 안전하게 리디렉션하기 — Middleware를 활용한 접근 (0) | 2025.04.16 |
React에서 Buzzvil CPE/CPA 연동하기 – 실제 사례 기반 구현 가이드 (2) | 2025.04.14 |
React Query 버전 업그레이드 및 커스텀 타입 제거 (0) | 2025.04.04 |
Next.js 13에서 15로 마이그레이션 (0) | 2025.04.01 |