Vue.js는 특히 반응형 UI를 손쉽게 구축할 수 있는 강력한 프론트엔드 프레임워크입니다. 이번 글에서는 Vue.js를 사용하여 간단한 Todo List 애플리케이션을 만들어보겠습니다. 이 애플리케이션은 기본적인 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 포함하며, Vue.js의 기초적인 사용법을 익힐 수 있는 좋은 기회가 될 것입니다.

프로젝트 설정

먼저, 새로운 Vue.js 프로젝트를 생성하겠습니다. Vue CLI를 이용하면 쉽게 프로젝트를 설정할 수 있습니다. 만약 Vue CLI가 설치되어 있지 않다면, 아래 명령어로 설치해주세요.

npm install -g @vue/cli

다음으로, 새로운 Vue 프로젝트를 생성합니다.

vue create todo-list

프로젝트가 생성된 후, 해당 디렉토리로 이동합니다.

cd todo-list

이제 프로젝트가 준비되었습니다. 개발 서버를 실행하여 기본적인 Vue 애플리케이션이 잘 작동하는지 확인해봅시다.

npm run serve

브라우저에서 http://localhost:8080으로 접속하여 기본 페이지가 잘 보이는지 확인합니다.

Todo List 애플리케이션 구현

이제 Todo List 애플리케이션의 기본 구조를 만들겠습니다. src 디렉토리 안에 components 폴더를 만들고, 그 안에 TodoList.vue 파일을 생성합니다. 이 파일에서 Todo List의 UI와 로직을 구현할 것입니다.

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="할 일을 입력하세요." />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span :class="{ completed: todo.completed }" @click="toggleTodo(index)">{{ todo.text }}</span>
        <button @click="removeTodo(index)">삭제</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo) {
        this.todos.push({ text: this.newTodo, completed: false });
        this.newTodo = ''; // 입력란 초기화
      }
    },
    toggleTodo(index) {
      this.todos[index].completed = !this.todos[index].completed;
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
}
</script>

<style>
.completed {
  text-decoration: line-through;
  color: gray;
}
</style>

코드 설명

  1. 템플릿: 기본적인 HTML 구조로, 입력 필드와 Todo 항목을 나열할 ul 요소가 포함되어 있습니다. v-model 디렉티브를 사용해 입력 필드와 newTodo 변수를 바인딩합니다. @keyup.enter 이벤트로 Enter 키를 눌렀을 때 addTodo 메소드를 실행합니다.
  2. 스크립트: data에서 새로운 Todo와 Todo 목록을 초기화합니다. addTodo, toggleTodo, removeTodo 메소드로 각각 Todo 추가, 완료 상태 변경, Todo 삭제 기능을 구현합니다.
  3. 스타일: 완료된 Todo 항목에 대해 선을 긋는 스타일을 적용합니다.

App.vue에 컴포넌트 추가

이제 App.vue 파일에 TodoList 컴포넌트를 추가해야 합니다. src/App.vue 파일을 열고 다음과 같이 수정합니다.

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
  components: {
    TodoList
  }
}
</script>

<style>
/ 필요한 스타일 추가 /
</style>

애플리케이션 실행

모든 설정이 완료되었습니다. 다시 개발 서버를 실행하여 애플리케이션이 정상적으로 작동하는지 확인해봅시다.

npm run serve

브라우저에서 http://localhost:8080에 접속하면 Todo List 애플리케이션이 나타나고, 할 일을 추가하고 완료 상태를 변경 및 삭제하는 기능이 정상적으로 작동하는 것을 확인할 수 있습니다.

마무리

이번 글에서는 Vue.js를 사용하여 간단한 Todo List 애플리케이션을 만드는 과정을 소개했습니다. 이 애플리케이션은 Vue.js의 기본적인 개념을 이해하는 데 도움을 주며, 실제 프로젝트에 응용할 수 있는 많은 기능들을 포함하고 있습니다. 앞으로도 다양한 Vue.js의 기능을 탐구하며 더 복잡하고 실용적인 애플리케이션을 만들어보길 바랍니다.