런픽 | EP06. 프로젝트 구조 변경 + turborepo 추가 및 pnpm으로 변경

기존에는 root 밑에 /frondend, /backend 폴더를 두고 프론트엔드는 nuxt3, 백엔드는 nestjs로 구현하는 방식으로 프로젝트 전체 구조를 생각했었다.

하지만 이런 방식은 실제로 운영하고 배포하는데 있어서 너무 허술하기 때문에 프로젝트 운영을 혼자서도 더 효율적으로 하기 위해서 turborepo를 추가하기로 결정했다.

 

What is Turborepo?

터보레포 공식문서

터보레포는 자바스크립트 및 타입스크립트 코드베이스를 위한 고성능 빌드 시스템입니다. 모노레포의 확장을 위해 설계되었으며 단일 패키지 워크스페이스의 워크플로우도 더욱 빠르게 만들어 줍니다. 개인 개발자부터 세계 최대 규모의 엔터프라이즈 엔지니어링 조직에 이르기까지 Turborepo는 리포지토리에서 실행해야 하는 작업을 최적화하는 가벼운 접근 방식을 통해 수년간의 엔지니어링 시간과 수백만 달러의 컴퓨팅 비용을 절약하고 있습니다.

 

즉 터보레포는 모노레포 환경에서 여러 패키지를 효율적으로 관리하고 빌드, 캐시, 배포를 최적화해주는 툴이다. 내가 원했던 방향으로 프로젝트를 진행하기 위해서는 결국 이런 툴을 이용했어야 했다. 그래서 해당 툴을 이용하는 구조로 전체 프로젝트를 다시 설계하기로 했다.

 

Pnpm 설치

기존에는 npm을 이용해서 라이브러리들을 관리하고 있었지만, pnpm으로 바꾸면 더 좋을 것 같다는 생각도 들었다.

 

• 디스크 용량 절약 (Content-Addressable Storage)
  • PNPM은 모든 패키지를 전역 저장소(store)에 한 번만 다운로드한 뒤, 그 패키지를 각 프로젝트에 ‘하드 링크(hard link)’ 형태로 연결합니다.
  • 즉, 서로 다른 프로젝트가 같은 버전의 패키지를 쓰면 실제 디스크 상에 동일한 패키지가 한 번만 존재하게 되어 저장 공간을 크게 절약할 수 있습니다.
• 빠른 설치 속도
  • 하드 링크 방식을 사용해서 이미 다운로드한 패키지를 재사용하므로, CI/CD 환경에서나 로컬 개발 시 속도가 더 빠릅니다.
  • 특히 모노레포처럼 여러 워크스페이스가 있을 때, 터보레포와 함께 쓰면 설치/업데이트가 매우 빨라집니다.
• 정확한 의존성 관리
  • PNPM의 node_modules 구조는 모든 의존성이 뚜렷한 트리 형태(hoisting을 최소화)로 설치되기 때문에, “어느 패키지가 실제로 어떤 버전을 사용 중인지”를 더 명확히 확인할 수 있습니다.
  • 이로 인해 간헐적인 npm install 실패나 패키지 충돌 이슈가 줄어듭니다.
• Monorepo 워크스페이스 지원
  • pnpm-workspace.yaml 파일 한 줄로 워크스페이스를 정의할 수 있고, 터보레포와 만나면 시너지 효과가 큽니다.

 

 

프로젝트에 실제 적용

먼저 backend 폴더에 있던 node_modules, package-lock.json을 제거했다. 그리고 root에서 pnpm install을 했다. 그 이후 pnpm-workspace.yaml 파일을 생성

packages:
  - packages/backend
  - packages/frontend

 

터보레포를 이용하기 위한 turbo.json 파일을 추가

{
  "$schema": "https://turborepo.org/schema.json",
  "tasks": {
    "dev": {
      "cache": false
    },
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "lint": {
      "outputs": []
    },
    "test": {
      "outputs": []
    }
  }
}

 

그리고 root의 package.json의 스크립트를 다음과 같이 작성

  "scripts": {
    "dev": "turbo run dev --parallel",
    "dev:backend": "turbo run dev --filter=backend",
    "build": "turbo run build",
    "lint": "turbo run lint",
    "test": "turbo run test"
  },

여기서 dev:backend를 실행하면 backend 스크립트의 dev 스크립트가 실행된다(nest start --watch).

 

그리고 터보레포를 설치한다.

pnpm add turbo --save-dev --ignore-workspace-root-check