Next.js v13
Error Handling
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
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
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
MFA
1. 정의
Micro Frontend Architecture
Frontend에서 각각 담당하는 비즈니스 영역을
모듈화하는 것을 말합니다.
MFA
3. monorepo 주의 사항
Build Time!
Server
Template
Build Time
iframe
Run-time
JS Run-time
Monorepo Tools
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
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년 기준 비교 표
Q&A
Copy of Monorepo
By WJ L
Copy of Monorepo
- 9