Vue와 TypeScript로 실전 Todo 앱 만들기 - 10편

Building a Todo App with Vue and TypeScript - Part 10

npm create vue@latest

cd vue-ts-todo-app
npm install

npm run dev

export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

npm install pinia

import { createApp } from "vue";
import { createPinia } from "pinia";
import "./style.css";
import App from "./App.vue";
 
const app = createApp(App);
app.use(createPinia());
app.mount("#app");

import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { Todo } from '../types' // 2단계에서 정의한 Todo 타입을 불러옵니다.
 
export const useTodoStore = defineStore('todo', () => {
  // ref에 제네릭(<>)을 사용하여 이 데이터가 Todo 객체들의 배열임을 명시합니다.
  const todos = ref<Todo[]>([])
  const nextId = ref(1)
 
  function fetchTodos() {
    todos.value = [
      { id: nextId.value++, text: 'Vue.js + TypeScript 공부하기', completed: true },
      { id: nextId.value++, text: '타입 적용하기', completed: false },
    ]
  }
 
  // 함수의 매개변수에도 타입을 지정하여 의도를 명확히 합니다.
  function addTodo(newTodoText: string) {
    if (!newTodoText.trim()) return
    todos.value.unshift({
      id: nextId.value++,
      text: newTodoText,
      completed: false
    })
  }
 
  function deleteTodo(idToDelete: number) {
    todos.value = todos.value.filter(todo => todo.id !== idToDelete)
  }
 
  function toggleTodo(idToToggle: number) {
    const todo = todos.value.find(todo => todo.id === idToToggle)
    if (todo) {
      todo.completed = !todo.completed
    }
  }
 
  return { todos, fetchTodos, addTodo, deleteTodo, toggleTodo }
})

<script setup lang="ts">
import type { Todo } from '../types'
 
defineProps<{
  todo: Todo
}>()
 
const emit = defineEmits<{
  (e: 'toggle-todo'): void
  (e: 'delete-todo'): void
}>()
</script>
 
<template>
  <li :class="{ completed: todo.completed }">
    <span @click="emit('toggle-todo')">{{ todo.text }}</span>
    <button @click="emit('delete-todo')">삭제</button>
  </li>
</template>
 
<style scoped>
li { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #eee; }
.completed span { text-decoration: line-through; color: #999; }
span { cursor: pointer; }
</style>

<script setup lang="ts">
import { useTodoStore } from '../stores/todoStore'
import TodoItem from './TodoItem.vue'
 
const store = useTodoStore()
 
function onToggle(id: number) {
  store.toggleTodo(id)
}
 
function onDelete(id: number) {
  store.deleteTodo(id)
}
</script>
 
<template>
  <ul>
    <TodoItem
      v-for="todo in store.todos"
      :key="todo.id"
      :todo="todo"
      @toggle-todo="onToggle(todo.id)"
      @delete-todo="onDelete(todo.id)"
    />
  </ul>
</template>
 
<style scoped>
ul {
  list-style: none;
  padding: 0;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { useTodoStore } from '../stores/todoStore'
 
const newTodoText = ref<string>('')
const store = useTodoStore()
 
function handleSubmit() {
  store.addTodo(newTodoText.value)
  newTodoText.value = '' // 입력창 비우기
}
</script>
 
<template>
  <form @submit.prevent="handleSubmit">
    <input
      v-model.trim="newTodoText"
      placeholder="새로운 할 일을 입력하세요"
    />
    <button type="submit">추가</button>
  </form>
</template>
 
<style scoped>
form {
  display: flex;
  margin-bottom: 16px;
}
input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 12px;
  margin-left: 8px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

npm install vue-router@4

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }
    // '/about' 경로는 깨끗하게 지워주세요.
  ]
})
 
export default router

import { createApp } from 'vue'
import { createPinia } from 'pinia'
 
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
 
app.use(createPinia())
app.use(router)
 
app.mount('#app')

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
 
<template>
  <RouterView />
</template>
 
<style>
/* 전역 스타일을 이곳이나 src/assets/main.css에 작성할 수 있습니다. */
body {
  background-color: #f0f2f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
</style>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useTodoStore } from '../stores/todoStore'
import TodoForm from '../components/TodoForm.vue'
import TodoList from '../components/TodoList.vue'
 
const store = useTodoStore()
 
// 컴포넌트가 화면에 그려질 때 초기 데이터를 불러옵니다.
onMounted(() => {
  store.fetchTodos()
})
</script>
 
<template>
  <main>
    <h1>My Todo App</h1>
    <TodoForm />
    <TodoList />
  </main>
</template>
 
<style scoped>
main {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  background-color: white;
}
h1 {
  text-align: center;
  color: #333;
}
</style>