🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• Vue 인스턴스의 기본 구조를 이해하고 직접 구성할 수 있다.
• 템플릿 문법을 통해 화면에 데이터를 출력하고 동적으로 바인딩할 수 있다.

1️⃣ Vue 인스턴스란?

Vue 앱은 new Vue()로 시작하는 Vue 인스턴스를 기반으로 작동합니다.

Vue 2에서는 이 인스턴스를 통해 데이터를 선언하고, DOM과 연결(binding)합니다.

🔧 main.js 예시

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

render: h => h(App)는 루트 컴포넌트(App.vue)를 DOM에 렌더링합니다.

2️⃣ 템플릿 문법 기본

✅ 데이터 바인딩 (Interpolation)

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '안녕하세요, Vue!'
    }
  }
}
</script>

✅ 속성 바인딩: v-bind

<img v-bind:src="imageUrl" alt="이미지" />

축약형: :src="imageUrl"

3️⃣ 디렉티브(Directive)

✅ 조건 렌더링: v-if, v-else, v-show

<p v-if="isLoggedIn">환영합니다!</p>
<p v-else>로그인 해주세요.</p>

✅ 반복 렌더링: v-for

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index + 1 }}. {{ item }}
  </li>
</ul>

<script>
export default {
  data() {
    return {
      items: ['HTML', 'CSS', 'Vue']
    }
  }
}
</script>

4️⃣ 이벤트 핸들링: v-on

<button v-on:click="handleClick">클릭</button>

축약형: @click="handleClick"

methods: {
  handleClick() {
    alert('버튼이 클릭되었습니다!')
  }
}

💻 실습: 간단한 할 일 리스트

<template>
  <div class="todo-container">
    <h2>📝 오늘의 할 일</h2>
    <div class="form">
      <input v-model="newTodo" placeholder="할 일을 입력하세요" />
      <button @click="addTodo">추가</button>
    </div>
    <ul class="todo-list">
      <li v-for="(todo, i) in todos" :key="i">
        ✅ {{ todo }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo.trim())
        this.newTodo = ''
      }
    }
  }
}
</script>

<style scoped>
.todo-container {
  max-width: 400px;
  margin: 40px auto;
  padding: 24px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.todo-container h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.form input {
  flex: 1;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 6px;
  font-size: 14px;
}

.form button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.form button:hover {
  background-color: #36956d;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  padding: 6px 0;
  font-size: 16px;
  border-bottom: 1px dashed #ddd;
}
</style>

✅ 마무리 정리

• Vue 인스턴스는 앱의 뿌리이며, data, methods 등의 옵션을 가집니다.
• 템플릿 문법은 데이터를 화면에 출력하거나 조건, 반복, 이벤트를 제어합니다.
• v-model을 이용해 양방향 데이터 바인딩도 간단히 구현할 수 있습니다.