Monorepo

CONTENTS

Monolithic App

1. 정의

2. 장점과 단점

Distributed App

1. multirepo

2. monorepo

2. monorepo
주의사항

3. current build time

Monorepo Tools

1. Yarn workspace

2. Lerna

Lerna vs Turborepo

1. Concurrency vs

Parallelism

2. Size

MFA

1. 정의

2. 구성 방법 (종류)

2. Turborepo

마치며

1. 2023년 기준 비교 표

2. 적합성

Statistic

1. 2022 Monorepo

Tool Statistics

2. 적합성

Monolithic App

1. 정의

What is Monolithic?

Monolithic application이란?
각각의 기능을 개발하여 하나의 앱으로 패키징하여 배포하는 것을 말합니다.

2. 장점과 단점

Monolithic App

1. 쉬운 코드 공유

2. 유지보수 용이

3. 비용없음

1. 기능 개발 병목 현상

2. 에러 확산

3. 기술 부채

Monolithic App

3. Current Build Time

28m 27s

Build Docker
약 50%

Distributed App

1. multirepo

Multirepo

각 모듈들이 고유한 저장소를 갖는 구조를 말합니다.

자율성이 높고 배포, 테스트, 빌드 같은 독립적인 개발과정이 가능합니다.

1. 높은 환경 자율성

2. 각 Repository별 빠른 CI Build

3. 유연성 향상으로 인한 추가, 수정, 유지 관리 용이

4. 독립적인 구조

장점 4가지

Distributed App

1. multirepo

1. 번거로운 프로젝트 생성

2. 공용 모듈(패키지) 중복 현상

3. 관리 포인트 증가

4. 고립된 구조

단점 4가지

Distributed App

1. multirepo

Monorepo

monorepo란?

하나의 저장소 안에 다수의 분리된 패키지(app) 구조를 말합니다.

Distributed App

2. monorepo

1. 새 프로젝트 생성 용이

2. 효율적인 의존성 관리

3. 공통 항목 단일화

4. CI 단일 구성 가능

장점 4가지

Distributed App

2. monorepo

1. repository 거대화

2. 느린 CI Build Time

3. 무분별한 의존성

단점 3가지

Distributed App

3. Monorepo 주의 사항

Management

Speed

Structure

관리

속도

구조 파악

핵심 기준

1 코드 공유
서로 다른 프로젝트 간에 소스 코드를 공유할 수 있어야 합니다.

2 일관성 있는 도구
서로 다른 프레임워크를 사용하더라도 일관된 개발 경험을 제공해야
합니다.

3 스케폴딩
새로운 프로젝트를 생성할 때 초기 코드를 쉽게 생성이 가능해야 합니다.

4 프로젝트 제약 및 가시성(visibility)
저장소 내에서 의존 관계를 제한하는 규칙 정의 지원되어야 합니다.

관리

Distributed App

3. Monorepo 주의 사항

1 로컬 캐싱
같은 머신에서 같은 것을 두 번 빌드하거나 테스트하지 않아야 합니다.

2 분산 캐싱
다양한 환경에서 캐시 아티팩트를 공유할 수 있어야 합니다.

3 로컬 작업 오케스트레이션
빌드 및 테스트 등의 작업을 순서에 맞게 병렬로 실행되어야 합니다.

4 분산 작업 실행
저장소 내에서 의존 관계를 제한하는 규칙 정의 지원되어야 합니다.

5 변화에 영향을 받는 프로젝트 감지
변경의 영향을 받을 수 있는 항목을 결정하여 영향을 받는 프로젝트만
빌드 및 테스트 할 수 있어야 합니다.

속도

Distributed App

3. Monorepo 주의 사항

1 워크스페이스 분석
추가 구성 없이 주어진 워크스페이스의 의존성 관계를 분석할 수 있어야
합니다.

2 의존성 그래프 시각화
프로젝트 및 작업 간의 종속 관계를 시각화할 수 있어야합니다.

속도

Distributed App

3. Monorepo 주의 사항

Distributed App

무조건 모노레포를 사용해야할까?

No!

It's Not Required!

MFA

1. 정의

Micro Frontend Architecture

Frontend에서 각각 담당하는 비즈니스 영역을
모듈화하는 것을 말합니다.

MFA

3. monorepo 주의 사항

Build Time!

Server

Template

Build Time

iframe

Run-time

JS Run-time

Monorepo Tools

1. Yarn workspaces

Tool 1

Monorepo Tools

1. Yarn workspaces

1. 브랜치 간 설치 파일 공유

2. CI 의존성 설치 시간 단축

장점 2가지

1. 일관성 없는 도구

2. 스캐폴딩 불가

3. 분산 캐싱 불가

4. 변화 감지 불가

단점 4가지

Yarn Berry workspace

directory Structure

* YARN-BERRY-MONOREPO
  ├ .yarn
  ├ .gitignore
  ├ .yarnrc.yml
  ├ package.json
  └ yarn.lock

Monorepo Tools

1. Yarn workspaces

Monorepo Tools

2. Lerna

Tool 2

Monorepo Tools

2. Lerna

Tool 2

약 1-2년 간의 잠수

Lerna는 Nx가 2022년 5월에 인수하면서 다시 개발을 시작

~~(가만 안둬..)~~

Monorepo Tools

2. Lerna

Monorepo Tools

2. Lerna - Legacy

18m 56s

Build Docker
약 61%

Monorepo Tools

2. Lerna - Cache

lerna first build

Monorepo Tools

2. Lerna - Cache

lerna cached build

Lerna v6

init Directory Structure

* LERNA-MONOREPO
  ├ packages
  ├ .gitignore
  ├ lerna.json
  └ package.json

Monorepo Tools

2. Lerna

Monorepo Tools

3. Turborepo

Tool 3

1. 증분 빌드(Incremental builds)

2. Content-aware hasing

3. Cloud caching

4. 병렬 처리 기법을 통한 빌드 성능 향상
(Parallel execution)

장점 9가지

Monorepo Tools

3. Turborepo

5. 쉬운 Pipeline 설정(Task Pipelines)

6. Zero Runtime Overhead

7. Pruned subsets

8. JSON configuration

9. Profile in browser

장점 9가지

Monorepo Tools

3. Turborepo

Turborepo

Directory Structure

* TURBO-MONOREPO
  ├ apps // service application
  ├ packages // ui, config packages
  ├ .gitignore
  ├ package.json
  └ turbo.json

Monorepo Tools

npx create-turbo@latest <PACKAGE_NAME>

3. Turborepo

Monorepo Tools

Turborepo

Directory Structure

3. Turborepo

Monorepo Tools

Turborepo

turbo run dev

3. Turborepo

Cache

Turborepo의 핵심 컨셉은 캐싱입니다.
이미 계산한 것은 다시 계산하지 않는다는 것을 뜻합니다.

Monorepo Tools

3. Turborepo

1 first turbo run build

Cache 과정

Monorepo Tools

3. Turborepo

2 all apps/* has been cached:turbo run build

Cache 과정

Monorepo Tools

3. Turborepo

3 apps/web page 수정후 turbo run build

Cache 과정

Monorepo Tools

3. Turborepo

4 apps/web have been cached:turbo run build

Cache 과정

Monorepo Tools

3. Turborepo

Monorepo Tools

캐싱 저장 원리

3. Turborepo

의존성 그래프 시각화

brew install graphviz
turbo run build --graph
turbo run build test lint --graph=my-graph.png

Monorepo Tools

3. Turborepo

lerna vs turbo

1. Cached build time 비교

차이점 1

Cached Build Time

lerna vs turbo

1. Cached build time 비교

11s vs 350ms

Lerna v6

Turborepo

lerna vs turbo

2. Concurrency vs Parallelism

차이점 2

Concurrency vs Parallelism

Concurrency? Parallelism?

lerna vs turbo

2. Concurrency vs Parallelism

lerna vs turbo

2. Concurrency vs Parallelism

1 동시에 실행되는 것처럼 보이는 것

2 논리적인 개념

3 싱글코어, 멀티코어에서 가능

Concurrency
(동시성)

1 실제로 동시에 실행되는 것

2 물리적인 개념

3 멀티코어에서만 가능

Parallelism
(병렬성)

lerna vs turbo

2. Concurrency vs Parallelism

Statistic

statistic

1. 2022 Monorepo Tool Statistics

statistic

1. 2022 Monorepo Tool Statistics

마치며

1. 2023년 기준 비교 표

마치며

1. 2023년 기준 비교 표

Monorepo

Monolithic App

28m 27s

Distributed App

No!

It's Not Required!

MFA

Monorepo Tools

18m 56s

lerna vs turbo

Cached Build Time

11s vs 350ms

Concurrency vs Parallelism

Statistic

마치며

Q&A

Monorepo

Monorepo

WJ L

Monorepo

Monolithic App

28m 27s

Distributed App

No!

It's Not Required!

MFA

Monorepo Tools

18m 56s

lerna vs turbo

Cached Build Time

11s vs 350ms

Concurrency vs Parallelism

Statistic

마치며

Q&A

Monorepo

More from WJ L