모노레포(Monorepo)

멀티레포란?

• 여러 저장소를 관리하는 방식
• 독립된 애플리케이션이나 다른 프로젝트와 직접적인 종속성이 없음
• 코드 재사용이 쉽지 않아 중복 코드 사용의 가능성이 높음
• 버전 연동 깨질 가능성이 있음

 

 

모노레포란?

• 하나의 저장소에서 여러 개의 프로젝트를 관리하는 방식
• NPM 배포 없이 프로젝트 간의 코드 공유가 가능
• 통합된 버전 관리
• 코드 공유와 재사용 용이
• 무분별한 의존성 연결 가능

 

 

예시

• 하나의 저장소에서 packages로 감싸고 api, back, front로 분리
• 공통으로 사용할 설정은 프로젝트 루트에서 관리

 

 

 

프로젝트 루트의 tsconfig,json

{
  "compilerOptions": {
    "target": "es2021",
    "esModuleInterop": true
  },
  "references": [
    { "path": "./packages/api" },
    { "path": "./packages/back" },
    { "path": "./packages/front" }
  ]
}

 

프로젝트 루트의 package.json

{
  "name": "monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "api",
    "back",
    "front"
  ],
  "scripts": {
    "start": "npm run start:all",
    "start:all": "concurrently \"npm run start:back\" \"npm run start:front\" \"npm run start:api\"",
    "start:back": "cd packages/back && npm start",
    "start:front": "cd packages/front && npm start",
    "start:api": "cd packages/api && npm start",
    "build": "npm run build:all",
    "build:all": "npm run build:back && npm run build:front && npm run build:api",
    "build:back": "cd packages/back && npm run build",
    "build:front": "cd packages/front && npm run build",
    "build:api": "cd packages/api && npm run build"
  },
  "dependencies": {
    "concurrently": "^8.2.0"
  },
  "devDependencies": {
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^3.0.0",
    "typescript": "^4.4.2"
  }
}