프론트엔드 모노레포: Lerna 및 Nx 워크스페이스 관리

끊임없이 진화하는 프론트엔드 개발 환경에서 크고 복잡한 프로젝트를 관리하는 것은 상당한 어려움이 될 수 있습니다. 기존의 멀티-레포 설정은 격리를 제공하지만, 코드 중복, 의존성 관리 문제, 일관되지 않은 도구 사용으로 이어질 수 있습니다. 바로 이 지점에서 모노레포 아키텍처가 빛을 발합니다. 모노레포는 여러 프로젝트(종종 서로 관련됨)를 포함하는 단일 저장소로, 이 프로젝트들은 함께 빌드되고 버전 관리됩니다. 이 접근 방식은 수많은 장점을 제공하지만, 모노레포를 효과적으로 관리하려면 전문적인 도구가 필요합니다. 이 글에서는 두 가지 인기 있는 솔루션인 Lerna와 Nx를 살펴봅니다.

모노레포란?

모노레포는 여러 프로젝트의 코드를 담는 버전 관리 시스템 저장소입니다. 이 프로젝트들은 서로 관련될 수도 있고 완전히 독립적일 수도 있습니다. 핵심은 같은 저장소를 공유한다는 것입니다. Google, Facebook, Microsoft, Uber와 같은 회사들은 대규모 코드베이스를 관리하기 위해 모노레포를 성공적으로 채택했습니다. Android, Chrome, Gmail을 포함한 거의 모든 코드를 단일 저장소에 저장하는 Google을 생각해 보세요.

모노레포의 이점

• 코드 공유 및 재사용: 복잡한 패키징 및 게시 워크플로 없이 프로젝트 간에 코드를 쉽게 공유할 수 있습니다. 동일한 저장소 내의 여러 애플리케이션에 원활하게 통합될 수 있는 디자인 시스템 라이브러리를 상상해 보세요.
• 간소화된 의존성 관리: 한 곳에서 의존성을 관리하여 모든 프로젝트에서 일관성을 보장합니다. 공유 라이브러리의 의존성을 업데이트하면 해당 라이브러리에 의존하는 모든 프로젝트가 자동으로 업데이트됩니다.
• 원자적 변경: 단일 커밋으로 여러 프로젝트에 걸쳐 변경 사항을 적용하여 일관성을 보장하고 테스트를 간소화합니다. 예를 들어, 프론트엔드와 백엔드 모두에 영향을 미치는 리팩토링은 원자적으로 수행될 수 있습니다.
• 향상된 협업: 팀은 동일한 저장소 내에서 서로 다른 프로젝트에 대해 쉽게 협업하여 지식 공유 및 교차 기능 개발을 촉진할 수 있습니다. 개발자는 서로 다른 팀의 코드를 쉽게 탐색하고 이해할 수 있습니다.
• 일관된 도구 및 관행: 모든 프로젝트에 걸쳐 일관된 코딩 표준, 린팅 규칙 및 빌드 프로세스를 적용합니다. 이는 코드 품질과 유지 관리성을 향상시킵니다.
• 간소화된 리팩토링: 관련된 모든 코드가 동일한 저장소 내에 있으므로 대규모 리팩토링 프로젝트가 간소화됩니다. 전체 코드베이스에 걸쳐 자동화된 리팩토링 도구를 사용할 수 있습니다.

모노레포의 과제

• 저장소 크기: 모노레포는 매우 커질 수 있으며, 잠재적으로 복제 및 인덱싱 작업을 늦출 수 있습니다. git sparse-checkout 및 partial clone과 같은 도구가 이 문제를 완화하는 데 도움이 될 수 있습니다.
• 빌드 시간: 전체 모노레포를 빌드하는 것은 특히 대규모 프로젝트의 경우 시간이 많이 소요될 수 있습니다. Lerna 및 Nx와 같은 도구는 이를 해결하기 위한 최적화된 빌드 프로세스를 제공합니다.
• 액세스 제어: 모노레포의 특정 부분에 대한 액세스를 제한하는 것은 복잡할 수 있습니다. 액세스 제어 메커니즘에 대한 신중한 계획 및 구현이 필요합니다.
• 도구 복잡성: 모노레포를 설정하고 관리하려면 전문 도구와 지식이 필요합니다. 초기 학습 곡선이 가파를 수 있습니다.

Lerna: 모노레포에서 JavaScript 프로젝트 관리

Lerna는 모노레포에서 JavaScript 프로젝트를 관리하기 위한 인기 있는 도구입니다. Git 및 npm으로 다중 패키지 저장소를 관리하는 워크플로를 최적화합니다. npm 또는 Yarn을 의존성 관리에 사용하는 프로젝트에 특히 적합합니다.

Lerna의 주요 기능

• 버전 관리: Lerna는 마지막 릴리스 이후 변경된 사항을 기반으로 패키지를 자동으로 버전 관리하고 게시할 수 있습니다. 다음 버전 번호를 결정하기 위해 컨벤셔널 커밋을 사용합니다.
• 의존성 관리: Lerna는 패키지 간 의존성을 처리하여 모노레포 내의 패키지가 서로 의존할 수 있도록 합니다. 로컬 의존성을 생성하기 위해 심볼릭 링크를 사용합니다.
• 작업 실행: Lerna는 여러 패키지에 걸쳐 명령을 병렬로 실행하여 빌드 및 테스트 프로세스 속도를 높일 수 있습니다. package.json에 정의된 스크립트 실행을 지원합니다.
• 변경 감지: Lerna는 마지막 릴리스 이후 어떤 패키지가 변경되었는지 감지하여 대상 빌드 및 배포를 가능하게 합니다.

Lerna 사용 예시

Lerna의 사용법을 간소화된 예시로 설명해 보겠습니다. package-a와 package-b 두 개의 패키지를 가진 모노레포가 있다고 가정해 봅시다. package-b는 package-a에 의존합니다.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Lerna 초기화:

lerna init

이렇게 하면 lerna.json 파일이 생성되고 루트 package.json이 업데이트됩니다. lerna.json 파일은 Lerna의 동작을 구성합니다.

2. 의존성 설치:

npm install
# or
yarn install

이렇게 하면 각 패키지의 package.json 파일에 따라 모노레포의 모든 패키지에 대한 의존성이 설치됩니다.

3. 패키지 전반에 걸쳐 명령 실행:

lerna run test

이것은 package.json 파일에 test 스크립트가 정의된 모든 패키지에 대해 test 스크립트를 실행합니다.

4. 패키지 게시:

lerna publish

이 명령은 커밋 히스토리를 분석하고, 변경된 패키지를 결정하고, 컨벤셔널 커밋에 따라 버전 번호를 올리고, npm(또는 선택한 레지스트리)에 게시합니다.

Lerna 구성

lerna.json 파일은 Lerna 구성의 핵심입니다. 다음과 같이 Lerna의 동작을 사용자 정의할 수 있습니다.

• packages: 모노레포 내 패키지의 위치를 지정합니다. 종종 ["packages/*"]로 설정됩니다.
• version: 버전 관리 전략을 지정합니다. independent(각 패키지가 자체 버전을 가짐) 또는 고정 버전일 수 있습니다.
• command: publish 및 run과 같은 특정 Lerna 명령에 대한 옵션을 구성할 수 있습니다.

lerna.json 예시:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: 스마트하고 빠르고 확장 가능한 빌드 시스템

Nx는 모노레포 관리를 위한 고급 기능을 제공하는 강력한 빌드 시스템입니다. 증분 빌드, 계산 캐싱 및 작업 오케스트레이션에 중점을 두어 빌드 시간과 개발자 생산성을 크게 향상시킵니다. Lerna가 주로 패키지 관리에 중점을 둔 반면, Nx는 코드 생성, 린팅, 테스트 및 배포를 포함한 전체 모노레포 워크플로 관리에 대한 보다 포괄적인 접근 방식을 제공합니다.

Nx의 주요 기능

• 증분 빌드: Nx는 프로젝트의 의존성 그래프를 분석하고 마지막 빌드 이후 변경된 프로젝트만 다시 빌드합니다. 이는 빌드 시간을 극적으로 단축시킵니다.
• 계산 캐싱: Nx는 빌드 및 테스트와 같은 작업 결과를 캐시하여 입력이 변경되지 않은 경우 재사용할 수 있도록 합니다. 이는 개발 주기를 더욱 가속화합니다.
• 작업 오케스트레이션: Nx는 복잡한 빌드 파이프라인을 정의하고 효율적으로 실행할 수 있도록 하는 강력한 작업 오케스트레이션 시스템을 제공합니다.
• 코드 생성: Nx는 모범 사례 및 일관된 표준을 따르면서 새로운 프로젝트, 구성 요소 및 모듈을 빠르게 생성하는 데 도움이 되는 코드 생성 도구를 제공합니다.
• 플러그인 생태계: Nx는 React, Angular, Node.js, NestJS 등과 같은 다양한 기술 및 프레임워크를 지원하는 풍부한 플러그인 생태계를 가지고 있습니다.
• 의존성 그래프 시각화: Nx는 모노레포의 의존성 그래프를 시각화하여 프로젝트 간의 관계를 이해하고 잠재적인 문제를 식별하는 데 도움을 줍니다.
• 영향을 받는 명령: Nx는 특정 변경 사항에 의해 영향을 받는 프로젝트에 대해서만 작업을 실행하는 명령을 제공합니다. 이를 통해 주의가 필요한 영역에 노력을 집중할 수 있습니다.

Nx 사용 예시

Nx의 사용법을 간소화된 예시로 설명해 보겠습니다. React 애플리케이션과 Node.js 라이브러리를 가진 모노레포를 생성해 보겠습니다.

1. Nx CLI 전역 설치:

npm install -g create-nx-workspace

2. 새로운 Nx 워크스페이스 생성:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

이렇게 하면 React 애플리케이션이 포함된 새로운 Nx 워크스페이스가 생성됩니다. --preset=react 옵션은 React 관련 구성으로 워크스페이스를 초기화하도록 Nx에 지시합니다.

3. 라이브러리 생성:

nx generate @nrwl/node:library my-library

이렇게 하면 my-library라는 새로운 Node.js 라이브러리가 생성됩니다. Nx는 라이브러리와 그 의존성을 자동으로 구성합니다.

4. 애플리케이션 빌드:

nx build my-app

이렇게 하면 React 애플리케이션이 빌드됩니다. Nx는 의존성 그래프를 분석하고 필요한 파일만 다시 빌드합니다.

5. 테스트 실행:

nx test my-app

이렇게 하면 React 애플리케이션에 대한 단위 테스트가 실행됩니다. Nx는 테스트 결과를 캐시하여 후속 테스트 실행 속도를 높입니다.

6. 의존성 그래프 보기:

nx graph

이렇게 하면 모노레포의 의존성 그래프를 시각화하는 웹 인터페이스가 열립니다.

Nx 구성

Nx는 워크스페이스 루트에 있는 nx.json 파일을 통해 구성됩니다. 이 파일은 워크스페이스의 프로젝트, 해당 의존성 및 실행할 수 있는 작업을 정의합니다.

nx.json의 주요 구성 옵션은 다음과 같습니다.

• projects: 워크스페이스의 프로젝트와 해당 구성(예: 루트 디렉토리 및 빌드 대상)을 정의합니다.
• tasksRunnerOptions: 작업을 실행하고 결과를 캐시하는 태스크 러너를 구성합니다.
• affected: Nx가 변경 사항에 의해 어떤 프로젝트가 영향을 받는지 결정하는 방법을 구성합니다.

nx.json 예시:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    }
  }
}

Lerna vs. Nx: 무엇을 선택해야 할까?

Lerna와 Nx는 모두 프론트엔드 모노레포를 관리하는 데 탁월한 도구이지만, 약간 다른 요구 사항을 충족합니다. 프로젝트에 적합한 도구를 선택하는 데 도움이 되는 비교는 다음과 같습니다.

기능	Lerna	Nx
초점	패키지 관리	빌드 시스템 및 작업 오케스트레이션
증분 빌드	제한적 (외부 도구 필요)	내장 및 고도로 최적화됨
계산 캐싱	아니오	예
코드 생성	아니오	예
플러그인 생태계	제한적	광범위
학습 곡선	낮음	높음
복잡성	더 간단함	더 복잡함
사용 사례	주로 npm 패키지 관리 및 게시를 목표로 하는 프로젝트.	최적화된 빌드 시간, 코드 생성 및 포괄적인 빌드 시스템이 필요한 크고 복잡한 프로젝트.

Lerna를 선택해야 하는 경우:

• 주로 npm 패키지를 관리하고 게시해야 하는 경우.
• 프로젝트가 비교적 작거나 중간 규모인 경우.
• 학습 곡선이 낮은 더 간단한 도구를 선호하는 경우.
• npm 및 Yarn에 이미 익숙한 경우.

Nx를 선택해야 하는 경우:

• 최적화된 빌드 시간과 증분 빌드가 필요한 경우.
• 코드 생성 기능을 원하는 경우.
• 작업 오케스트레이션을 포함한 포괄적인 빌드 시스템이 필요한 경우.
• 프로젝트가 크고 복잡한 경우.
• 더 강력한 도구를 학습하는 데 시간을 투자할 의향이 있는 경우.

Lerna와 Nx를 함께 사용할 수 있나요?

예, Lerna와 Nx는 함께 사용할 수 있습니다. 이 조합은 Lerna의 패키지 관리 기능을 활용하면서 Nx의 최적화된 빌드 시스템과 작업 오케스트레이션의 이점을 얻을 수 있도록 합니다. Nx는 Lerna에서 관리하는 패키지에 대해 증분 빌드 및 계산 캐싱을 제공하는 태스크 러너로 구성할 수 있습니다.

프론트엔드 모노레포 관리를 위한 모범 사례

Lerna 또는 Nx 중 무엇을 선택하든, 프론트엔드 모노레포를 성공적으로 관리하기 위해서는 모범 사례를 따르는 것이 중요합니다.

• 명확한 프로젝트 구조 확립: 프로젝트를 논리적이고 일관되게 정리합니다. 패키지 및 라이브러리에 대한 명확한 명명 규칙을 사용합니다.
• 일관된 코딩 표준 적용: 린터와 포맷터를 사용하여 모든 프로젝트에서 일관된 코드 스타일을 보장합니다. ESLint 및 Prettier와 같은 도구를 워크플로에 통합할 수 있습니다.
• 빌드 및 테스트 프로세스 자동화: CI/CD 파이프라인을 사용하여 빌드, 테스트 및 배포 프로세스를 자동화합니다. Jenkins, CircleCI, GitHub Actions와 같은 도구를 사용할 수 있습니다.
• 코드 리뷰 구현: 코드 품질과 유지 관리성을 보장하기 위해 철저한 코드 리뷰를 수행합니다. 풀 리퀘스트 및 코드 리뷰 도구를 사용합니다.
• 빌드 시간 및 성능 모니터링: 빌드 시간 및 성능 지표를 추적하여 병목 현상 및 개선 영역을 식별합니다. Nx는 빌드 성능 분석을 위한 도구를 제공합니다.
• 모노레포 구조 및 프로세스 문서화: 모노레포의 구조, 사용된 도구 및 기술, 개발 워크플로를 설명하는 명확한 문서를 작성합니다.
• 컨벤셔널 커밋 채택: 컨벤셔널 커밋을 사용하여 버전 관리 및 릴리스 프로세스를 자동화합니다. Lerna는 컨벤셔널 커밋을 기본적으로 지원합니다.

결론

프론트엔드 모노레포는 코드 공유, 간소화된 의존성 관리, 향상된 협업을 포함하여 크고 복잡한 프로젝트 관리에 상당한 이점을 제공합니다. Lerna와 Nx는 프론트엔드 모노레포를 효과적으로 관리하는 데 도움이 되는 강력한 도구입니다. Lerna는 npm 패키지 관리에 훌륭한 선택이며, Nx는 증분 빌드 및 코드 생성과 같은 고급 기능을 갖춘 보다 포괄적인 빌드 시스템을 제공합니다. 프로젝트의 요구 사항을 신중하게 고려하고 모범 사례를 따르면 프론트엔드 모노레포를 성공적으로 채택하고 그 이점을 얻을 수 있습니다.

Lerna와 Nx 중 하나를 선택할 때 팀의 경험, 프로젝트 복잡성, 성능 요구 사항과 같은 요소를 고려해야 합니다. 두 도구를 모두 실험하여 특정 요구 사항에 가장 적합한 도구를 찾으세요.

모노레포 여정에 행운을 빕니다!