CLI 도구 compadcn을 이용한 shadcn/ui 작업 편리화

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

shadcn/ui를 사용하는 개발자

• shadcn/ui에서 CLI 도구의 불편함을 경험한 사용자
• 반복적 작업을 줄이고 효율적인 개발 환경을 원하는 개발자

핵심 요약

• compadcn CLI 도구는 shadcn/ui의 CLI를 보완하여 사용자 경험을 개선
• add 명령어는 TUI 인터페이스로 컴포넌트 선택 가능
• lint 명령어는 사용하지 않는 컴포넌트를 자동으로 감지 및 제거
• presets 명령어는 반복적 설치 작업을 줄이는 프리셋 기능 제공
• remove 명령어는 의존성 체크를 통한 안전한 컴포넌트 제거 지원

섹션별 세부 요약

1. 문제 인식 및 프로젝트 기획

• shadcn/ui 사용 중 CLI 도구의 제한성(3개의 명령어, 반복적 작업)이 불편함을 유발
• TweakCN을 통한 theming 해결 후, CLI 도구 개선 필요성 확인
• 프로젝트 목표: shadcn/ui 사용 편의성 증대, 반복 작업 최소화

2. 기술 스택 및 개발 과정

• Typescript + @clack/prompts + commander.js + chalk 기반으로 개발
• 1~2일 내에 첫 번째 명령어 구현
• TUI 기반 add 명령어로 컴포넌트 설치 프로세스 간소화

3. 주요 기능 및 명령어

• add 명령어:
• TUI 인터페이스로 컴포넌트 선택 후 자동 설치
• 공식 CLI 활용하여 기존 라이브러리와 호환성 유지
• lint 명령어:
• 프로젝트 내 사용하지 않는 shadcn 컴포넌트 감지
• 즉시 제거 기능 제공
• presets 명령어:
• 9개 내장 프리셋 제공
• 사용자 정의 프리셋(~/.compadcn/custom-presets.json) 지원
• compadcn p i 형식으로 빠른 설치 가능

4. `remove` 명령어의 특징

• 의존성 체크 기능:
• button 컴포넌트 삭제 시 calendar와 같은 내부 의존성 존재 시 제거 불가
• 상호 의존성이 있는 컴포넌트는 동시 제거 시만 선택 가능
• 자동 정리 기능:
• 컴포넌트 파일, import 문, 의존성 제거 자동 처리

5. 프로젝트 성과 및 활용 방안

• 1주일 내 개발 완료 (CLI 개발 경험 없음)
• GitHub에 오픈소스로 공개 (https://github.com/lirena00/compadcn)
• shadcn/ui 사용자에게 추천: 반복 작업 감소, 작업 흐름 유지 가능

결론

• compadcn CLI 도구는 shadcn/ui 사용자에게 필수적인 도구로, TUI 기반 설치, 의존성 관리, 프리셋 기능을 통해 작업 효율성 극대화 가능
• GitHub에서 피드백 및 기능 개선 요청 가능
• compadcn은 shadcn/ui 작업의 반복적 과정을 자동화하여 개발자 생산성 향상에 기여