[Vite ] 모노레포 설정

1. 프로젝트 개요

목표

• 하나의 루트 프로젝트에서 여러 애플리케이션을 관리하는 모노레포를 설정합니다.
• Vite와 Yarn Workspaces를 사용하여 다음 프로젝트를 만듭니다:
  • app-main: localhost:3000 (메인 애플리케이션)
  • app-notice: localhost:4000 (Notice 애플리케이션)

기술 스택

• Vite: 빠르고 가벼운 프론트엔드 빌드 도구
• Yarn Workspaces: 여러 패키지를 하나의 리포지토리에서 관리
• TypeScript: 정적 타입 검사 및 개발 효율성 향상

---

2. 프로젝트 초기화

설명

모노레포를 관리할 최상위 디렉토리를 생성하고 Yarn Workspaces를 설정합니다.

실행

1. 루트 디렉토리 생성:
2. mkdir frontend-monorepo cd frontend-monorepo
3. Yarn 초기화:
4. yarn init -y
5. Workspaces 설정:
   package.json을 수정하여 Workspaces를 활성화합니다.

    {
      "private": true,
      "workspaces": [
        "packages/*"
      ]
    }
   

6. frontend-monorepo/package.json:
7. packages 폴더 생성:
8. mkdir packages

---

3. 메인 프로젝트 (app-main) 생성

설명

Vite를 사용해 첫 번째 애플리케이션을 생성하고 설정합니다.

실행

1. Vite 프로젝트 생성:
2. cd packages yarn create vite app-main --template react-ts
3. 의존성 설치:
4. cd app-main yarn
5. 서버 포트 설정:
   vite.config.ts를 수정하여 포트를 3000으로 설정합니다.

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
   
    export default defineConfig({
      plugins: [react()],
      server: {
        port: 3000,
      },
    })
   

6. packages/app-main/vite.config.ts:
7. 서버 실행 확인:결과: 브라우저에서 http://localhost:3000 확인
8. yarn dev

---

4. 서브 프로젝트 (app-notice) 생성

설명

두 번째 프로젝트를 app-notice로 생성하고 포트를 4000으로 설정합니다.

실행

1. Vite 프로젝트 생성:
2. cd ../ yarn create vite app-notice --template react-ts
3. 의존성 설치:
4. cd app-notice yarn
5. 서버 포트 설정:
   vite.config.ts를 수정하여 포트를 4000으로 설정합니다.

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
   
    export default defineConfig({
      plugins: [react()],
      server: {
        port: 4000,
      },
    })
   

6. packages/app-notice/vite.config.ts:
7. 서버 실행 확인:결과: 브라우저에서 http://localhost:4000 확인
8. yarn dev

---

5. 공통 의존성 설치 및 관리

설명

Yarn Workspaces는 공통 의존성을 루트 node_modules에 저장하고 각 프로젝트에서 이를 공유합니다.

실행

1. 루트에서 의존성 설치:
2. cd ../../ yarn
3. 워크스페이스를 통해 각 프로젝트 실행:
   • app-main 실행:
   • yarn workspace app-main dev
   • app-notice 실행:
   • yarn workspace app-notice dev

---

6. 최종 구조

디렉토리 구조

frontend-monorepo/
├── package.json             # Yarn Workspaces 설정
├── yarn.lock                # 전체 의존성 관리
├── node_modules/            # 공통 의존성
├── packages/
│   ├── app-main/            # 메인 프로젝트
│   │   ├── public/
│   │   ├── src/
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   └── vite.config.ts
│   └── app-notice/          # Notice 프로젝트
│       ├── public/
│       ├── src/
│       ├── package.json
│       ├── tsconfig.json
│       └── vite.config.ts

---

7. 결론

결과

1. localhost:3000 → app-main 실행
2. localhost:4000 → app-notice 실행
3. 공통 node_modules → 루트에서 의존성 관리

모노레포의 장점

• 공통 설정 및 의존성 공유로 용량 절약
• 애플리케이션 코드의 분리로 유지보수 용이
• 독립적 개발 및 빌드 가능

---