Monorepo 구조 설정: Turborepo를 사용한 웹, API, React Native 프로젝트 구성

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

DevOps

대상자

- 프론트엔드/백엔드 개발자: Monorepo 환경에서 여러 프로젝트를 관리하는 방법

- 난이도: 중급 (패키지 관리자, 빌드 도구, 프레임워크 기초 이해 필요)

핵심 요약

• Turborepo와 pnpm을 사용하여 Monorepo 구조를 설정함
• Vite + React로 웹 앱, Express로 백엔드 API, React Native로 모바일 앱 구성
• pnpm dev 명령어로 모든 서비스 병렬 실행 가능 (포트 5173, 3001, React Native 기본 설정)

섹션별 세부 요약

1. Monorepo 초기 설정

• Turborepo 템플릿 사용: pnpm dlx create-turbo@latest -e with-vite-react
• pnpm을 패키지 관리자로 선택 (yarn, Bun 미설치 시)
• 생성된 기본 구조: apps/ 폴더 내 web 앱, packages/ 내 eslint-config, typescript-config, ui 공유 패키지

2. 웹 앱 (Vite + React) 구축

• Vite Starter로 웹 앱 생성: pnpm create vite → apps/website 폴더 생성
• React + TypeScript 선택 후 pnpm install 및 pnpm dev 실행 (포트 5173에서 서비스)

3. 백엔드 API (Express) 구축

• apps/api 폴더 생성 후 pnpm init, express 및 nodemon 설치
• index.js 파일에 기본 Express 서버 코드 작성 (포트 3001에서 실행)
• package.json에 "dev": "nodemon index.js" 스크립트 추가

4. React Native 앱 구성

• cd apps 후 pnpm dlx @react-native-community/cli@latest init mobileApp 실행
• CocoaPods 설치 여부 선택 (iOS 프로젝트 실행을 위해 "yes" 선택)
• 생성된 apps/mobileApp 폴더에 React Native 기본 파일 구조 포함

결론

• Turborepo는 복수 프로젝트 관리 및 코드 공유 효율성 향상에 유리
• pnpm dev 명령어로 모든 서비스 병렬 실행 가능 (포트별 서비스 분리)
• React Native 앱은 @react-native-community/cli 템플릿을 기반으로 생성 권장