AI 개발툴을 살펴보던중 reddit 어느 댓글의 조언에 따라 v0으로 프론트엔드를 구성을 테스트했습니다. v0로 프론트엔드 구성후 상세 로직은 cursorAI를 통해 수정하기를 추천했습니다.
- v0는 shadcn-ui를 사용하여 컴포넌트를 구성합니다.
- cursor ai와 달리 코드 내의 변경사항 상세를 확인할 수는 없습니다. 대신 코드변경을 통해 한 일을 요약해줍니다.
- 포크해서 마지막 변경사항까지를 반영한 새 채팅을 만들수 있습니다.
- cursor는 파일별로 버전관리가 되는 반면, v0는 변경 사항 전체로 묶어 버전 관리합니다.
- deploy시 vercel에 프로젝트를 만듭니다. 과거 버전을 선택하여 deploy 할 수 있습니다.
- 무료 티어의 하루 가능 질문량이 많지는 않습니다.
v0 프로젝트에 추가하기
Add to codebase 버튼(아이콘)을 클릭해 다음 내용을 복사, 내 환경에서 실행합니다.
현재 경로의 하위에 프로젝트를 생성합니다.
npx shadcn@latest add "https://v0.dev/chat/...
pnpm을 사용해 위 코드를 실행하려면 npx 대신 pnpm dlx를 사용해야 합니다.
pnpm dlx는 일회성 명령어 실행을 위해 설치된 패키지를 사용하며, npx와 동일한 목적을 수행합니다.
pnpm dlx shadcn@latest add "https://v0.dev/chat/...
참고: 동적 패키지 실행 - npx or pnpm dlx
로컬 또는 글로벌 의존성 설치 없이 패키지를 실행할 때 사용합니다.
- 빠르게 특정 패키지를 실행하고자 할 때
(e.g.,
npx create-react-app)
- 글로벌 설치를 피하고 싶을 때 (e.g., CLI 도구를 일시적으로 실행)
- 로컬 버전을 우선적으로 실행하고 싶을 때 (e.g., 프로젝트 내 eslint 실행)
패키지 관리자를 pnpm으로 사용중이라면`
npx 대신 pnpm dlx을 사용할 수 있습니다.참고: shadcn-ui 사용법
npx shadcn-ui@latest init
npx shadcn-ui add [component]