데브허브 | DEVHUB | Create Your Own Shadcn/UI Block & Install It via CLICreate Your Own Shadcn/UI Block & Install It via CLI
- 사용자 정의 Shadcn/UI 컴포넌트 생성 및 CLI 설치 가능하게 만들기 시연. 🛠️
- Next.js 앱 생성, Shadcn/UI 설치, 'QuoteCard' 컴포넌트 개발 과정을 단계별로 설명. 🪜
- 커스텀 컴포넌트를 Shadcn/UI CLI를 통해 설치 가능하도록
public/r/quote-card.json 파일 생성 및 구조 정의. 📄
- JSON 파일 내 컴포넌트 코드 포함을 위해 코드 이스케이프 처리의 중요성 강조 (특히 따옴표 처리). 🔗
- Vercel 배포 및 환경 변수(
NEXT_PUBLIC_COMPONENT_REGISTRY_URL)를 사용하여 컴포넌트 레지스트리 URL 동적 설정. 🌐
npx shadcn-ui add [배포된 URL]/r/quote-card.json 명령어를 통한 사용자 컴포넌트 설치 시연. 💻
- 이 방법을 통해 개발자들이 자신만의 Shadcn/UI 블록을 생성하고 공유할 수 있는 확장성 제공. 🤝