데브허브 | DEVHUB | Host your own Shad/cn on Cloudflare Workers + Hono 🔥Host your own Shad/cn on Cloudflare Workers + Hono 🔥
- 이 비디오는 Shadcn과 유사하게
npm install을 통해 어떤 프로젝트에도 설치 가능한 재사용 가능한 UI 컴포넌트 패키지를 만드는 방법을 다룹니다. 📦
- 서버리스 배포를 위해 Cloudflare Workers를, API 구축을 위해 Hono.js를 활용하여 정적 컴포넌트 데이터를 효율적으로 제공하는 솔루션을 제시합니다. ☁️
- Shadcn과 같은 레지스트리가 CLI를 통해 프로젝트로 가져올 수 있는 UI 컴포넌트를 정의하는 정적 JSON 파일을 제공하는 방식을 보여줍니다. ⚙️
- Shadcn CLI를 사용하여 TSX 컴포넌트를 JSON 형식으로 변환하고, Cloudflare Workers에 커스텀 컴포넌트 레지스트리를 설정하는 과정을 안내합니다. 🚀
- Cloudflare Workers의
wrangler.toml을 구성하여 생성된 JSON 컴포넌트 파일을 정적 자산으로 제공하고, Hono 라우트를 통해 동적으로 접근 가능하게 합니다. 📁
- Hono 라우트는 요청 경로(예:
/r/button)에 따라 배포된 정적 자산에서 특정 컴포넌트 JSON 파일을 동적으로 가져오도록 구현됩니다. 🔗
- 커스텀 레지스트리는
shadcn CLI와 원활하게 통합되어, mpx shadcn add --registry <your-url> <component-name> 명령어를 통해 자체 호스팅된 레지스트리에서 컴포넌트를 추가할 수 있습니다. 🛠️
- 이 프로젝트는 컴포넌트 레지스트리의 기본 아키텍처와 서버리스 배포를 이해하는 실용적인 방법을 제공합니다. 🧠
- Brilliant.org는 프로그래밍, 수학, 과학, AI 분야의 인터랙티브 학습 플랫폼으로 소개되며, 특히 "Thinking in Code" 과정을 추천합니다. 💡