모노레포
모노레포
모노레포에서 shadcn/ui 컴포넌트와 CLI를 사용하는 방법을 알려드릴게요. 이제 CLI가 모노레포 구조를 이해하고 컴포넌트와 의존성을 올바른 경로에 설치해 주기 때문에 훨씬 수월해졌어요.
출처: 문서
본문
참고: CLI의 모노레포 지원을 실험적(experimental) 기능으로 공개하고 있어요. 직접 테스트하고 피드백을 보내 개선에 도움을 주세요. 궁금한 점이 있다면 문의해 주세요.
지금까지 모노레포에서 shadcn/ui를 쓰는 건 조금 번거로웠어요. CLI로 컴포넌트를 추가할 수는 있었지만, 컴포넌트가 어디에 설치되는지 관리하고 import 경로를 직접 수정해야 했거든요.
새로운 CLI의 모노레포 지원 덕분에 훨씬 쉬워졌어요. CLI가 이제 모노레포 구조를 이해하고 컴포넌트, 의존성, 레지스트리 의존성을 올바른 경로에 설치하며 import까지 알아서 처리해 줘요.
시작하기
새 모노레포 프로젝트 만들기
새 모노레포 프로젝트를 만들려면 init 명령어를 실행해요. 만들려는 프로젝트 유형을 선택하라는 안내가 나옵니다.
npx shadcn@canary init
Next.js (Monorepo) 옵션을 선택해요.
? Would you like to start a new project?
Next.js
❯ Next.js (Monorepo)
그러면 web과 ui 두 개의 워크스페이스와 Turborepo 빌드 시스템을 갖춘 새 모노레포 프로젝트가 만들어져요. 모든 게 준비되어 있어 바로 컴포넌트를 추가하면 됩니다.
프로젝트에 컴포넌트 추가
컴포넌트를 추가하려면 앱 경로에서 add 명령어를 실행해요.
cd apps/web
npx shadcn@canary add [COMPONENT]
CLI가 추가하려는 컴포넌트 유형을 파악해서 올바른 파일을 올바른 경로에 설치해 줘요. 예를 들어 npx shadcn@canary add button을 실행하면 packages/ui 아래에 button 컴포넌트가 설치되고 apps/web 안의 컴포넌트 import 경로가 업데이트돼요.
npx shadcn@canary add login-01을 실행하면 button, label, input, card 컴포넌트가 packages/ui 아래에 설치되고, login-form 컴포넌트는 apps/web/components 아래에 설치돼요.
컴포넌트 import
@workspace/ui 패키지에서 컴포넌트를 이렇게 import 할 수 있어요.
import { Button } from "@workspace/ui/components/button"
@workspace/ui 패키지에서 훅과 유틸리티도 import 할 수 있어요.
import { useTheme } from "@workspace/ui/hooks/use-theme"
import { cn } from "@workspace/ui/lib/utils"
파일 구조
새 모노레포 프로젝트를 만들면 CLI가 다음과 같은 파일 구조를 생성해 줘요.
apps
└── web # Your app goes here.
├── app
│ └── page.tsx
├── components
│ └── login-form.tsx
├── components.json
└── package.json
packages
└── ui # Your components and dependencies are installed here.
├── src
│ ├── components
│ │ └── button.tsx
│ ├── hooks
│ ├── lib
│ │ └── utils.ts
│ └── styles
│ └── globals.css
├── components.json
└── package.json
package.json
turbo.json
요구 사항
-
모든 워크스페이스에
components.json파일이 있어야 해요.package.json파일은 npm에 의존성 설치 방법을 알려주고,components.json파일은 CLI에 컴포넌트를 어떻게, 어디에 설치할지 알려줘요. -
components.json파일이 워크스페이스의 별칭을 올바르게 정의해야 해요. 이는 CLI가 컴포넌트, 훅, 유틸리티 등을 어떻게 import 할지 결정해 줘요.
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "../../packages/ui/tailwind.config.ts",
"css": "../../packages/ui/src/styles/globals.css",
"baseColor": "zinc",
"cssVariables": true
},
"iconLibrary": "lucide",
"aliases": {
"components": "@/components",
"hooks": "@/hooks",
"lib": "@/lib",
"utils": "@workspace/ui/lib/utils",
"ui": "@workspace/ui/components"
}
}
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/styles/globals.css",
"baseColor": "zinc",
"cssVariables": true
},
"iconLibrary": "lucide",
"aliases": {
"components": "@workspace/ui/components",
"utils": "@workspace/ui/lib/utils",
"hooks": "@workspace/ui/hooks",
"lib": "@workspace/ui/lib",
"ui": "@workspace/ui/components"
}
}
- 두
components.json파일에 동일한style,iconLibrary,baseColor가 있는지 확인하세요.
이 요구 사항을 따르면 CLI가 ui 컴포넌트, 블록, 라이브러리, 훅을 올바른 경로에 설치하고 import까지 처리해 줘요.
모노레포 지원 개선에 도움 주기
저희는 CLI의 모노레포 지원을 실험적 기능으로 공개하고 있어요. 직접 테스트하고 피드백을 보내 개선에 도움을 주세요. 궁금한 점이 있다면 GitHub Discussions로 문의해 주세요.