PricingLoginStart free
Frontend Academy · 강의

Turbo: 캐싱과 작업 파이프라인

turbo.json 파이프라인을 정의하고, dependsOn으로 작업 종속성을 구성하며, 원격 캐싱을 활성화해 여러 머신에서 캐시된 출력을 공유합니다.

레슨 4/417개 단계

Turbo: 캐싱과 작업 파이프라인은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Turborepo 복습

Turborepo(현재는 Turbo)는 JavaScript 모노레포를 위한 고성능 빌드 작업 조정 도구입니다. 패키지 전반의 작업을 병렬로 실행하고, 해시를 기준으로 결과를 캐시하며, 입력이 변경되지 않았을 때는 작업을 건너뜁니다.

캐싱이 중요한 이유

패키지 20개가 있는 모노레포에서 푸시할 때마다 모든 패키지의 '테스트'를 실행하는 것은 비용이 큽니다. 패키지 하나만 변경되었다면 Turbo는 해당 패키지의 테스트를 다시 실행하고 나머지 19개에는 캐시된 출력을 재생하여, 몇 분 걸리던 작업을 몇 초로 줄입니다.

해싱 작동 방식

Turbo는 소스 파일(입력 전역 패턴), 의존성(package.json + 잠금 파일), 선언한 환경 변수, 작업 자체의 구성을 해시합니다. 동일한 해시는 동일한 작업을 의미하므로 캐시 적중이 발생합니다.

turbo.json — 작업 흐름

turbo.json에서 작업과 작업 간 관계를 선언합니다.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "package.json"],
      "outputs": ["dist/**", ".next/**"]
    },
    "test": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "test/**", "package.json"]
    },
    "lint": { "inputs": ["**/*.{ts,tsx,js,jsx}", ".eslintrc*"] },
    "dev": { "cache": false, "persistent": true }
  }
}

입력과 출력

입력: 해시에 반영되는 파일입니다. 출력: Turbo가 캐시하고 복원해야 하는 파일입니다. 이를 올바르게 설정하면 캐시 적중률이 90% 이상으로 올라갑니다.

dependsOn

['^build']: 먼저 의존 패키지를 빌드합니다. ['lint']: 같은 패키지에서 이 작업 전에 린트를 실행합니다. ['^build', 'lint']: 두 설정을 결합합니다.

cache: false 및 persistent: true

dev와 같은 작업은 캐시하지 않고(대화형이며 장시간 실행됨) 계속 유지됩니다(Turbo가 종료되지 않도록 유지함). 개발 서버에는 두 설정을 모두 지정합니다.

작업 실행하기

Turbo CLI를 사용합니다.

npx turbo run build
npx turbo run test lint
npx turbo run build --filter=web
npx turbo run build --filter=web... --concurrency=10

캐시 위치

기본적으로 로컬 캐시는 node_modules/.cache/turbo에 저장됩니다. 실행할 때마다 로그와 캡처한 출력이 생성됩니다. 캐시 적중 시에는 'cache hit, replaying logs'가 출력됩니다.

원격 캐싱

CI와 팀원이 캐시 적중 결과를 공유할 수 있도록 캐시를 원격 저장소에 업로드합니다. turbo login(Vercel Remote Cache)을 통해 무료로 가입하거나 직접 호스팅할 수 있습니다.

npx turbo login
npx turbo link    # link to a Vercel remote cache

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

직접 호스팅하는 원격 캐시

OSS 대안으로는 turborepo-remote-cache(Node)와 turbo-cache-server(Go)가 있습니다. 자체 인프라에 배포하고 TURBO_API 환경 변수를 설정합니다.

환경 변수 입력

출력에 영향을 주는 환경 변수를 선언하면 Turbo가 이를 입력으로 취급합니다. 따라서 환경 변수가 변경되면 캐시가 무효화됩니다.

// turbo.json
{
  "tasks": {
    "build": {
      "env": ["NODE_ENV", "VITE_API_URL"],
      "outputs": ["dist/**"]
    }
  },
  "globalEnv": ["GITHUB_SHA"]
}

필터링

특정 패키지 또는 변경의 영향을 받은 패키지에서 작업을 실행합니다.

# Specific package and its dependencies:
turbo run build --filter=web...

# Packages that depend on shared/ui:
turbo run test --filter='...@repo/ui'

# Changed since main:
turbo run lint --filter='[origin/main]'

# Combine:
turbo run build --filter=web...[origin/main]

DRY_RUN 및 프로파일링

--dry=json은 작업을 실행하지 않고 작업 그래프를 출력합니다. --profile은 Chrome-DevTools 방식의 추적 파일을 생성합니다.

turbo run build --dry=json | jq
turbo run build --profile=trace.json
# open chrome://tracing and load trace.json

일반적인 실수

1) 출력을 선언하지 않는 경우(Turbo가 이를 캐시하지 않음). 2) 빌드에 영향을 주는 환경 변수를 빠뜨리는 경우. 3) 개발 서버를 캐시하는 경우(cache: false로 설정). 4) CI에서 --frozen-lockfile을 사용하지 않는 경우(잠금 파일의 변경으로 해시가 달라질 수 있음).

빠른 확인

Turbo 작업 구성에서 출력을 캐시에서 재생할 수 있는지를 결정하는 두 필드는 무엇인가요?

인터랙티브 레슨에서 답해보세요

복습: Turbo

모노레포 작업을 위한 해시 기반 로컬 및 원격 캐싱입니다. turbo.json에서 dependsOn, 입력, 출력, 환경을 사용해 작업을 선언합니다. 개발 서버에는 cache: false와 persistent: true를 사용합니다. --filter=web... 및 changed-since=[origin/main]으로 작업을 필터링합니다. 원격 캐시(Vercel 또는 자체 호스팅)를 사용하면 CI와 팀 전체에서 캐시 적중 결과를 공유할 수 있습니다. --profile로 프로파일링합니다. 최대 적중률을 위해 입력과 출력을 올바르게 설정하세요.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
41
레슨
163
무료로 학습 시작전체 코스 보기

자주 묻는 질문

“Turbo: 캐싱과 작업 파이프라인” 강의는 무료인가요?

네 — “Turbo: 캐싱과 작업 파이프라인” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Turbo: 캐싱과 작업 파이프라인”에서 뭘 배우나요?

turbo.json 파이프라인을 정의하고, dependsOn으로 작업 종속성을 구성하며, 원격 캐싱을 활성화해 여러 머신에서 캐시된 출력을 공유합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Turbo: 캐싱과 작업 파이프라인” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Vite: 플러그인 시스템과 SSR 모드
  2. esbuild: 속도와 한계
  3. 모노레포를 위한 pnpm Workspaces
  4. Turbo: 캐싱과 작업 파이프라인
← Frontend Academy(으)로 돌아가기