기존에 AI LLM을 활용한 상세 페이지를 만들었는데,
이번에 그 프로젝트를 좀 더 확장하고 새로운 구조를 시도해보고 싶었습니다.
특히, React Native를 공부하면서 단순한 웹뷰(WebView) 수준을 넘어서,
웹과 네이티브를 함께 관리할 수 있는 전문적인 구조를 고민하게 되었는데요.
그 과정에서 자연스럽게 모노레포(Monorepo)에 관심을 가지게 되었습니다.
모노레포란?
이렇게 개발 규모가 커질수록 우리는 여러 앱과 패키지를 함께 관리해야 하는데,
문제는 이것들을 따로 관리하다보면 코드 중복이나 버전 불일치, 의존성 관리 등의 문제가
빈번하게 발생한다는 점입니다.
그래서 이것을 해결하기 위해 여러 프로젝트를
하나의 저장소(Repository) 안에서 관리하는 방식을 모노레포 구조라고 합니다.
모노레포의 기본 구조
모노레포는 하나의 레포 안에 여러 앱과 라이브러리를 함께 관리하는 방식입니다.
my-workspace/
├── apps/
│ ├── web/ # Next.js 웹앱
│ └── native/ # React Native (Expo)
├── packages/
│ ├── ui/ # 공용 UI 컴포넌트
│ ├── store/ # 공용 상태관리 (Zustand 등)
│ ├── api/ # 공용 API 유틸
│ └── types/ # 공용 타입 정의
└── package.json # 루트 패키지 설정
이 예시에서는 Next.js(web)와 React Native(모바일) 프로젝트가 각각 독립적으로 존재하지만,
packages 폴더를 통해 공용으로 사용하는 로직이나 컴포넌트를 한 곳에 모아 관리합니다.
즉, 반복되는 코드를 줄이고, 유지보수성과 버전 일관성을 높일 수 있는 구조임을 알 수 있습니다.
모노레포의 장점
1. 코드 재사용성과 일관성
공용 UI, 상태 관리, 유틸 함수 등을 별도의 공용 패키지로 분리하여
한 번 만든 로직을 여러 프로젝트가 공유해서 사용할 수 있습니다.
2. 단일 버전 및 의존성 관리
모든 패키지가 하나의 package.json 기반으로 관리됩니다.
즉, eslint, prettier, typescript 설정을 루트에서 한 번에 관리할 수 있고,
각 프로젝트 간 버전 충돌이나 설정 불일치를 줄일 수 있습니다.
3. 변경 추적이 용이
하나의 커밋으로 여러 앱의 변경사항을 함께 추적할 수 있습니다.
예를 들어, 공용 컴포넌트의 수정이 웹과 네이티브 양쪽에 어떤 영향을 주는지도
한 눈에 관리할 수 있게 됩니다.