애플리케이션 개발

모노레포에서 애플리케이션을 개발하면 강력한 워크플로를 활용할 수 있으며, 소스 제어에 원자적 커밋을 만들고 코드에 쉽게 액세스할 수 있습니다.

대부분의 개발 작업은 코드 변경 사항을 감시하는 장기 실행 작업입니다. Turborepo는 강력한 터미널 UI 및 다음과 같은 기능으로 이 경험을 향상시킵니다:

dev 작업 구성
작업과 상호작용
Watch Mode
설정 스크립트 실행
작업 필터링하여 패키지 하위 집합 실행

개발 작업 구성

turbo.json에서 개발 작업을 정의하면 Turborepo에 장기 실행 작업을 실행할 것임을 알립니다. 이는 개발 서버 실행, 테스트 실행 또는 애플리케이션 빌드와 같은 작업에 유용합니다.

dev 작업을 등록하려면 두 가지 속성과 함께 turbo.json에 추가합니다:

./turbo.json

{
  "tasks": {
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

"cache": false: Turborepo에 작업 결과를 캐시하지 않도록 지시합니다. 이는 개발 작업이므로 코드를 자주 변경할 가능성이 높기 때문에 결과를 캐시하는 것은 유용하지 않습니다.
"persistent": true: Turborepo에 중지할 때까지 작업을 계속 실행하도록 지시합니다. 이 키는 터미널 UI가 작업을 장기 실행 및 대화형으로 처리하도록 신호 역할을 합니다. 또한 종료되지 않는 작업에 실수로 의존하는 것을 방지합니다.

이제 dev 작업을 실행하여 개발 스크립트를 병렬로 시작할 수 있습니다:

Terminal

turbo dev

`dev` 전에 설정 작업 실행

개발 환경을 설정하거나 패키지를 미리 빌드하는 스크립트를 실행할 수도 있습니다. dependsOn을 사용하여 dev 작업 전에 해당 작업이 실행되도록 할 수 있습니다:

./turbo.json

{
  "tasks": {
    "dev": {
      "cache": false,
      "persistent": true,
      "dependsOn": ["//#dev:setup"]
    },
    "//#dev:setup": {
      "outputs": [".codegen/**"]
    }
  }
}

이 예에서는 Root Task를 사용하고 있지만 패키지의 임의 작업에 동일한 아이디어를 사용할 수 있습니다.

특정 애플리케이션 실행

--filter 플래그를 사용하면 Package Graph의 하위 집합을 선택할 수 있으므로 특정 애플리케이션과 해당 종속성에 대한 dev 작업을 실행할 수 있습니다:

Terminal

turbo dev --filter=web

터미널 UI 사용

Turborepo의 터미널 UI는 작업을 중심으로 고도로 대화형 경험을 만드는 여러 기능을 활성화합니다.

보기 사용자 지정

키바인드를 사용하여 필요에 맞게 UI를 빠르게 조정할 수 있습니다.

키바인드	작업
`m`	키바인드 목록 팝업 토글
`↑`/`↓`	작업 목록에서 다음/이전 작업 선택
`j`/`k`	작업 목록에서 다음/이전 작업 선택
`p`	선택한 작업에 대한 선택 고정 토글
`h`	작업 목록 표시 토글
`c`	로그가 강조 표시되면 선택 항목을 시스템 클립보드에 복사
`u`/`d`	로그 위`u`/아래`d`로 스크롤

작업과 상호작용

일부 도구는 입력을 입력할 수 있습니다. 이에 대한 예로는 Drizzle ORM의 대화형 마이그레이션 또는 Jest의 테스트 스위트 필터링 및 재실행이 있습니다.

대화형으로 표시된 작업과 상호작용하여 입력을 제공할 수 있습니다.

키바인드	작업
`i`	상호작용 시작
`Ctrl+z`	상호작용 중지

Watch Mode

tsc --watch와 같이 많은 도구에는 소스 코드의 변경 사항에 응답하는 내장 감시자가 있습니다. 그러나 일부는 그렇지 않습니다.

turbo watch는 모든 도구에 종속성 인식 감시자를 추가합니다. 소스 코드 변경 사항은 다른 모든 작업과 마찬가지로 turbo.json에 설명한 the Task Graph를 따릅니다.

예를 들어 다음 작업 및 스크립트와 함께 create-turbo와 같은 패키지 구조를 사용합니다:

turbo.json

{
  "tasks": {
    "dev": {
      "persistent": true,
      "cache": false
    },
    "lint": {
      "dependsOn": ["^lint"]
    }
  }
}

turbo watch dev lint를 실행하면 ESLint에 내장 감시자가 없음에도 불구하고 소스 코드를 변경할 때마다 lint 스크립트가 다시 실행됩니다. turbo watch는 내부 종속성도 인식하므로 @repo/ui의 코드 변경 사항은 @repo/ui와 web 모두에서 작업을 다시 실행합니다.

web의 Next.js 개발 서버와 @repo/ui의 TypeScript 컴파일러 내장 감시자는 persistent로 표시되어 있으므로 평소와 같이 계속 작동합니다.

자세한 내용은 turbo watch 참조를 방문하세요.