💻 프로그래밍

Rome

JavaScript Unified Toolchain

Babel 창시자 Sebastian McKenzie가 개발한 JavaScript/TypeScript 올인원 툴체인. 린터, 포매터, 번들러를 단일 도구로 통합. 현재 Biome로 fork되어 활발히 개발 중.

📖 상세 설명

Rome은 JavaScript와 TypeScript 개발을 위한 올인원(All-in-One) 툴체인 프로젝트입니다. 기존에 개별적으로 사용하던 린터(ESLint), 포매터(Prettier), 번들러(webpack), 컴파일러(Babel), 테스트 러너(Jest) 등을 하나의 통합 도구로 대체하는 것을 목표로 했습니다. "모든 길은 로마로 통한다(All roads lead to Rome)"라는 표현에서 이름을 따왔으며, JavaScript 생태계의 도구 파편화 문제를 해결하고자 했습니다.

Sebastian McKenzie가 Rome을 창시했습니다. 그는 JavaScript 트랜스파일러 Babel의 창시자로, 17세에 Babel을 만들어 JavaScript 생태계에 혁명을 일으킨 인물입니다. Meta(Facebook)에서 근무하던 그는 2020년 Rome Tools Inc.를 설립하고 Rome 개발에 전념했습니다. Babel 개발 경험에서 얻은 통찰을 바탕으로, 도구 간 설정 충돌과 호환성 문제를 근본적으로 해결하고자 했습니다.

Rome 프로젝트는 2023년 Biome로 fork되어 새로운 생명을 얻었습니다. Rome Tools Inc.의 자금 문제로 인해 핵심 개발자들이 회사를 떠났고, 커뮤니티 주도로 Biome 프로젝트가 탄생했습니다. Biome는 Rome의 코드베이스를 기반으로 하면서도 더 활발한 개발과 릴리스 주기를 유지하고 있습니다. 현재 새로운 프로젝트에는 Rome 대신 Biome 사용이 권장됩니다.

Rome/Biome의 통합 도구 접근 방식은 여러 장점을 제공합니다. 첫째, 단일 설정 파일로 린팅과 포매팅을 관리하여 설정 복잡성을 크게 줄입니다. 둘째, 도구 간 충돌이 없어 ESLint와 Prettier 사이의 규칙 충돌 같은 문제가 발생하지 않습니다. 셋째, Rust로 작성되어 ESLint/Prettier 대비 10-20배 빠른 성능을 제공합니다. 마지막으로, 일관된 에러 메시지와 진단 정보로 디버깅이 쉬워집니다.

💻 코드 예제

biome.json - 기본 설정 파일
// Biome(Rome 후속) 설정 파일
// 프로젝트 루트에 biome.json 생성
{
    "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",

    // 전역 설정
    "organizeImports": {
        "enabled": true
    },

    // 린터 설정
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true,
            // 특정 규칙 커스터마이징
            "complexity": {
                "noForEach": "warn"
            },
            "style": {
                "noNonNullAssertion": "off",
                "useConst": "error"
            },
            "suspicious": {
                "noExplicitAny": "warn"
            }
        }
    },

    // 포매터 설정
    "formatter": {
        "enabled": true,
        "indentStyle": "space",
        "indentWidth": 2,
        "lineWidth": 100
    },

    // JavaScript/TypeScript 특화 설정
    "javascript": {
        "formatter": {
            "quoteStyle": "single",
            "semicolons": "asNeeded",
            "trailingComma": "es5"
        }
    },

    // 파일 제외 설정
    "files": {
        "ignore": ["node_modules", "dist", "*.min.js"]
    }
}
CLI 명령어 사용법
# Biome 설치 (Rome에서 마이그레이션 권장)
npm install --save-dev @biomejs/biome

# 설정 파일 초기화
npx @biomejs/biome init

# 코드 포매팅 (--write로 파일 수정)
npx @biomejs/biome format --write ./src

# 린팅 검사
npx @biomejs/biome lint ./src

# 린팅 + 자동 수정
npx @biomejs/biome lint --apply ./src

# 포매팅 + 린팅 동시 실행 (check 명령어)
npx @biomejs/biome check ./src

# CI에서 사용 (수정 없이 검사만)
npx @biomejs/biome ci ./src

# 특정 파일만 검사
npx @biomejs/biome check ./src/App.tsx ./src/utils/*.ts

# package.json에 스크립트 추가 예시
# "scripts": {
#   "lint": "biome lint ./src",
#   "format": "biome format --write ./src",
#   "check": "biome check ./src"
# }
ESLint/Prettier에서 마이그레이션
// 1. 기존 설정 제거
npm uninstall eslint prettier eslint-config-prettier \
    @typescript-eslint/parser @typescript-eslint/eslint-plugin

// 2. Biome 설치
npm install --save-dev @biomejs/biome

// 3. 기존 .eslintrc, .prettierrc 삭제
rm .eslintrc.js .prettierrc

// 4. biome.json 생성 및 설정
npx @biomejs/biome init

// 5. VS Code 설정 (.vscode/settings.json)
{
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "quickfix.biome": "explicit",
        "source.organizeImports.biome": "explicit"
    },
    // ESLint, Prettier 확장 비활성화
    "eslint.enable": false,
    "prettier.enable": false
}

// 6. pre-commit hook 설정 (husky + lint-staged 대체)
// package.json
{
    "scripts": {
        "prepare": "husky install"
    },
    "lint-staged": {
        "*.{js,ts,jsx,tsx,json}": [
            "biome check --apply --no-errors-on-unmatched"
        ]
    }
}

🗣️ 실무 대화 예시

기술 회의 개발 도구 통합 전략

테크리드 박차장:

"요즘 새 프로젝트 셋업할 때마다 ESLint, Prettier, TypeScript 설정하느라 시간이 많이 걸려요. 특히 ESLint랑 Prettier 충돌 문제로 eslint-config-prettier 같은 플러그인까지 추가해야 하고요. Rome이나 Biome 같은 통합 도구를 검토해볼까요?"

프론트엔드 이대리:

"저도 관심 있었어요. 근데 Rome은 회사가 어려워져서 개발이 거의 멈췄다고 들었는데요. Biome가 Rome에서 fork된 프로젝트인데, 커뮤니티 주도로 활발하게 개발 중이에요. 릴리스도 꾸준하고요."

시니어 개발자 김과장:

"Biome 장점이 성능도 있어요. Rust로 작성되어서 ESLint보다 10배 이상 빨라요. 저희 모노레포에서 린트 돌리면 2분 걸리던 게 10초 대로 줄었다고 하더라고요. CI 시간 단축에도 큰 도움이 될 것 같아요."

테크리드 박차장:

"기존 ESLint 규칙들은 다 커버가 되나요? 저희가 쓰는 커스텀 규칙이 몇 개 있는데..."

프론트엔드 이대리:

"대부분의 권장 규칙은 커버되지만, ESLint만큼 플러그인 생태계가 크지는 않아요. 특히 React hooks 규칙이나 접근성 규칙은 있는데, 특정 프레임워크 전용 플러그인은 부족할 수 있어요. 작은 프로젝트부터 시범 적용해보는 게 좋을 것 같습니다."

기술 논의 마이그레이션 고려사항

주니어 개발자 최대리:

"Biome로 마이그레이션하려면 기존 프로젝트 설정을 다 바꿔야 하나요? ESLint 설정에 공들인 게 많아서 걱정이에요."

시니어 개발자 김과장:

"점진적으로 진행할 수 있어요. 일단 Biome를 포매터로만 먼저 쓰고, ESLint는 유지해도 됩니다. Prettier만 제거하고 Biome format을 쓰는 거죠. 그 다음에 Biome 린터가 커버하는 규칙부터 점진적으로 ESLint 규칙을 비활성화하면 됩니다."

주니어 개발자 최대리:

"IDE 지원은 어떤가요? VS Code에서 저장 시 자동 포맷이랑 린트 에러 표시가 중요한데..."

시니어 개발자 김과장:

"Biome 공식 VS Code 확장이 있어요. 저장 시 포맷, 린트 에러 인라인 표시, 자동 수정까지 다 지원합니다. settings.json에서 defaultFormatter를 biomejs.biome로 설정하면 돼요. JetBrains IDE도 플러그인 있고요."

테크리드 박차장:

"한 가지 주의할 점은, Biome 포매팅 결과가 Prettier와 100% 동일하지는 않아요. 미세한 차이가 있어서 마이그레이션 시 코드 diff가 많이 생길 수 있습니다. 별도 PR로 포매팅만 먼저 적용하는 게 좋아요."

기술 면접 빌드 도구 경험

면접관:

"Rome이나 Biome를 사용해본 경험이 있으신가요? ESLint + Prettier 대비 어떤 장단점이 있었나요?"

지원자:

"Biome를 사이드 프로젝트에서 사용했습니다. 가장 큰 장점은 속도예요. Rust로 작성되어 ESLint + Prettier 조합보다 10배 이상 빨랐고, 설정 파일도 biome.json 하나로 통합되어 관리가 편했습니다. 단점은 ESLint 플러그인 생태계에 비해 규칙이 제한적이라 일부 프로젝트에선 ESLint를 병행해야 했어요."

면접관:

"프로덕션 프로젝트에 도입한다면 어떤 점을 고려하시겠어요?"

지원자:

"먼저 현재 사용 중인 ESLint 규칙들이 Biome에서 커버되는지 확인하겠습니다. 그리고 점진적으로 도입해서 포매터만 먼저 전환하고, 린터는 규칙 커버리지를 검토 후 단계적으로 마이그레이션하겠습니다. CI 파이프라인 속도 개선 효과가 클 것으로 기대됩니다."

⚠️ 주의사항

🔗 관련 용어

📚 더 배우기