[FE] 터보레포(Turborepo)를 이용한 모노레포 이커머스 서비스 구축

멀티레포(Multi-repo) 방식의 한계

 이커머스 프로젝트 특성상 호스트와 클라이언트의 두 서비스를 제공하게 된다. 이 때 서로 다른 레포지토리에서 여러 개 서비스를 저장하고 관리한다면 프로젝트 규모가 거대해질수록 유지보수가 어려워진다는 단점이 있다.

 

• 프로젝트 생성의 번거로움 : 새로운 서비스가 추가될 때마다 프로젝트 초기화를 일일이 하는 것에 대해 DX적으로 이점을 받을 수 없다. (의존성 관리, prettier, eslint, typescript 설정 등)
• 코드 중복 및 낮은 재사용성 : 호스트와 클라이언트 각각에서 유사한 UI를 사용한다면, 어느 한 쪽에서 수정이 발생했을 때 모든 레포지토리에 수정을 해야 하는 번거로움이 발생한다. 

 

모노레포(Monorepo)가 해결하는 멀티레포의 문제

 모노레포는 여러 개 서비스를 하나의 레포지토리에서 관리하여 코드 중복 및 재사용성을 높이고 유지보수를 더욱 원활하게 한다. 이는 모놀리식 아키텍쳐(monolithic architecture)의 한계에서 출발하여 제안된 소프트웨어 개발 전략이다. 모노레포에선 공통으로 사용되는 유틸 함수나 UI 컴포넌트 등을 공유 폴더에서 관리하고 각각의 서비스는 해당하는 파일을 공통으로 불러와 사용한다. 이러한 원자적 커밋 방식으로 공유 폴더의 파일을 수정하면 모든 서비스에 공통적으로 적용할 수 있는 이점을 가진다.

 

• 쉬운 프로젝트 생성
• 프로젝트들에 걸친 원자적(Atomic) 커밋이 가능하다. 
• 의존성 관리를 통합으로 가능하다.
• 리팩토링 비용이 감소한다.

 

 프론트엔드에서 모노레포를 사용하는 것은 DX의 이점과 유지보수성에 중점을 맞추고 있다. 일관된 개발 환경을 구축함으로써 개발자가 더욱 쉽게 코드를 작성할 수 있도록 하는 것이 목표이다. 다만 모노레포 vs 멀티레포의 경우 두 방법 모두 각각의 장단점이 존재하므로, 현재 프로젝트의 상황에 맞게 유연하게 채택해야 할 필요성이 있다.

 

 

터보레포(Turborepo)란?

Turborepo

 

 Vercel에서 개발한 빌드 시스템으로, 모노레포 환경에서 개발자가 조금 더 쉽고 빠르게 개발할 수 있도록 빌드 도구를 제공한다. javascript/typescript에 중점으로 맞춰져 있으며 빠른 빌드 환경을 제공한다는 의미의 네이밍이다. 

 

• 설치

pnpm install turbo --global
pnpm dlx create-turbo@latest

 

 

 터보레포는 빌드/테스트 등의 처리를 캐싱/병렬 처리하여 이름에 맞게 빠른 빌드 속도를 제공한다. 또한 공유 폴더(packages)에서 의존성을 통합적으로 관리하고 코드를 재사용할 수 있도록 한다. 각각의 서비스는 apps 폴더에 저장된다. 예를 들어 호스트, 클라이언트의 두 서비스가 존재한다면 apps/admin, apps/client의 두 폴더가 존재할 수 있다. 이 앱들은 packages/에 있는 공유 파일들을 의존성으로 가져와 사용한다.

 

 공유 폴더(packages)에는 ui, utils, types 등의 공유 파일들이나 eslint-config, typescript-config 등의 공유 설정 파일이 존재할 수 있다. 

 

 루트의 turbo.json은 터보레포의 설정 파일로 빌드 파이프라인이나 의존성을 정의한다. 만약 환경 변수를 추가한다면 turbo.json에 해당 환경 변수를 명시해 주어야 빌드 과정의 오류를 방지할 수 있다.

 

 

참고자료
모던 프론트엔드 프로젝트 구성 기법 - 모노레포 개념 편
Turborepo로 모노레포 개발 경험 향상하기
[Monorepo] Turborepo를 사용하여 모노레포 구축하기