1. Vue

GITHUB

1. Vite 개발 환경과 Vue 핵심 문법

HTML, CSS, JavaScript 기초 지식을 갖춘 상태에서 Vite를 이용해 Vue 프로젝트를 생성하고, 핵심 문법 6가지를 실습을 통해 학습하도록 작성되었다

2. Vite로 Vue 개발 환경 만들기

Vite는 요리로 치면 "재료 손질과 불 조절을 대신해 주는 주방 보조"다.
코드를 고치면 브라우저 화면을 즉시 갈아 끼워 주기 때문에, 저장할 때마다 결과를 눈으로 바로 확인하며 배울 수 있다. 순서대로 수행하며 빈칸과 코드를 완성한다.

2.1 – 작업 환경 준비

프로젝트를 제작할 폴더를 만든다.

1. 바탕화면 또는 문서 폴더에서 마우스 오른쪽 클릭 → [새로 만들기] → [폴더] 를 누른다.
2. 폴더 이름을 vue-test 으로 입력하고 Enter 를 누른다.
3. VS Code를 실행하고 vue-test 를 루트로 연다
4. 
5. 

2.2 – Node.js 확인과 설치

Vite는 Node.js(자바스크립트를 브라우저 밖에서 돌리는 실행기) 위에서 동작한다. 설치 여부부터 확인한다.

1. VS Code 메뉴에서 [터미널] → [새 터미널] 을 누른다. 화면 아래에 명령 입력 창이 열린다. ctrl + `
2. 터미널에 아래 명령을 입력하고 enter

node -v

1. v22.12.0 처럼 버전 번호가 나오면 설치돼 있는 것이다
2. 

2.2.1 – Vite로 Vue 프로젝트 생성

준비된 폴더 안에 Vue 프로젝트 뼈대를 만든다. 명령 하나를 치면 Vite가 질문 몇 개를 던지고, 답에 맞춰 파일 구조를 통째로 깔아 준다.

1. 터미널에 아래 명령을 입력하고 Enter 를 누른다.

npm create vite@latest . vuetify-app

1. 질문이 차례로 나온다. 방향키 ↑↓ 로 고르고 Enter 로 확정한다. Select a framework: → Vue 를 고른다. Select a variant: → JavaScript 를 고른다. Use rolldown-vite (Experimental)?: 이 나오면 → No 를 고른다. Install with npm and start now?: 이 나오면 → No 를 고른다. 설치는 다음 단계에서 직접 해 보며 익힌다.
2. Select a framework: → Vue 를 고른다.
3. Select a variant: → JavaScript 를 고른다.
4. Use rolldown-vite (Experimental)?: 이 나오면 → No 를 고른다.
5. Install with npm and start now?: 이 나오면 → No 를 고른다. 설치는 다음 단계에서 직접 해 보며 익힌다.
6. 
7. Done. Now run: 아래로 안내 명령 세 줄이 보이면 성공이다.
8. 
9. 

질문 구성은 Vite 버전에 따라 조금 다를 수 있다. 위 목록에 없는 질문이 나오면 기본값(Enter)으로 넘어가면 된다. 반대로 3·4번 질문이 아예 안 나와도 문제없다.

2.2.2 – 의존성 설치와 개발 서버 실행

프로젝트 뼈대는 생겼지만 아직 부품(라이브러리)이 비어 있다. 부품을 채우고 개발 서버를 켜서 브라우저로 확인한다.

1. 터미널 창에서 Ctrl+c 를 누르면 서버가 종료된다.
2. 아래 명령어를 복사하고 터미널 창에 우클릭하여 붙여 넣은 후 실행한다.

  npm run dev

1. 다시 개발 서버의 주소가 뜨면 링크를 클릭하여 브라우저를 실행해보자.

2.2.3 – 폴더 구조 읽기

Vite가 만들어 준 파일들이 각각 무슨 역할인지 알아야 다음 회차부터 어디를 고칠지 안다. VS Code 왼쪽 탐색기에서 vue-test 폴더를 펼쳐 아래 표와 대조한다.

연결 흐름은 한 줄이다: 브라우저가 index.html 을 열면 → main.js 가 실행되고 → App.vue 가 #app 자리에 그려진다. 화면에 보이는 모든 것의 출발점이 App.vue 라는 뜻이다.

2.2.4 – 첫 수정과 즉시 반영 체험

파일을 고치면 브라우저가 얼마나 빨리 반응하는지 직접 본다. 이 즉시 반영(HMR, Hot Module Replacement)이 Vite 학습 속도의 핵심이다.

1. VS Code 탐색기에서 src/App.vue 를 클릭해 연다.
2. 확장프로그램 설치 안내가 뜨면 설치한다.

1. <template> 안에서 <HelloWorld/> 줄을 찾아 ctrl+클릭 한다

1. <div><h1>안녕하세요</h1><p>이것이 <code>뷰</code> 인가요</p></div> 로 고친다.
2. Ctrl+S 로 저장한다.
3. 브라우저를 본다. 새로고침 없이 제목이 바뀌어 있다.

저장 순간 Vite가 바뀐 부품만 갈아 끼웠기 때문에, 카운터를 눌러 둔 숫자 같은 화면 상태도 유지된 채 글자만 바뀐다.

2.2.5. 실습 코칭 프롬프트

이 페이지를 혼자 다시 해 보다 막히면, 아래 프롬프트의 { } 를 채워 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣는다. AI가 답을 통째로 주는 대신 한 단계씩 이끌어 준다.

너는 Vite + Vue 개발 환경 구축 실습 코치다.
나는 지금 Vite로 Vue 프로젝트를 만들어 브라우저에 기본 화면을 띄우는 실습을 하고 있다.
목표: npm create vite@latest로 프로젝트를 만들고, npm run dev로 http://localhost:5173 화면을 띄운다.

내 상황:
- 운영체제: {운영체제}
- 지금까지 한 것: {지금까지 한 단계}
- 막힌 지점: {막힌 단계}
- 터미널에 뜬 메시지(있는 그대로): {터미널 메시지}

코칭 규칙:
1. 해결 명령을 한꺼번에 다 주지 말고, 다음 한 단계만 알려 준다.
2. 단계를 주기 전에, 왜 이 문제가 생겼는지 한 줄로 먼저 짚는다.
3. 내가 그 단계를 해 본 결과를 물은 뒤에 다음 단계로 넘어간다.
4. 마지막에 브라우저에 Vite + Vue 화면이 떴는지 확인 질문을 던진다.

1. {운영체제} — 쓰는 컴퓨터 환경. 예: Windows 11, macOS Sonoma.
2. {지금까지 한 단계} — 완료한 지점. 예: npm create vite@latest까지 실행함.
3. {막힌 단계} — 안 되는 작업. 예: npm run dev를 쳐도 주소가 안 나온다.
4. {터미널 메시지} — 에러 전문을 복사해 붙인다. 예: 'npm'은(는) 내부 또는 외부 명령... 이 아닙니다.

변수를 채운 완성 예시는 다음과 같다.

너는 Vite + Vue 개발 환경 구축 실습 코치다.
나는 지금 Vite로 Vue 프로젝트를 만들어 브라우저에 기본 화면을 띄우는 실습을 하고 있다.
목표: npm create vite@latest로 프로젝트를 만들고, npm run dev로 http://localhost:5173 화면을 띄운다.

내 상황:
- 운영체제: Windows 11
- 지금까지 한 것: npm create vite@latest까지 실행함
- 막힌 지점: npm run dev를 쳐도 주소가 안 나온다
- 터미널에 뜬 메시지(있는 그대로): 'vite'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

코칭 규칙:
1. 해결 명령을 한꺼번에 다 주지 말고, 다음 한 단계만 알려 준다.
2. 단계를 주기 전에, 왜 이 문제가 생겼는지 한 줄로 먼저 짚는다.
3. 내가 그 단계를 해 본 결과를 물은 뒤에 다음 단계로 넘어간다.
4. 마지막에 브라우저에 Vite + Vue 화면이 떴는지 확인 질문을 던진다.

2.3 – Vue 핵심 문법 여섯 가지

우리가 다룰 Vuetify는 버튼·카드 같은 완제품 부품 모음이다. 부품을 화면에 붙이고 데이터와 연결하는 접착제가 Vue 문법이고, 실무에서 매일 쓰는 Vue 문법은 사실상 여섯 가지다: 출력 {{ }}, 반응형 데이터 ref, 속성 연결 v-bind, 이벤트 v-on, 입력 동기화 v-model, 조건·반복 v-if·v-for. 이 묶음에서는 여섯 가지를 하나씩 손으로 붙여, 마지막에 미니 할 일 목록을 완성한다.

2.3.1 – SFC 구조 읽기와 연습장 만들기

Vue 파일 하나(.vue)는 SFC(Single File Component, 단일 파일 컴포넌트)라고 부른다. 한 파일 안에 뼈대(<template>)·동작(<script>)·꾸밈(<style>)이 같이 들어가는, "부품 하나 = 파일 하나" 구조다.
실습을 단순화하기 위해 불필요한 기본 컴포넌트 파일을 삭제하고 src/App.vue 파일의 내용을 모두 비운다.

1. src/components/ 를 삭제한다.
2. src/App.vue 를 연다.
3. 파일 내용 전체를 Ctrl+A 로 선택하고 Delete 로 지운다.
4. Vue 컴포넌트는 <script setup>,<template>, <style> 세 영역으로 구성된다.
5. 아래 코드를 그대로 입력하고 Ctrl+S 로 저장한다. 파일명 App.vue, 전체 코드다.

<script setup>
</script>

<template>
  <h1>Vue 문법 연습</h1>
</template>

1. src/main.js 를 열어 import './style.css' 줄을 찾아 지우고 Ctrl+S 로 저장한다. Vite 기본 장식을 걷어 내 화면을 흰 종이로 만드는 것이다.

1. 브라우저에 검은 글씨 "Vue 문법 연습" 만 남았는지 확인한다.

<script setup> 은 이 부품의 동작(데이터·함수)을 적는 곳, <template> 은 화면에 그릴 HTML을 적는 곳이다. 이 편에서는 <style> 을 쓰지 않는다. 꾸밈은 다음 편부터 Vuetify가 맡는다.

2.3.2 – 반응형 데이터 ref와 출력 {{ }}

첫 문법은 데이터를 화면에 내보내는 길이다. 일반 변수 대신 ref 로 만든 값은 "감시 카메라가 붙은 상자"라서, 상자 속 값이 바뀌면 Vue가 알아채고 화면을 스스로 다시 그린다.
ref는 Vue 3에서 데이터를 반응형(Reactive)으로 선언하는 함수다.
반응형 데이터란 : 값이 변경될 때 자동으로 UI가 업데이트되는 특별한 데이터(엑셀의 수식 셀)

1. App.vue 를 아래처럼 고치고 저장한다. 바뀐 부분만 적는다.

<script setup>
import { ref } from 'vue'

const msg = ref('안녕, Vue')
</script>

<template>
  <h1>Vue 문법 연습</h1>
  <p>{{ msg }}</p>
</template>

1. 브라우저에 안녕, Vue 가 나오는지 확인한다.

1. script의 '안녕, Vue' 를 '반응형 데이터' 로 고치고 저장해, 화면 글자가 따라 바뀌는 것을 본다.

{{ msg }} 는 "이 자리에 msg 값을 찍어라"라는 출력 구멍이다. HTML에 자바스크립트 값이 흘러드는 첫 통로이므로, 이 모양부터 손에 붙인다.

2.3.3 – v-bind로 태그 속성에 데이터 연결

{{ }} 는 태그 사이 글자에만 쓴다. src·href 같은 태그 속성에 데이터를 넣으려면 v-bind, 줄여서 콜론(:)을 쓴다.

1. script에 한 줄을 추가한다.

const logo = ref('https://vuejs.org/images/logo.png')

1. template의 <p> 아래에 한 줄을 추가하고 저장한다.

<img :src="logo" width="80" alt="Vue 로고" />

1. 브라우저에 초록 Vue 로고가 나오는지 확인한다.

:src="logo" 는 src 속성 값을 문자열이 아니라 변수 logo 로 채우라는 뜻이다. 콜론이 없으면 logo 라는 여덟 글자 그대로가 주소가 돼 이미지가 깨진다. "속성 앞에 콜론 = 따옴표 안을 코드로 읽는다"로 기억한다.

2.3.4 – v-on으로 클릭 받기 – 카운터

이제 화면이 사용자 행동에 반응하게 한다. 이벤트 연결은 v-on:click, 줄여서 골뱅이(@click)를 쓴다.

1. script에 카운터 데이터와 함수를 추가한다.

const count = ref(0)
const addOne = () => {
  count.value++
}

1. template 아래쪽에 두 줄을 추가하고 저장한다.

<p>클릭 수: {{ count }}</p>
<button @click="addOne">+1</button>

1. 브라우저에서 [+1] 버튼을 다섯 번 클릭해 클릭 수: 5 가 되는지 확인한다. 5 × 1 = 5 정상.

여기서 처음으로 .value 가 나왔다. ref 는 값을 상자에 담아 두므로, script 안에서는 count.value 처럼 상자를 열어 꺼내야 한다. 반면 template 안에서는 Vue가 상자를 대신 열어 주므로 {{ count }} 로 충분하다. Vue 입문자가 가장 자주 틀리는 지점이라 여기서 확실히 갈라 둔다.

2.3.5 – v-model로 입력창 동기화

입력창 값을 데이터와 묶는 문법이다. v-model 은 "입력하면 데이터가 바뀌고, 데이터가 바뀌면 입력창도 바뀌는" 양방향 끈이다.

1. script에 한 줄을 추가한다.

const deliveryInst = ref('')

1. template 아래쪽에 두 줄을 추가하고 저장한다.

<input v-model="deliveryInst" placeholder="배송메모" />
<p>입력 중인 내용: {{ deliveryInst }}</p>

1. 입력창을 클릭하고 배송메모를 타이핑한다. 한 글자 칠 때마다 아래 메모가 실시간으로 따라오는지 확인한다.

폼(입력 양식)이 많은 관리자 화면·설문 화면에서 이 한 줄이 이벤트 처리 코드 여러 줄을 대신한다.

2.3.6 – v-if와 v-for로 목록 그리기 – 미니 할 일 목록

마지막 두 문법을 한 번에 쓴다. v-if 는 조건에 따라 태그를 보이거나 숨기고, v-for 는 배열 개수만큼 태그를 찍어 낸다. 지금까지 익힌 여섯 가지를 모아 8편 최종 프로젝트의 초안인 할 일 목록을 만든다.

1. script에 할 일 데이터와 추가 함수를 붙인다.

const newTodo = ref('')
const todos = ref([])
const addTodo = () => {
  if (newTodo.value === '') return
  todos.value.push(newTodo.value)
  newTodo.value = ''
}

1. template 아래쪽에 목록 영역을 추가하고 저장한다.

<hr />
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="할 일 입력" />
<button @click="addTodo">추가</button>
<p v-if="todos.length === 0">할 일이 없다.</p>
<ul v-else>
  <li v-for="(todo, i) in todos" :key="i">{{ todo }}</li>
</ul>

1. 입력창에 우유 사기 를 입력하고 Enter 를 누른다. "할 일이 없다."가 사라지고 목록에 항목이 생기는지 확인한다.
2. Vue 복습, Vuetify 예습 을 이어서 추가해 세 줄 목록이 되는지 확인한다. 1 + 2 = 3개 정상.

동작 흐름을 짚으면 이렇다. Enter 또는 [추가] 클릭 → addTodo 실행 → todos 배열에 값 추가 → 배열이 바뀐 것을 Vue가 감지 → v-for 가 늘어난 개수만큼 <li> 를 다시 그림 → 배열이 비지 않으니 v-if 조건이 거짓이 돼 안내문 대신 v-else 쪽 목록이 보인다. @keyup.enter 는 "키보드에서 손을 뗄 때, 그 키가 Enter면"이라는 조건까지 붙인 이벤트다. :key="i" 는 Vue가 목록 항목을 구분하는 이름표로, v-for 에는 항상 같이 붙인다.

여기까지의 App.vue 전체 완성본은 다음과 같다. 내 파일과 대조해 빠진 줄이 없는지 확인한다.

<script setup>
import { ref } from 'vue'

const msg = ref('반응형 데이터')
const logo = ref('https://vuejs.org/images/logo.png')

const count = ref(0)
const addOne = () => {
  count.value++
}

const name = ref('')

const newTodo = ref('')
const todos = ref([])
const addTodo = () => {
  if (newTodo.value === '') return
  todos.value.push(newTodo.value)
  newTodo.value = ''
}
</script>

<template>
  <h1>Vue 문법 연습</h1>
  <p>{{ msg }}</p>
  <img :src="logo" width="80" alt="Vue 로고" />

  <p>클릭 수: {{ count }}</p>
  <button @click="addOne">+1</button>

  <input v-model="name" placeholder="이름을 입력" />
  <p>안녕, {{ name }}!</p>

  <hr />
  <input v-model="newTodo" @keyup.enter="addTodo" placeholder="할 일 입력" />
  <button @click="addTodo">추가</button>
  <p v-if="todos.length === 0">할 일이 없다.</p>
  <ul v-else>
    <li v-for="(todo, i) in todos" :key="i">{{ todo }}</li>
  </ul>
</template>

2.3.7. 실습 코칭 프롬프트

이 묶음의 문법을 응용해 나만의 기능을 만들어 보다 막히면, 아래 프롬프트를 채워 대화형 AI에 붙여 넣는다.

너는 Vue 3 핵심 문법(ref, v-bind, v-on, v-model, v-if, v-for) 실습 코치다.
나는 Vite로 만든 Vue 프로젝트의 App.vue에서 <script setup> 방식으로 연습하고 있다.
방금 배운 것: 반응형 데이터와 출력, 속성 바인딩, 클릭 이벤트, 입력 동기화, 조건·반복 렌더링.

내 상황:
- 만들려는 기능: {만들려는 기능}
- 지금 내 코드(App.vue 전체): {내 코드}
- 막힌 지점 또는 화면 증상: {막힌 지점}

코칭 규칙:
1. 완성 코드를 통째로 주지 말고, 다음 한 단계만 알려 준다.
2. 먼저 내 코드에서 원인이 되는 줄을 짚고, 왜 문제인지 한 줄로 설명한다.
3. 여섯 문법 중 무엇을 쓸 차례인지 이름을 대며 힌트를 준다.
4. 내가 고쳐 본 결과를 확인한 뒤 다음 단계로 넘어간다.
5. 기능이 완성되면, 배운 문법 중 무엇을 어디에 썼는지 나에게 설명시켜 점검한다.

1. {만들려는 기능} — 응용 목표. 예: 할 일을 클릭하면 목록에서 지워지게 하고 싶다.
2. {내 코드} — App.vue 전체를 Ctrl+A 로 복사해 붙인다. 일부만 붙이면 코치가 원인을 못 찾는다.
3. {막힌 지점} — 증상을 구체적으로. 예: 클릭해도 아무 일이 안 일어난다, 화면이 하얗게 변했다면 터미널·브라우저 에러 메시지도 함께.

변수를 채운 완성 예시는 다음과 같다.

너는 Vue 3 핵심 문법(ref, v-bind, v-on, v-model, v-if, v-for) 실습 코치다.
나는 Vite로 만든 Vue 프로젝트의 App.vue에서 <script setup> 방식으로 연습하고 있다.
방금 배운 것: 반응형 데이터와 출력, 속성 바인딩, 클릭 이벤트, 입력 동기화, 조건·반복 렌더링.

내 상황:
- 만들려는 기능: 할 일을 클릭하면 목록에서 지워지게 하고 싶다
- 지금 내 코드(App.vue 전체): (App.vue 전문 붙여 넣음)
- 막힌 지점 또는 화면 증상: li에 @click을 달았는데 클릭해도 아무 일이 안 일어난다

코칭 규칙:
1. 완성 코드를 통째로 주지 말고, 다음 한 단계만 알려 준다.
2. 먼저 내 코드에서 원인이 되는 줄을 짚고, 왜 문제인지 한 줄로 설명한다.
3. 여섯 문법 중 무엇을 쓸 차례인지 이름을 대며 힌트를 준다.
4. 내가 고쳐 본 결과를 확인한 뒤 다음 단계로 넘어간다.
5. 기능이 완성되면, 배운 문법 중 무엇을 어디에 썼는지 나에게 설명시켜 점검한다.