jsrepo - shadcn처럼 코드를 재사용하는 CLI 도구

shadcn-ui처럼 코드를 재사용을 위한 CLI도구로써, npm 패키지가 아닌 실제 코드를 프로젝트에 직접 설치해 자유롭게 수정 가능. jsrepo는 코드 재사용을 위한 레지스트리 구축과 배포 과정을 통합하여 이 과정을 더 간단하고 유지보수하기 쉽게 만드는 것을 목표로 함.

주요 특징

• shadcn/ui 방식: 컴포넌트를 npm 패키지로 설치하는 대신, CLI를 통해 실제 코드 파일을 프로젝트에 직접 추가. 소스 코드를 직접 제어하고 원하는 대로 수정 가능.
• 나만의 레지스트리: 누구나 자신만의 코드 레지스트리를 만들어 공개적으로 공유하거나 비공개로 사용 가능.
• MCP 연동: Model Context Protocol(MCP)을 통해 Cursor, Windsurf 같은 AI 기반 코드 에디터와 연동. AI가 JSRepo 레지스트리의 컴포넌트를 이해하고, 자연어 명령만으로 컴포넌트를 검색하거나 프로젝트에 추가하는 등의 작업을 수행 가능.
• 유연한 호스팅: GitHub, GitLab, BitBucket 등 다양한 Git 제공자를 이용한 자체 호스팅(Self-hosted)과 jsrepo.com을 통한 호스팅을 모두 지원.
• 강력한 CLI: add 명령어로 간단하게 코드 블록을 추가하고, update 명령어를 통해 대화형(interactive)으로 업데이트를 진행하는 등 강력한 기능 제공.
• 안전한 버전 관리: SemVer(시맨틱 버전 관리)를 완벽히 지원하여 예측 가능한 업그레이드가 가능하며, Changesets 같은 기존 솔루션과도 호환됨.
• 팀 협업: 비공개 레지스트리(Private Registries)를 통해 팀 내부에서 코드를 안전하게 공유하고 관리.
• 동적 레지스트리: 런타임에 동적으로 컴포넌트를 로드하는 고급 기능 제공.
• 부가 기능: Raycast 확장 프로그램과 같은 개발 편의를 위한 통합 기능 제공.

호스팅 방식 비교: jsrepo.com vs. Git Provider (자체 호스팅)

JSRepo는 레지스트리를 호스팅하는 방식으로 크게 두 가지 옵션을 제공.

jsrepo.com (관리형 호스팅)

• 가장 쉬운 방법: 별도의 설정 없이 GitHub 계정으로 로그인하고 바로 레지스트리를 게시할 수 있음.
• 강력한 버전 관리: Git 태그(tag)와 달리 한번 게시된 버전은 변경이 불가능(immutable)하여 더 안전하고 신뢰할 수 있는 SemVer 버전 관리를 지원.
• 비공개 레지스트리: jsrepo auth 명령어를 통해 팀원들과 안전하게 비공개 코드를 공유하는 기능을 기본적으로 지원.
• 성능 및 편의 기능: 향상된 성능을 제공하며, 검색이나 분석 같은 부가 기능을 포함.

Git Provider (자체 호스팅)

• 완벽한 제어: GitHub, GitLab 등의 Git 저장소를 직접 레지스트리로 사용하여 모든 것을 직접 제어.
• 기본적인 버전 관리: Git 태그를 이용해 버전을 관리하지만, 태그는 수정이 가능하여 jsrepo.com에 비해 안정성이 떨어질 수 있음.
• 직접 설정 필요: 비공개 레지스트리 접근 등을 위해 직접 인증 및 권한 설정을 관리해야 함.

활용 사례

https://github.com/shyakadavis/geist
https://github.com/ieedan/shadcn-svelte-extras