윈도우 11 OS에 ShadCN UI 를 로컬세팅해봤다.
ShadCN UI는 바닐라 JS(순수 HTML, CSS, JS) 환경에서 직접 사용할 수 없다.
React 컴포넌트 라이브러리이므로 React 환경이 필요하다.
바닐라 JS에서 바로 사용할 수 있도록 변환된 버전이 제공되지 않는다.
1. Node.js 설치
Node.js 웹사이트(https://nodejs.org/)에서 LTS 버전(Long Term Support, 장기 지원)을 다운로드 및 설치한다.
node -v
ex) v22.19.0
ex) v22.19.0
2. pnpm 설치
npm을 통해 pnpm 설치한다.
#pnpm 설치
npm install -g pnpm
#pnpm 설치확인
pnpm -v
ex) 9.3.0
npm install -g pnpm
#pnpm 설치확인
pnpm -v
ex) 9.3.0
3. GitHub 저장소 Fork, Clone
ShadCN UI 깃헙에 들어가서 본인의 깃헙으로 포크한다.
ShadCN UI 깃헙주소 : https://github.com/shadcn-ui/ui
포크하면 주소 기본값은 https://github.com/계정명/ui.git 이다.
개인적으로 "ui.git"은 너무 일반적인 이름인 것 같아서, https://github.com/계정명/shadcn-ui.git 으로 Fork했다.
cd /원하는위치
#git clone https://github.com/계정명/shadcn-ui.git
git clone https://github.com/username/shadcn-ui.git
cd shadcn-ui
#git clone https://github.com/계정명/shadcn-ui.git
git clone https://github.com/username/shadcn-ui.git
cd shadcn-ui
4. 브랜치 생성
#git checkout -b 계정명-branch
git checkout -b username-branch
git checkout -b username-branch
5. 의존성 설치
pnpm install
6. 개발서버 실행
pnpm --filter=www dev
또는
pnpm www:dev
이후 웹브라우저에서 http://localhost:3333 을 열어 확인하면 된다.또는
pnpm www:dev
pnpm www:dev 는 pnpm --filter=www dev 의 단축 명령어이다.
결과적으로 같지만, pnpm www:dev가 더 짧고 편하다.
(package.json 파일의 scripts 항목에 "www:dev": "pnpm --filter=www dev"가 있어서 실행되는 것이다.)
7. CLI 명령어
(1) 웹사이트 실행
pnpm --filter=www dev
또는
pnpm www:dev
ShadCN UI 웹사이트는 Next.js로 개발되어 있다.또는
pnpm www:dev
www는 ShadCN UI 프로젝트의 apps/www 폴더를 의미한다.
pnpm www:dev는 apps/www 폴더에서 dev 명령어(= Next.js 개발 서버 실행)를 실행한다.
(2) CLI 명령어 실행
pnpm shadcn
ShadCN UI의 CLI(Command Line Interface, 커맨드라인 인터페이스)를 직접 실행하는 명령어이다.이 명령어는 ShadCN UI의 CLI를 실행해서 UI 컴포넌트를 추가할 때 사용한다.
pnpm shadcn을 실행하면, 터미널에서 shadcn CLI를 사용할 수 있다.
예를 들어, ShadCN UI를 내 React 프로젝트에 설치하려면 아래와 같이 사용한다.
pnpm shadcn init #프로젝트에 ShadCN UI 설정 추가
pnpm shadcn add button #버튼 컴포넌트 추가
pnpm shadcn add input #입력창 컴포넌트 추가
pnpm shadcn add button #버튼 컴포넌트 추가
pnpm shadcn add input #입력창 컴포넌트 추가
(3) CLI 명령어 실행 (개발모드)
pnpm shadcn:dev
ShadCN UI의 CLI(Command Line Interface, 커맨드라인 인터페이스)를 개발 모드로 실행하는 명령어다.ShadCN UI는 shadcn이라는 CLI를 제공해서, React 프로젝트에 UI 컴포넌트를 추가하는 기능을 한다.
ShadCN UI CLI를 개발 모드로 실행해서 수정한 코드를 바로 반영할 수 있다.
packages/cli 폴더에서 CLI 코드를 직접 수정하고 테스트할 때 사용된다.
즉, ShadCN UI의 CLI를 개발 모드로 실행하는 명령어인데 일반 사용자라면 필요없다.