Turborepo를 사용한 모노레포 설정
여러 앱과 공유 패키지를 하나의 저장소에서 구성하고, Turbo 파이프라인을 정의하며, 변경된 부분만 다시 빌드하도록 빌드를 캐시합니다.
Turborepo를 사용한 모노레포 설정은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
모노레포란?
코드를 공유하는 여러 프로젝트(앱, 라이브러리)를 하나의 Git 저장소에서 관리하는 방식입니다. 예를 들어 웹 앱, 모바일 앱, 공유 UI 라이브러리, 공유 유틸리티를 하나의 저장소에 둘 수 있습니다. 코드를 쉽게 공유할 수 있고, 여러 영역에 걸친 변경을 원자적으로 처리할 수 있으며, 하나의 CI 처리 흐름을 사용할 수 있습니다.
Turborepo를 사용하는 이유
Turborepo는 JavaScript 모노레포를 위한 고성능 빌드 시스템입니다. 작업 결과를 캐시하고, 패키지 전체에서 작업을 병렬로 실행하며, 변경된 부분만 다시 빌드합니다. Vercel에서 개발했습니다.
Turborepo 설정하기
공식 시작 템플릿을 사용합니다.
npx create-turbo@latest my-monorepo
cd my-monorepo
# Structure:
# apps/
# web/ (Next.js app)
# docs/ (another Next.js app)
# packages/
# ui/ (shared component library)
# eslint-config/
# tsconfig/작업 공간이 포함된 package.json
루트 package.json에서 작업 공간을 선언하면 npm/yarn/pnpm이 작업 공간을 심볼릭 링크로 연결하여 앱에서 이름으로 패키지를 가져올 수 있습니다.
{
"name": "my-monorepo",
"private": true,
"workspaces": ["apps/*", "packages/*"],
"devDependencies": {
"turbo": "latest"
}
}turbo.json — 작업 처리 흐름
작업(빌드, 린트, 테스트, 개발)과 패키지 간의 종속성을 정의합니다.
// turbo.json
{
"$schema": "https://turbo.build/schema.json",
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/**", "dist/**"]
},
"lint": {},
"test": { "dependsOn": ["^build"] },
"dev": { "cache": false, "persistent": true }
}
}dependsOn 설명
^build는 이 패키지를 빌드하기 전에 모든 작업 공간 종속 패키지를 먼저 빌드한다는 뜻입니다. 따라서 app/web이 packages/ui에 의존하면 ui가 먼저 빌드됩니다.
작업 실행하기
모노레포 전체에서 작업을 실행합니다. Turbo는 병렬 처리를 사용해 위상 순서대로 실행합니다.
# Build everything:
npx turbo run build
# Build only one app and its deps:
npx turbo run build --filter=web
# Run dev mode (persistent, no cache):
npx turbo run dev
# Lint and test in parallel:
npx turbo run lint test출력 캐싱
Turbo는 입력(소스 파일 + 종속성 + 환경)을 해시하고 출력을 캐시합니다. 변경 사항 없이 다시 실행하면 즉시 완료됩니다. Turbo가 작업을 다시 실행하지 않고 캐시된 출력을 재생하기 때문입니다.
원격 캐싱
캐시를 원격 저장소(Vercel Remote Cache 또는 자체 호스팅)에 올리면 CI 시스템과 팀원이 캐시를 공유할 수 있습니다. 처음 빌드하는 개발자가 비용을 부담하고, 나머지는 캐시 적중 결과를 얻습니다.
npx turbo login
npx turbo link
# In CI:
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: yourteam--filter로 필터링하기
일치하는 패키지에 대해서만 작업을 실행합니다.
# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'
# Run build for web and everything it depends on:
npx turbo run build --filter=web...
# Run dev for the docs app only:
npx turbo run dev --filter=docs내부 패키지
packages/의 패키지는 이름으로 서로 가져옵니다. 종속성에 "@repo/ui": "*"로 참조합니다(pnpm에서는 workspace:* 사용).
// apps/web/package.json
{
"dependencies": {
"@repo/ui": "*",
"@repo/utils": "*"
}
}
// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';CI 팁
CI에서 turbo run build --filter=...[origin/main]을 사용하면 main 브랜치 이후 변경된 부분만 빌드할 수 있습니다. 원격 캐시와 결합하면 변경되지 않은 패키지의 빌드 시간이 몇 분에서 몇 초로 줄어듭니다.
빠른 확인
Turbo 작업의 dependsOn 배열에 있는 ^build 항목은 무엇을 의미하나요?
복습: Turborepo
JavaScript 모노레포 시스템으로, 작업 공간을 사용하는 apps/ + packages/ 구조를 갖춥니다. turbo.json은 작업과 dependsOn 관계를 정의합니다. ^build는 종속 패키지를 먼저 빌드한다는 뜻입니다. 해시 기반 로컬 캐시를 사용하면 반복 작업이 즉시 완료됩니다. 원격 캐시는 팀과 CI 전체에서 캐시 적중 결과를 공유합니다. --filter로 일부 패키지만 대상으로 지정할 수 있습니다. 빠른 PR용 CI에는 변경 시점을 기준으로 실행하는 방식을 사용합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 41
- 레슨
- 163
자주 묻는 질문
“Turborepo를 사용한 모노레포 설정” 강의는 무료인가요?
네 — “Turborepo를 사용한 모노레포 설정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Turborepo를 사용한 모노레포 설정”에서 뭘 배우나요?
여러 앱과 공유 패키지를 하나의 저장소에서 구성하고, Turbo 파이프라인을 정의하며, 변경된 부분만 다시 빌드하도록 빌드를 캐시합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“Turborepo를 사용한 모노레포 설정” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Atomic Design: 원자, 분자, 유기체
- Turborepo를 사용한 모노레포 설정
- 마이크로 프런트엔드: Module Federation
- 기능 기반 폴더 구조