1프로젝트 생성
터미널을 열고 원하는 폴더로 이동한 뒤, 아래 명령어를 실행하세요.
# 프로젝트 생성
npm create vite@latest my-todo -- --template vue-ts
# 폴더로 이동
cd my-todo
# 의존성 설치
npm installReact vs Vue
Vue는 HTML에 가까운 템플릿 문법을 사용합니다:
v-model로 양방향 바인딩이 간단함v-if,v-for로 직관적인 조건/반복- Single File Component (.vue)로 HTML/CSS/JS 통합
중간 용어 팁: CLI / 의존성
- CLI: 터미널에서 명령어로 프로젝트를 생성/실행하는 방식입니다.
- npm: 패키지 설치/업데이트를 담당하는 도구입니다.
- 의존성(Dependency): Vue, Tailwind처럼 프로젝트가 사용하는 외부 라이브러리입니다.
- 심화 학습: 도구 설치/터미널 기초
2Tailwind CSS 설치
Tailwind CSS를 설치하면 클래스만으로 예쁜 UI를 만들 수 있습니다.
# Tailwind 설치
npm install -D tailwindcss postcss autoprefixer
# 설정 파일 생성
npx tailwindcss init -p tailwind.config.js 파일을 열고 아래처럼 수정하세요:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
} src/style.css를 열고 맨 위에 추가하세요:
@tailwind base;
@tailwind components;
@tailwind utilities;3개발 서버 실행
npm run dev
브라우저에서 http://localhost:5173을 열면 Vite + Vue 기본 페이지가 보입니다.
Vue 로고가 보이면 프론트엔드 기본 설정이 완료된 것입니다.
4AI로 UI 만들기
이제 AI에게 할 일 관리 UI를 만들어달라고 요청합니다. 아래 프롬프트를 복사해서 Antigravity 또는 ChatGPT에 붙여넣으세요.
AI 프롬프트
복사해서 사용하세요
"Vue 3 + TypeScript + Tailwind로 할 일 관리 앱을 만들어줘. 요구사항: 1. src/App.vue에 메인 레이아웃 (헤더 + 콘텐츠) 2. 할 일 목록을 보여주는 리스트 UI 3. 새 할 일 입력 폼 4. 완료 체크박스 (토글) 5. 할 일 삭제 버튼 6. 지금은 ref()로 로컬 데이터 관리 (나중에 API 연결할 거야) 스타일: - 다크 모드 배경 (bg-gray-900) - 카드는 bg-gray-800 - 완료된 항목은 취소선 파일 구조: - src/App.vue - src/components/TodoForm.vue - src/components/TodoItem.vue - src/types/index.ts"
위 프롬프트를 AI에게 전달하세요. Antigravity를 사용한다면 Cmd+L로 에이전트 패널을 열 수 있습니다.
Vue 3 Composition API
<script setup>문법 사용 권장ref()로 반응형 상태 관리v-model로 입력 바인딩
5예상 결과물
AI가 만들어준 코드를 적용하면 이런 화면이 나옵니다:
할 일 목록
완성된 예제 코드는 GitHub 저장소 에서 확인할 수 있습니다.