[프로젝트] Turborepo로 모노레포 구성하기/ 내 프로젝트의 방향과 선택한 기술 스택

 앞으로 진행할 프로젝트 개요

최근 나는 오픈소스 프로젝트를 진행하면서 여러 개의 패키지를 함께 관리해야 하는 상황에 놓였다. 이 프로젝트에서는 다음과 같은 요소들을 포함할 계획이다:

1. 스크립트 오픈소스 (script-lib)
   • HTML에서 <script> 태그로 간편하게 사용 가능한 라이브러리
   • 번들링하여 CDN 배포 가능
2. React 라이브러리 오픈소스 (react-lib)
   • 재사용 가능한 React 컴포넌트
   • 다양한 환경에서 활용할 수 있도록 번들링
3. 퍼블릭 사이트 (docs)
   • Next.js 기반의 문서 및 데모 페이지 (SSR 지원)
   • 오픈소스를 소개하고 가이드 제공
4. 백엔드 서버 (backend)
   • Python 기반 Flask API 서버
   • 컨테이너화하여 실행
5. 기본 설정 패키지 (eslint-config, typescript-config, ui)
   • eslint-config: 프로젝트 전반의 코드 스타일 및 린팅 규칙 관리
   • typescript-config: 일관된 TypeScript 설정을 위한 패키지
   • ui: 공통 UI 컴포넌트를 관리하는 패키지

이 프로젝트를 한 곳에서 관리하고, 개발 속도를 높이기 위해 모노레포(Monorepo) 방식을 도입하기로 했다. 또한, 이 모노레포 내에서 패키지를 빌드하고 내부 레포 안에서 의존성으로 설치하여 사용해보려 한다.

---

💡 폴더 구조

최종적인 모노레포 폴더 구조는 다음과 같다:

/repo-root
 ├── apps
 │    ├── docs (Next.js - 오픈소스 소개 사이트, SSR 지원)
 │
 ├── packages
 │    ├── script-lib (JS/CSS 스크립트 오픈소스)
 │    ├── react-lib (React 컴포넌트 오픈소스)
 │    ├── eslint-config (ESLint 설정 공유 패키지)
 │    ├── typescript-config (TS 설정 공유 패키지)
 │    ├── ui (공통 UI 컴포넌트 패키지)
 │
 ├── backend
 │    ├── api (Python Flask 서버)
 │    ├── Dockerfile
 │
 ├── turbo.json
 ├── package.json
 ├── tsconfig.json
 ├── docker-compose.dev.yml
 ├── docker-compose.prod.yml

• apps/docs → Next.js 기반의 SSR 문서 사이트
• packages/ → 배포할 오픈소스 라이브러리들 (JS 라이브러리 + React 라이브러리)
• backend/api → Python 기반 Flask 서버 (컨테이너 실행)
• packages/eslint-config → 모노레포 전반에서 공통 ESLint 설정 적용
• packages/typescript-config → 모든 TypeScript 프로젝트에서 공통 설정 사용
• packages/ui → 여러 프로젝트에서 재사용할 공통 UI 컴포넌트 관리
• 각 패키지를 빌드하여 내부 레포에서 의존성으로 설치 후 테스트 가능
• 개발 환경과 배포 환경을 분리한 Docker Compose 설정 추가

---

Docker 개발 환경 설정

Docker를 활용하여 로컬 개발 환경에서도 쉽게 실행할 수 있도록 docker-compose.dev.yml을 구성한다.

개발 환경을 위한 docker-compose.dev.yml

version: '3.8'
services:
  web:
    build: ./apps/docs
    ports:
      - "3000:3000"
    volumes:
      - ./apps/docs:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
    depends_on:
      - api
  api:
    build: ./backend/api
    ports:
      - "8000:8000"
    volumes:
      - ./backend/api:/app
    environment:
      - FLASK_ENV=development

 

배포용 docker-compose.prod.yml

version: '3.8'
services:
  web:
    build:
      context: ./apps/docs
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    depends_on:
      - api
  api:
    build:
      context: ./backend/api
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    environment:
      - FLASK_ENV=production

 

개발 환경 실행 명령어

docker-compose -f docker-compose.dev.yml up --build

배포 환경 실행 명령어

docker-compose -f docker-compose.prod.yml up --build -d

이제 개발 환경에서는 코드 변경이 있을 때마다 컨테이너가 즉시 반영되며, 배포 시에는 최적화된 이미지를 사용할 수 있다.

---

 앞으로 할 일

1. Turborepo 및 pnpm 세팅 완료
2. 각 패키지 (script-lib, react-lib) 빌드 및 번들링 테스트
3. Next.js 기반 퍼블릭 사이트 (docs) 개발 및 SSR 지원
4. 백엔드 서버 (backend/api) 개발 및 컨테이너화
5. Docker 개발 환경 (docker-compose.dev.yml) 구축 완료
6. GitHub Actions를 활용한 CI/CD 자동화 (패키지 빌드 + 배포)
7. 서버 배포 환경 구성 (docker-compose.prod.yml)
8. 공통 ESLint 및 TypeScript 설정 패키지 (eslint-config, typescript-config) 정리
9. 공통 UI 컴포넌트 패키지 (ui) 개발 및 활용

모노레포로 전환하면서 얻을 수 있는 장점이 많기 때문에, 앞으로의 개발이 훨씬 효율적일 것으로 기대된다. 이제 본격적으로 개발을 진행해보자! 


앞으로 활용할 사이트

 

https://www.freecodecamp.org/news/how-to-create-and-publish-your-first-npm-package/

How to Create and Publish an NPM Package – a Step-by-Step Guide

https://dashboard.render.com/web/new?newUser=true

Cloud Application Hosting for Developers | Render

https://turbo.build/repo/docs/guides/tools/docker

Docker | Turborepo

https://alraffe.hashnode.dev/nextjs-fsd

Next.js+fsd