[매일매일] 프론트엔드 기술 일기: 모노레포(Monorepo) 개념과 활용 정리

오늘은 프론트엔드에서 점점 더 중요해지고 있는 모노레포(Monorepo) 개념에 대해 정리해본다. 최근 팀 프로젝트나 규모가 커진 프론트엔드 시스템에서 점점 더 많이 활용되고 있어, 실무와 면접 모두에서 유용하게 쓰일 개념이다.

🧩 모노레포란?Monorepo = Mono(단일) + Repo(저장소)모노레포는 여러 개의 프로젝트(또는 패키지)를 하나의 Git 저장소에서 함께 관리하는 방식이다. 예를 들어 admin, landing, mobile, shared-ui처럼 여러 앱과 공통 패키지를 하나의 저장소에서 구조적으로 나누어 관리하는 방식이다.

🏗️ 구성 방식 요약앱 단위 분리: apps/ 폴더 안에 각 프로젝트를 위치시켜 분리한다.공통 모듈 공유: packages/나 libs/ 폴더에 유틸, 공통 컴포넌트 등을 관리하고 각 앱에서 재사용한다.워크스페이스 활용: yarn workspaces, npm workspaces, pnpm workspace를 통해 의존성을 루트에서 관리하며 중복 제거 및 빌드 최적화가 가능하다.

my-monorepo/ ├── apps/ │ ├── frontend/ │ └── admin/ ├── packages/ │ ├── ui/ │ └── utils/ ├── package.json ├── turbo.json or nx.json

✅ 장점 정리코드 일관성 유지: ESLint, Prettier, tsconfig 등 설정을 통일해서 관리 가능공통 모듈 재사용: 한 번 작성한 유틸/컴포넌트를 여러 프로젝트에 반영 가능버전 관리 최적화: Git 히스토리로 어느 변경이 어떤 프로젝트에 영향을 줬는지 추적 가능CI/CD 속도 개선: 변경된 프로젝트만 빌드하거나 테스트하도록 구성 가능 (Turborepo, Nx 등 사용 시)

⚠️ 단점 및 주의점스케일링 복잡성: 프로젝트가 많아질수록 빌드 및 테스트 시간이 길어질 수 있음권한 관리 어려움: 저장소 단위로 권한을 설정하므로 프로젝트별 접근 제한이 어려움소규모에는 과한 구조: 단일 프로젝트 또는 소규모 팀에서는 오히려 비효율적일 수 있음

🛠️ 모노레포 관리 툴

툴 이름

특징

Turborepo

빠른 캐싱, 병렬 빌드, Vercel 제작

Nx

다양한 프레임워크 지원, Graph 시각화 기능

Lerna

오래된 툴, 요즘은 보조 도구로 사용

💡 실무와 면접에서 활용하기

“왜 모노레포를 선택하셨나요?”라는 질문이 자주 등장함

예시 답변

“여러 앱과 공통 UI를 재사용하는 프로젝트에서, 공통 컴포넌트 수정 시 각 앱에 동기화하는 게 비효율적이었습니다. 그래서 모노레포 구조로 변경했고, yarn workspace를 통해 의존성을 통합 관리하면서 유지보수가 훨씬 쉬워졌습니다.”

📚 참고 자료 및 출처https://medium.com/hcleedev/dev-monorepo-%EA%B0%9C%EB%85%90-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-33fd3ce2b767

Dev: MonoRepo 개념 알아보기 여러 프로젝트를 한 레포지토리에서 관리하는 MonoRepo의 개념과 그 장단점에 대해 알아보자 medium.com

https://fromundefined.com/posts/2022-08-ultimate-monorepo/

궁극의 JavaScript 모노레포 설정 - fromundefined by Tony 제가 정착한 궁극의 JavaScript 모노레포 설정에 대해서 소개합니다. fromundefined.com

https://fastcampus.co.kr/story_article_newfefinal

주니어 프론트엔드 개발자라면 놓치지 말아야 할 모노레포에 대해 알아보자 | 패스트캠퍼스 프론트엔드 개발이 날이 갈수록 빠르게 발전하면서 다양한 기술과 접근법이 등장하고 있습니다. 그 중 최근 가장 주목받는 트렌드인 ‘모노레포(Monorepo)’에 대해 알아보고, 모노레포의 가장 효과적인 공부 방법에 대해 알아봅시다. fastcampus.co.kr

​