[Vue] 1단계: 프로젝트 생성 + 템플릿 문법 기초

✅ 1단계: 프로젝트 생성 + 템플릿 문법 기초

① Vite로 Vue 3 + TypeScript 프로젝트 생성하기

npm create vite

프롬프트가 나오면 아래처럼 선택

• ✔ Project name: vue3-ts-tutorial
• ✔ Framework: Vue
• ✔ Variant: Vue + TypeScript

cd vue3-ts-tutorial
npm install
npm run dev

---

② 파일 구조 훑어보기

src/
├── assets/                // 이미지 등 정적 파일
├── components/            // Vue 컴포넌트들
│   └── HelloWorld.vue
├── App.vue                // 루트 컴포넌트
├── main.ts                // 앱 진입점

---

③ 템플릿 문법 기초 (공식 문서: Template Syntax)

🔍 주요 문법 예시

<template>
  <h1></h1>
  <p v-if="isVisible">이 문장은 조건에 따라 보입니다.</p>
  <ul>
    <li v-for="(item, index) in items" :key="index"></li>
  </ul>
  <button @click="increase">카운트: 9</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('안녕하세요, Vue 3!')
const isVisible = ref(true)
const items = ref(['Vue', 'TypeScript', 'Vite'])
const count = ref(0)

function increase() {
  count.value++
}
</script>

---

💡 핵심 개념 요약

개념	설명
ref	반응형 상태를 만들 때 사용 (TS에서는 타입 지정 가능: ref<number>(0))
v-if / v-for	조건부 렌더링 / 리스트 렌더링
@click	이벤트 바인딩
``	템플릿에서 데이터 출력

---

💬 면접에서 나올 수 있는 질문

💡 Q1. ref와 reactive의 차이는?

• ref: 원시값에 적합 (숫자, 문자열 등)
• reactive: 객체나 배열 등 구조화된 데이터에 사용
• ref는 .value로 접근, reactive는 바로 사용 가능

💡 Q2. v-for에서 key를 왜 써야 하나요?

• DOM diffing 과정에서 성능 최적화를 위해 필수
• 항목이 바뀔 때 효율적인 렌더링을 위해 :key를 지정함

---

🎯 실습 미션

1. HelloWorld.vue 파일을 지우고, 직접 새로운 컴포넌트를 만들어보세요.

2. 예를 들어 GreetingCard.vue를 만들고 아래 조건을 만족시켜보세요:

   • 이름을 입력하면 "안녕하세요, [이름]님!"이라고 표시됨
   • 버튼을 누르면 인사 횟수가 증가
   • 인사 횟수가 3번 이상이면 축하 메시지 표시

<template>
  <form @submit.prevent="increase">
    <input v-model="name" placeholder="이름을 입력하세요" />
    <button>인사 받고 싶어요!</button>
  </form>
  <ul>
    <li v-for="(greeting, index) in greetings" :key="index">
      
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from "vue";

const name = ref("");
const greetings = ref<string[]>([]);

function increase() {
  if (name.value.trim()) {
    greetings.value.push(`안녕하세요, ${name.value}님!`);
  }
}
</script>

---

END