모노레포 (Monorepo) 이해하기 - 프론트엔드에서의 활용 1편

 

최근 들어 여러 채용 공고를 살펴보면, 우대사항에 '모노레포 사용 경험'이 포함된 경우를 심심치 않게 찾아볼 수 있다.

이는 개발자들 사이에서 모노레포가 하나의 트렌드로 자리잡고 있다.

 

사실 프론트엔드는 백엔드에 비해 코드 수명이 짧다고 알려져 있으며,  대부분의 경우 단일 프로젝트만 존재하는 것이 아니라 여러 프로젝트를 병행하게 된다. 그러나 각 프로젝트를 다른 환경과 구성으로 관리하다 보면 개발자 경험(Developer Experience, DX)이 떨어지고, 새로 합류한 개발자들에게 진입 장벽이 높아질 수 있다.

 

그치만 이를 잘 설계하고 탄탄하게 작성을 하면 그래도 조금은 늘어나지 않을까라는 생각을 해보며 모노레포에 대해 글을 작성해본다.

 

---

 

1. 모노레포란?

모노레포 (Monorepo) 는 쉽게 설명하면 하나의 Git 레포지토리 안에서 여러 서비스,패키지,라이브러리를 동시에 적용하는 방식

 

예를 들어, 웹앱,모바일 앱 을 운영한다했을때 하나의 레포지토리에서 공통된 디자인 시스템,라이브러리를 사용 가능한 방식

 

* 모노레포는 하나의 레포로 관리할수 있다라는 개념이기에, 서비스 성격 혹은 규모에 구애 받지 않음

 

 

1-1 멀티레포란?

멀티레포 (Multirepo) 는 독립적인 Git 레포지토리로 각 서비스를 관리하는 방식

 

예를 들어, 웹앱, 앱 운영 시 2개의 레포로 각각의 독립적인 서비스 관리 방식

 

 

1-2.  등장 배경

• 프로젝트가 커지고, 여러 패키지를 동시에 관리해야하는 요구가 생김
• 공통 코드를 여러 앱에서 공유해야하는 니즈
• 배포 및 테스트 파이프라인 통합 필요
• 기존 멀티레포 방식에서는 의존성,버전 관리, 빌드 관리 복잡

 

---

2. 기존 멀티레포와의 차이

멀티레포 (Multirepo)

• 서비스별로 각각 Git 레포지토리를 운영
• 독립적 개발과 배포 가능
• 코드 공유 어려움, 버전 호환성 각각 직접 관리 필요, 배포 설정이 레포별 분리

 

모노레포 (Monorepo)

• 모든 서비스와 패키지를 하나의 Git 레포지토리에서 운영
• 코드 공유 용이, 패키지 동기화 쉬움, 배포 설정 통합 가능
• 레포가 커질수록 빌드/테스트 난이도 증가, 접근 권한 세분화 어려움

 

항목	모노레포 (Mono)	멀티레포(Mulit)
코드 공유	쉬움	어려움
배포	통합 가능	서비스별 설정 필요
버전 관리	패키지 동기화	서비스별 설정 필요
접근 권한	제한 어려움	가능
빌드 속도	대규모라면 느려질 수 있음	서비스 크기에 따라 빠름
의존성 관리	통합 관리	직접 관리 필요

 

 

---

 

3. 모노레포 관리 도구

 

모노레포를 제대로 운영하려면 Package Manager 및 모노레포 빌드 시스템 도구가 필요

 

3-1. Package Manager

npm

• Node.js 기본 package manager , npm 7부터 workspaces 기능 지원
• workspaces를 통해 모노레포 관리 가능
• 별도 설치 필요 없음

 

yarn

• npm 대체 패키지 매니저, workspaces 및 pnp 기능 지원
• 의존성 중복 제거, 캐시 기능, 병렬 설치
• 속도 개선, 멀티/모노레포 가능, 안정적

 

pnpm

• 하드링크 기반 패키지 매니저, workspaces 지원
• node_modules를 공유 저장, 디스크 절약, 빠른 설치
• 대규모 모노레포에 최적, 공통 의존성 관리 편리, 속도 및 공간 효율
• 초기 설정 복잡, 일부 레거시 도구 호환성 제한

 

* yarn이 npm에 비해 속도나 보안이 더 낫다고 알려져 있었으나 요즘은 충분히 안전하고 빠르다고 한다.

 

 

3-2. build tools

Bazel

• 구글에서 개발한 모노레포 도구
• 다양한 언어 지원 및 build graph 기반
• 대규모 프로젝트에서 확장성 우수 , 언어 혼합 가능
• 초기 설정 복잡, 러닝 커브 높음

 

Turborepo

• vercel에서 개발,운영 중
• 최신 js/Ts 최적화, 병렬 빌드 ,캐싱
• 빠른 빌드, 프론트엔드 모노레포 최적화

 

Nx

• 세가지 주요 프론트엔드 프레임워크 지원 (vue,react,angular)
• 백엔드 프레임워크 지원 (express,Next,Nest)
• 캐싱, 병렬 빌드
• 대규모 프로젝트 최적화 , CI/CD 효율 증가