프론트엔드 Lerna: 글로벌 개발 팀을 위한 모노레포 관리 마스터하기

오늘날 빠르게 발전하는 소프트웨어 개발 환경에서 복잡한 프론트엔드 프로젝트를 관리하는 것은 특히 지리적으로 분산된 팀에게 상당한 어려움을 줄 수 있습니다. 여러 독립적인 저장소를 유지하는 전통적인 접근 방식은 코드 중복, 일관성 없는 종속성, 파편화된 개발 경험으로 이어질 수 있습니다. 바로 이 지점에서 모노레포의 강력한 기능이 Lerna와 같은 효과적인 관리 도구와 결합하여 진정으로 빛을 발합니다. 이 종합 가이드는 프론트엔드 Lerna에 대해 자세히 알아보고, 그 이점, 실제 구현, 그리고 개발 워크플로우를 최적화하고 글로벌 팀 전반에 걸쳐 원활한 협업을 촉진하기 위한 모범 사례를 탐구할 것입니다.

모노레포란 무엇인가요?

모노레포(monolithic repository의 줄임말)는 여러 다른 프로젝트의 코드가 동일한 버전 관리 저장소에 저장되는 소프트웨어 개발 전략입니다. 이는 각 프로젝트가 자체 개별 저장소에 상주하는 폴리레포(polyrepo) 접근 방식과 대조됩니다.

모노레포의 개념은 오래 전부터 존재했지만, 특히 대규모 조직과 공통 종속성 또는 기능을 공유하는 프로젝트에서 최근 몇 년 동안 그 채택이 급증했습니다. 프론트엔드 개발의 경우, 모노레포는 여러 독립적인 애플리케이션, 공유 컴포넌트 라이브러리, 유틸리티 패키지, 심지어 백엔드 서비스까지 모두 단일 저장소 구조 내에 담을 수 있습니다.

프론트엔드 개발에 모노레포를 선택하는 이유?

프론트엔드 프로젝트에 모노레포 전략을 채택하는 것의 이점은 다양하며 개발자 생산성, 코드 품질 및 전반적인 프로젝트 유지보수성에 크게 영향을 미칠 수 있습니다. 다음은 몇 가지 주요 이점입니다:

• 간소화된 의존성 관리: 여러 저장소에 걸쳐 의존성을 관리하는 것은 악몽일 수 있습니다. 모노레포에서는 의존성을 최상위 레벨로 끌어올려 각 의존성의 단일 버전이 모든 패키지에 설치되고 공유되도록 할 수 있습니다. 이는 폴리레포 설정에서 흔히 발생하는 "의존성 지옥"을 크게 줄여줍니다.
• 원자적 커밋 및 리팩터링: 여러 프로젝트에 걸친 변경 사항을 원자적으로 커밋할 수 있습니다. 이는 단일 커밋으로 공유 라이브러리와 이를 사용하는 모든 애플리케이션을 동시에 업데이트하여 일관성을 보장하고 통합 문제를 방지할 수 있음을 의미합니다. 대규모 리팩터링이 훨씬 쉽고 오류 발생 가능성이 줄어듭니다.
• 코드 공유 및 재사용성: 모노레포는 자연스럽게 코드 공유를 장려합니다. 공유 컴포넌트 라이브러리, 유틸리티 함수 및 디자인 시스템은 동일한 저장소 내의 여러 프로젝트에서 쉽게 개발 및 사용될 수 있어 일관성을 촉진하고 중복을 줄입니다.
• 간소화된 개발 경험: 단일 진실 공급원(single source of truth)을 통해 개발자는 코드베이스의 다른 부분을 쉽게 탐색하고 작업할 수 있습니다. 모노레포와 통합된 도구는 패키지 간의 관계를 이해하여 크로스 패키지 연결 및 최적화된 빌드와 같은 기능을 가능하게 합니다.
• 일관된 툴링 및 구성: 모든 프로젝트에 걸쳐 일관된 빌드 도구, 린터, 포맷터 및 테스트 프레임워크를 적용하는 것이 간단해집니다. 이는 더욱 균일한 개발 환경으로 이어지고 개발자의 인지 부하를 줄여줍니다.
• 글로벌 팀을 위한 쉬운 협업: 서로 다른 시간대에 걸쳐 작업하는 국제 팀의 경우, 모노레포는 모든 코드에 대한 단일하고 접근 가능한 진실 공급원을 제공합니다. 이는 조정 오버헤드를 줄이고 모든 사람이 공유 코드의 최신 버전으로 작업하고 있는지 확인합니다.

Lerna 소개: 당신의 모노레포 동반자

모노레포의 개념은 강력하지만, 이를 효율적으로 관리하려면 전문적인 툴링이 필요합니다. 바로 이 지점에서 Lerna가 등장합니다. Lerna는 여러 패키지를 가진 JavaScript 프로젝트를 관리하도록 설계된 인기 있는 툴체인입니다. 이는 모노레포의 패키지를 관리하고 게시하여 일관된 버전 관리를 보장하고 업데이트 게시 프로세스를 간소화하는 데 도움이 됩니다.

Lerna는 모노레포 관리의 여러 핵심적인 과제를 해결합니다:

• 패키지 검색 및 관리: Lerna는 모노레포 내의 패키지를 자동으로 검색하여 모든 패키지 또는 일부 패키지에 걸쳐 명령을 실행할 수 있도록 합니다.
• 의존성 연결: 모노레포 내의 로컬 패키지를 자동으로 심볼릭 링크하여 패키지가 먼저 레지스트리에 게시될 필요 없이 서로 의존할 수 있도록 합니다.
• 버전 관리: Lerna는 유연한 버전 관리 전략을 제공하여 모든 패키지의 버전을 독립적으로 또는 동시에 관리할 수 있도록 합니다.
• 게시: 업데이트된 패키지를 npm 레지스트리에 게시하는 프로세스를 간소화하고 버전 범핑 및 변경 로그 생성을 처리합니다.

Lerna로 프론트엔드 모노레포 설정하기

Lerna를 사용하여 프론트엔드 모노레포를 설정하는 필수 단계를 살펴보겠습니다. Node.js와 npm (또는 Yarn)이 전역으로 설치되어 있다고 가정합니다.

1. 새 Lerna 저장소 초기화

먼저, 모노레포를 위한 새 디렉토리를 생성하고 Lerna로 초기화합니다:

            mkdir my-frontend-monorepo
cd my-frontend-monorepo
lerna init

            

              
                Copy
              
            
          

이 명령은 기본적인 Lerna 구성 파일(lerna.json)을 생성하고 개별 패키지가 위치할 packages 디렉토리를 설정합니다.

2. 패키지 관리자 선택

Lerna는 npm과 Yarn을 모두 지원합니다. lerna.json에서 선호하는 것을 설정할 수 있습니다. 예를 들어, Yarn을 사용하려면:

            {
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "npmClient": "yarn",
  "useWorkspaces": true
}

            

              
                Copy
              
            
          

Yarn 또는 npm v7+를 사용할 때 useWorkspaces: true를 설정하면 내장된 워크스페이스 기능을 활용하여 의존성 설치 및 연결을 더욱 최적화할 수 있습니다. npm v7+를 사용하고 있다면 package-lock.json 또는 npm-shrinkwrap.json이 커밋되어 있는지 확인하십시오.

3. 첫 번째 프론트엔드 패키지 생성

packages 디렉토리 안에 개별 프론트엔드 프로젝트 또는 라이브러리를 위한 하위 디렉토리를 생성할 수 있습니다. 공유 UI 컴포넌트 라이브러리와 간단한 웹 애플리케이션을 만들어 보겠습니다.

            mkdir packages/ui-components
mkdir packages/web-app

            

              
                Copy
              
            
          

이제 각 새 패키지 디렉토리로 이동하여 새 npm/Yarn 패키지를 초기화합니다:

            cd packages/ui-components
yarn init -y
# Or npm init -y

cd ../web-app
yarn init -y
# Or npm init -y

            

              
                Copy
              
            
          

packages/ui-components/package.json 내부에는 몇 가지 기본 UI 컴포넌트를 정의할 수 있습니다. packages/web-app/package.json 내부에는 애플리케이션의 의존성을 정의합니다.

4. Lerna로 패키지 연결

web-app이 ui-components에 의존하도록 하려면 Lerna의 명령줄 인터페이스를 사용할 수 있습니다.

먼저, lerna.json이 패키지를 올바르게 검색하도록 설정되어 있는지 확인합니다:

            {
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "npmClient": "yarn",
  "useWorkspaces": true
}

            

              
                Copy
              
            
          

이제 모노레포의 루트에서 다음을 실행합니다:

            lerna add @my-monorepo/ui-components --scope=@my-monorepo/web-app

            

              
                Copy
              
            
          

참고: @my-monorepo/ui-components와 @my-monorepo/web-app을 각 package.json 파일에 정의된 실제 패키지 이름으로 대체하십시오. 각 패키지의 package.json 파일에서 name 필드를 이 스코프를 반영하도록 업데이트해야 합니다.

Lerna는 필요한 심볼릭 링크를 자동으로 생성합니다. Yarn Workspaces 또는 npm Workspaces를 사용하고 있다면, 루트 package.json에 workspaces 필드를 구성해야 할 수도 있습니다:

root/package.json
{
  "name": "my-frontend-monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

워크스페이스가 구성되면 Lerna의 `add` 명령은 기본 패키지 관리자의 워크스페이스 연결에 더 의존하여 약간 다르게 동작할 수 있습니다. 루트에서 `yarn install` 또는 `npm install`을 실행하면 워크스페이스가 설정된 경우 연결을 자동으로 처리하는 경우가 많습니다.

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

Lerna는 여러 패키지에 걸쳐 명령을 실행하는 데 탁월합니다. 예를 들어, 모든 패키지를 부트스트랩하려면 (의존성 설치 및 연결):

            lerna bootstrap

            

              
                Copy
              
            
          

각 패키지의 package.json에 정의된 스크립트를 실행하려면 (예: build 스크립트):

            lerna run build

            

              
                Copy
              
            
          

특정 패키지에서 명령을 실행할 수도 있습니다:

            lerna run build --scope=@my-monorepo/web-app

            

              
                Copy
              
            
          

또는 특정 패키지를 제외할 수 있습니다:

            lerna run build --no-private --exclude=@my-monorepo/ui-components

            

              
                Copy
              
            
          

글로벌 팀을 위한 Lerna 고급 기능

기본 기능 외에도 Lerna는 글로벌 개발 팀에 특히 유용한 기능을 제공합니다:

6. 버전 관리 전략

Lerna는 두 가지 주요 버전 관리 전략을 제공합니다:

• 고정 버전 관리(기본): 모노레포의 모든 패키지는 단일 버전을 공유합니다. 버전을 업데이트하면 모든 패키지에 적용됩니다. 이는 패키지 간의 변경 사항이 밀접하게 연결된 프로젝트에 이상적입니다.
• 독립 버전 관리: 각 패키지는 자체 독립적인 버전을 가질 수 있습니다. 이는 패키지가 더 느슨하게 연결되어 있고 다른 시간에 업데이트 및 릴리스될 수 있을 때 유용합니다.

lerna.json에서 이를 구성할 수 있습니다:

            {
  // ... other settings
  "version": "1.0.0" // For fixed versioning
}

            

              
                Copy
              
            
          

또는 독립 버전 관리를 활성화합니다:

            {
  // ... other settings
  "version": "independent"
}

            

              
                Copy
              
            
          

독립 버전 관리를 사용할 때, Lerna는 게시 작업 중에 어떤 패키지가 변경되었고 버전 범핑이 필요한지 지정하도록 프롬프트를 표시합니다.

7. 패키지 게시

Lerna는 npm 또는 다른 레지스트리에 패키지를 게시하는 과정을 간단하게 만듭니다.

먼저, 패키지가 적절한 package.json 파일(이름, 버전, 그리고 비공개 패키지 또는 스코프 패키지를 위한 publishConfig 포함)로 설정되어 있는지 확인하십시오.

업데이트된 모든 패키지를 게시하려면:

            lerna publish

            

              
                Copy
              
            
          

Lerna는 마지막 게시 이후 변경된 패키지를 확인하고, (자동화되지 않은 경우) 버전을 증가시키도록 프롬프트를 표시한 다음 게시합니다. conventional-changelog와 같은 도구를 사용하여 버전 범핑 및 변경 로그 생성을 자동화할 수도 있습니다.

Azure Artifacts, GitHub Packages 또는 Artifactory와 같은 비공개 npm 레지스트리에 게시하는 국제 팀의 경우, CI/CD 파이프라인이 올바른 인증 토큰 및 레지스트리 URL로 구성되어 있는지 확인하십시오.

8. 지속적 통합 및 지속적 배포 (CI/CD)

Lerna를 CI/CD 파이프라인과 통합하는 것은 빌드, 테스트 및 배포를 자동화하는 데 중요합니다.

Lerna 모노레포를 위한 주요 CI/CD 고려 사항:

• 캐싱: 빌드 시간을 단축하기 위해 node_modules 디렉토리와 빌드 아티팩트를 캐시합니다.
• 선택적 빌드: 특정 커밋에서 실제로 변경된 패키지만 빌드하고 테스트하도록 CI를 구성합니다. lerna changed 또는 lerna run --affected와 같은 도구는 변경된 패키지를 식별하는 데 도움이 될 수 있습니다.
• 병렬화: Lerna의 병렬 명령 실행 기능을 활용하여 CI 작업 속도를 높입니다.
• 게시 전략: 특히 독립 버전 관리의 경우 패키지가 언제 어떻게 게시되는지에 대한 명확한 규칙을 정의합니다. Git 태그를 사용하여 게시를 트리거하는 것을 고려하십시오.

CI/CD 워크플로우 스니펫 예시 (개념적):

# ... setup Node.js environment ...

# Install dependencies using the package manager configured in lerna.json
RUN yarn install --frozen-lockfile # or npm ci

# Run linters and tests on changed packages
RUN lerna run lint --stream --affected
RUN lerna run test --stream --affected

# Build packages
RUN lerna run build --stream --affected

# If changes detected and configured to publish, run publish
# Consider using specific GitHub Actions or GitLab CI jobs for publishing
# RUN lerna publish from-git --yes

글로벌 팀의 경우, CI/CD 러너가 지리적으로 분산되어 있거나 중요한 빌드 및 배포 단계에서 지연 시간을 최소화하도록 구성되어 있는지 확인하십시오.

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

Lerna 모노레포의 이점을 극대화하고 글로벌 팀을 위한 원활한 경험을 보장하려면 다음 모범 사례를 고려하십시오:

9. 일관된 명명 규칙

패키지에 일관된 명명 규칙을 채택하십시오. 일반적으로 스코프 이름(예: @my-company/ui-components, @my-company/auth-service)을 사용합니다. 이는 특히 대규모 모노레포에서 명확성과 구성력을 향상시킵니다.

10. 명확한 패키지 경계

모노레포는 코드 공유를 장려하지만, 패키지 간의 명확한 경계를 유지하는 것이 중요합니다. 의도된 설계(예: 기초 라이브러리)가 아닌 한, 한 패키지의 변경이 다른 패키지의 광범위한 변경을 필요로 하는 밀접한 결합을 만들지 마십시오.

11. 중앙 집중식 린팅 및 포맷팅

Lerna를 사용하여 모든 패키지에 걸쳐 일관된 린팅 및 포맷팅 규칙을 적용하십시오. ESLint, Prettier, Stylelint와 같은 도구는 루트 수준에서 구성하고 Lerna 명령을 통해 실행하여 코드 품질 및 균일성을 보장할 수 있습니다.

예시:

            lerna run lint --parallel
lerna run format --parallel

            

              
                Copy
              
            
          

--parallel을 사용하면 여러 패키지에 걸쳐 이러한 작업의 속도를 크게 높일 수 있습니다.

12. 효과적인 테스트 전략

강력한 테스트 전략을 구현하십시오. lerna run test를 사용하여 모든 패키지에 대한 테스트를 실행할 수 있습니다. CI 최적화를 위해서는 변경된 패키지에 대해서만 테스트를 실행하는 데 중점을 두십시오.

애플리케이션에 대한 엔드투엔드(E2E) 테스트와 공유 라이브러리에 대한 단위/통합 테스트 설정을 고려하십시오. 전 세계에 분산된 팀의 경우, 테스트 인프라가 해당되는 경우 잠재적인 네트워크 지연 또는 지역적 차이를 처리할 수 있는지 확인하십시오.

13. 문서화 및 커뮤니케이션

모노레포에서는 명확한 문서화가 가장 중요합니다. 각 패키지에 목적, 사용 방법 및 특정 설정 지침을 설명하는 README가 있는지 확인하십시오. 전체 프로젝트 구조를 설명하고 새로운 기여자에게 지침을 제공하는 중앙 README를 모노레포의 루트에 유지하십시오.

팀원 간의 정기적인 커뮤니케이션, 특히 공유 패키지에 대한 중요한 변경 사항이나 아키텍처 결정과 관련하여, 다른 지역 간의 정렬을 유지하는 데 필수적입니다.

14. 최신 프론트엔드 툴링 활용

최신 프론트엔드 프레임워크와 빌드 도구는 종종 모노레포에 대한 좋은 지원을 제공합니다. 예를 들어:

• Webpack/Vite: 모노레포 내에서 여러 애플리케이션을 효율적으로 번들링하도록 구성할 수 있습니다.
• React/Vue/Angular: 이러한 프레임워크로 구축된 컴포넌트 라이브러리는 쉽게 관리하고 공유할 수 있습니다.
• TypeScript: 패키지 경계를 존중하는 구성으로 모노레포 전체에 걸쳐 타입 안전성을 위해 TypeScript를 사용하십시오.

Turborepo 및 Nx와 같은 도구는 지능형 캐싱 및 원격 실행과 같은 기능을 제공하는 더욱 고급 모노레포 빌드 시스템으로 인기를 얻고 있으며, 특히 대규모 모노레포의 성능을 더욱 향상시킬 수 있습니다.

도전 과제 및 고려 사항

Lerna와 모노레포는 상당한 이점을 제공하지만, 잠재적인 도전 과제를 인지하는 것이 중요합니다:

• 초기 설정 복잡성: 모노레포를 설정하는 것은 개별 저장소로 시작하는 것보다 더 복잡할 수 있으며, 특히 이 개념에 익숙하지 않은 개발자에게 그렇습니다.
• 빌드 시간: 적절한 최적화 없이는 대규모 모노레포의 빌드 시간이 길어질 수 있습니다. Lerna의 병렬 실행을 활용하고 고급 빌드 시스템을 탐색하는 것이 중요합니다.
• 툴링 호환성: 선택한 툴링(린터, 포맷터, 번들러)이 모노레포 구조와 호환되는지 확인하십시오.
• 버전 관리 성능: 광범위한 커밋 히스토리를 가진 매우 큰 모노레포의 경우, Git 작업이 느려질 수 있습니다. 얕은 복제 또는 Git LFS와 같은 전략이 이를 완화하는 데 도움이 될 수 있습니다.
• 학습 곡선: 개발자는 모노레포 워크플로우에 적응하고 Lerna가 패키지 및 종속성을 관리하는 방법을 이해하는 데 시간이 필요할 수 있습니다.

대안 및 보완 도구

Lerna는 강력한 도구이지만, 모노레포 관리를 보완하거나 대안을 제공할 수 있는 다른 솔루션도 존재합니다:

• Yarn Workspaces: 언급했듯이, Yarn의 내장 워크스페이스 기능은 모노레포를 위한 훌륭한 의존성 관리 및 연결 기능을 제공합니다.
• npm Workspaces: npm v7부터 npm도 강력한 워크스페이스 지원을 포함합니다.
• Nx: 의존성 그래프 분석, 지능형 캐싱 및 분산 작업 실행과 같은 고급 기능을 제공하는 모노레포를 위한 매우 독단적인 빌드 시스템으로, 대규모 프로젝트의 빌드 속도 측면에서 Lerna보다 뛰어난 경우가 많습니다.
• Turborepo: Nx와 유사하게, Turborepo는 속도와 효율적인 캐싱에 중점을 둔 JavaScript 모노레포용 고성능 빌드 시스템입니다.

많은 팀이 핵심 모노레포 구조를 위해 Yarn/npm 워크스페이스를 활용하고, 게시 및 버전 관리와 같은 고급 기능을 위해 Lerna (또는 Nx/Turborepo)를 사용합니다.

결론

프론트엔드 Lerna는 JavaScript 모노레포 관리를 위한 강력하고 유연한 솔루션을 제공하며, 특히 전 세계에 분산된 개발 팀에게 효율적인 워크플로우, 간소화된 의존성 관리 및 향상된 코드 공유 기능을 제공합니다. Lerna의 기능을 이해하고 모범 사례를 준수함으로써 개발 프로세스를 간소화하고 코드 품질을 개선하며 혁신을 주도하는 협업 환경을 조성할 수 있습니다.

프로젝트가 복잡해지고 팀이 다른 지역으로 확장됨에 따라 Lerna(또는 보완 도구)가 관리하는 모노레포 전략을 채택하는 것은 전략적 이점이 될 수 있습니다. 이는 보다 응집력 있는 개발 경험을 가능하게 하고, 오버헤드를 줄이며, 궁극적으로 글로벌 팀이 고품질 프론트엔드 애플리케이션을 보다 효과적으로 제공할 수 있도록 합니다.

글로벌 팀을 위한 핵심 요점:

• 표준화: Lerna를 사용하여 일관된 툴링 및 코드 표준을 적용하십시오.
• 협업: 원자적 커밋과 쉬운 코드 공유를 활용하여 더 나은 팀 시너지를 창출하십시오.
• 최적화: 자동화되고 효율적인 빌드 및 배포를 위해 Lerna를 CI/CD와 통합하십시오.
• 소통: 명확한 문서화와 열린 소통 채널을 유지하십시오.

프론트엔드 모노레포를 위한 Lerna를 마스터함으로써, 글로벌 규모에서 팀의 성장과 성공을 지원할 수 있는 확장 가능하고 지속 가능한 개발 인프라에 투자하는 것입니다.