패키지 전략 모노레포(Monorepo) 알아보기

모노레포가 등장하게 된 배경에 대해서 정리해볼 필요가 생겨서 글을 작성하게 되었습니다.

 

모노레포의 등장 배경, 모노레포 도구, 참고 블로그, 시작하기 위한 지식을 습득할 수 있습니다.

 

 

1. Repository Strategy

 

Git을 통한 레포지터리 구성 전략은 크게 3가지로 나누어 볼 수 있습니다.

 

http://dsparch.sciomagelab.com/2022/03/12/monorepo-vs-multirepo/

 

https://levelup.gitconnected.com/moving-from-multiple-repositories-to-a-lerna-js-mono-repo-faa97aeee35b

 

 

1-1. Monolith

 

1) 한 레포지터리 내에 모듈화 없이 모든 서비스(프론트, 백엔드 등)가 들어가 있는 것

 

2) 관심사의 분리(separation of concerns)가 되어있지 않음

 

=> 모듈화를 통해 한계 해결 => 멀티레포 등장

 

 

1-2. MultiRepo (= Polyrepo)

일반적인 프로젝트 레포지터리 구성, 서비스 단위로 레포지터리를 생성해서 코드를 관리하는 방식

 

 

1-2-1. 장점

 

1) 팀의 자율성 보장 (레포지터리 별로 라이브러리 버전 관리, 각자 CI/CD 파이프라인 존재, 각종 설정)

 

2) 권한, 책임이 명확하다

 

 

1-2-2. 단점

 

1) 독립성이 강해서 프로젝트를 하나 만들때마다 각자 설정을 구축해야 한다

 

2) 저장소 생성 > 커미터 추가 > 개발 환경 구축 > CI/CD 구축 > 빌드 > 패키지 저장소에 publish

 

3) 패키지의 중복 코드 가능성

 

4) 일관성 없는 개발자 경험 (린트, 빌드, 테스트, 배포 설정을 기억해야함)

 

 

1-2-3. 예시

 

ex) admin repositories

A 레포지터리 | A-service-admin

B 레포지터리 | B-service-admin

C 레포지터리 | C-service-admin

공통 UI 레포지터리 | Admin-UI-service

 

 

=> 각 서비스 별로 레포지터리를 생성해야하며 공통 관리 UI 도 필요하다면 총 4개의 레포지터리가 필요함

 

 

1-3. MonoRepo

두 개 이상의 프로젝트가 동일한 저장소에 저장되는 방식 (+ 패키지간 독립성 보장)

 

 

1-3-1. 장점

 

1) 새로운 프로젝트를 만들기 쉽다 (설정을 공유함)

 

2) 패키지 별로 독립적인 커밋, 배포 환경을 구성 할 수 있음

 

3) 비슷한 방식으로 배포, 테스팅, 설정을 공유하기 때문에 일관된 개발 경험 가능 (개발 방법 표준화)

 

 

1-3-2. 단점

 

1) 멀티레포보다 빌드 시간이 느려짐

 

2) 잘못된 커밋이 전체 코드에 영향을 미칠 수 있음 (공통 컴포넌트 수정 → 사이드이펙트)

 

3) 코드량과 복잡도가 계속 쌓여서 프로젝트 적응하는데 러닝커브가 있음

 

 

1-3-3. 예시

Monorepo (lerna + yarn workspace)

 

ex) admin repository

packages
    | A-service-admin
    | B-service-admin
    | C-service-admin
    | admin-ui (A + B + C 공통 컴포넌트 정의)

 

=> 레포지터리 하나에 4개의 서비스를 생성할 수 있고 한 곳에서 관리/배포 할 수 있다.

 

 

 

2. Monorepo

 

2-1. 모노레포 사용 현황

실제 기업들의 레포지터리 사용 전략

 

https://monorepo.tools/

 

 

2-2. 모노레포 구축 툴 종류

https://2021.stateofjs.com/en-US/libraries/monorepo-tools/

 

- 사용도 (정보, 커뮤니티 있을 확률이 높음) : Lerna > pnpm > Nx > Turbo

- 만족도 (다시 사용하고 싶은 정도) : pnpm > Turbo > Nx > Lerna

 

 

2-3. Features (Lerna)

 

1) Local task orchestration : 병렬적으로 각 패키지 별로 작업 수행 가능

 

2) Detecting affected products/packages : 빌드나 테스트 할 때 영향 받는 패키지만 설정 가능

 

 

더 많은 정보는 하단 링크 참고

Monorepo Explained

 

 

3. Why lerna?

 

Nwrl(Nx) 가 Lerna를 인수해서 Nx와 Lerna는 같다고 보면됩니다. (v5.0 이상부터)

 

 

1) Super Fast : 빌드시간이 turbo와 비교 했을 때 굉장히 빠르다

 

2) Computation Caching : 이전에 빌드한 내용을 캐시해서 불필요하게 여러번 빌드하지 않습니다.

 

3) Configuration-Free Distributed Task Execution :

 

4) Powerful Graph Visualizer : 패키지간 연관성을 그래프로 나타내줌 npx nx graph

 

5) Easy to Adopt : 적용하기 쉬움

 

 

4. Getting Started

 

4-1. 시작하기 전에

 

lerna + yarn workspace 조합

 

 

예제 디렉토리 구조

| packages
    | frontend
    | backend
    | base-ui (storybook)

 

 

* 모노레포 연습 레포지터리 링크

 

GitHub - lerna/getting-started-example: This repo is a small example of using Lerna 5+.

 

- tdd-node-app 디렉터리

GitHub - canoe726/YoungKim_Javascript: 모든 프론트엔드 웹개발 지식 모음

 

 

4-2. 시작 명령어

npx lerna init
# yarn set version berry (v3.x.x 이상)
# yarn install
# yarn dlx @yarnpkg/sdks vscode
# cd packages
# npx create-react-app service1 --template typescript
# npx create-next-app@latest --ts (service2)
# npx create-react-app ent_ui --template typescript
npx lerna@latest init

 

 

4-3. 명령어

yarn workspace [패키지명] 명령어

 

ex1) yarn workspace @app/frontend start

 

ex2) yarn add lodash

 

ex3) yarn workspace @app/backend build

 

패키지명 → package.json > name 속성 수정

 

 

4-4. 공통 UI 컴포넌트 사용

// packages/frontend/src/App.tsx
import React from "react";
import { Button } from "@app/base_ui/src/components/Button";
import "./styles/global.css";

const Header = () => {
  return (
    <div className="px-[2rem] h-[6.4rem] flex justify-between items-center bg-slate-300">
      <div className="text-[2.4rem]">Logo</div>

      <div className="">
        <p>Interface</p>

        <Button
          primary={true}
          label='Button'
        ></Button>
      </div>
    </div>
  );
};
...

 

 

5. Deep Dive…

 

더 많은 정보와 실제 프로젝트에 적용하는 것은 공식문서를 참고하시면 됩니다.

 

Introduction | Lerna

 

 

 

- Monorepo에 대해서 더 알고 싶다면?

 

1. wanted lab

Lerna와 Yarn workspaces를 활용한 패키지 관리

 

2. naver d2

https://d2.naver.com/helloworld/7553804#ch2https://d2.naver.com/helloworld/0923884

 

3. 공식 문서

GitHub - lerna/lerna: Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages f

 

4. Git multirepo vs monorepo

Git Multi Repo vs Git Mono Repo: Which Should You Choose?