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

🎯 학습 목표

• 컴포넌트를 파일로 분리하고 재사용하는 법을 익힌다.
• 부모 → 자식 간 데이터 전달은 props, 자식 → 부모 이벤트 전달은 $emit을 사용한다.

1️⃣ 컴포넌트 구조로 분리하기

폴더 구조 예시

src/
├── components/
│   └── TodoItem.vue
├── App.vue
└── main.js

2️⃣ TodoItem.vue (자식 컴포넌트)

<template>
  <li class="todo-item">
    ✅ {{ content }}
    <button @click="$emit('delete')">삭제</button>
  </li>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed #ddd;
}
.todo-item button {
  background: #ff5c5c;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.todo-item button:hover {
  background: #e14e4e;
}
</style>

3️⃣ App.vue (부모 컴포넌트)

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

<script>
import TodoItem from './components/TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      const trimmed = this.newTodo.trim()
      if (trimmed) {
        this.todos.push(trimmed)
        this.newTodo = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style scoped>
@import './assets/base.css';

.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);
}

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

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

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

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

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

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

📁 src/assets/base.css

이 파일은 전역적으로 사용할 수 있는 기본 리셋 및 공통 스타일을 정의합니다.

/* src/assets/base.css */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: #f2f2f2;
  color: #333;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  font-family: inherit;
  font-size: inherit;
}

📘 또 다른 base.css 적용 방식

main.js에서 global import

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import './assets/base.css' // 전역 스타일

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

🧠 props와 $emit 개념 요약

📌 props: 부모가 자식에게 값을 전달할 때 사용

// 부모에서
<TodoItem :content="todo" />

// 자식에서
props: {
  content: {
    type: String,
    required: true
  }
}

props는 읽기 전용입니다. 자식 컴포넌트는 props 값을 직접 변경하면 안 됩니다.

📌 $emit: 자식이 부모에게 이벤트를 알릴 때 사용

// 자식에서
<button @click="$emit('delete')">삭제</button>

// 부모에서
<TodoItem @delete="removeTodo(index)" />

$emit('이벤트명')은 마치 자식이 부모에게 “나 뭔가 했다!”고 알려주는 신호입니다.

🎯 관계 정리

✅ 핵심 개념 정리

GitHub - heroyooi/vue2-app at ch3