간단한 Todo List 만들기

Vue.js로 간단한 Todo List 만들기: 상세 가이드

소개

Vue.js는 간결하고 유연한 프레임워크로, 빠르게 웹 애플리케이션을 개발하는 데 적합합니다. 이번 가이드에서는 Vue.js를 활용하여 간단한 Todo List를 만들어 보면서 Vue.js의 기본 개념과 실제적인 사용법을 익혀보겠습니다.

준비

• Node.js 및 npm(또는 yarn) 설치: Vue.js 개발 환경을 구축하기 위해 Node.js와 npm(또는 yarn)이 필요합니다. 공식 홈페이지에서 설치 파일을 다운로드하여 설치해주세요.
• Vue CLI 설치: Vue 프로젝트를 빠르게 생성하기 위해 Vue CLI를 설치합니다. 터미널에서 다음 명령어를 실행하세요.

npm install -g @vue/cli

 

728x90

프로젝트 생성

• 새 프로젝트 생성: 터미널에서 다음 명령어를 실행하여 새로운 Vue 프로젝트를 생성합니다.

Bash

vue create todo-list

 

• 프로젝트 설정: 프로젝트 생성 과정에서 필요한 설정을 선택합니다. 여기서는 기본 설정으로 진행하겠습니다.

컴포넌트 생성

• TodoItem 컴포넌트: 각 Todo 항목을 나타내는 컴포넌트를 생성합니다. 터미널에서 다음 명령어를 실행하세요.

Bash

cd todo-list
vue create TodoItem

 

• App.vue 수정: 생성된 TodoItem 컴포넌트를 App.vue에서 사용합니다.

<template>
  <div id="app">
    <TodoItem v-for="item in todos" :key="item.id" :todo="item" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    TodoItem
  },
  data() {
    return {
      todos: [
        { id: 1, text: '장보기', completed: false },
        { id: 2, text: '운동하기', completed: true }
      ]
    }
  }
}
</script>

 

TodoItem 컴포넌트 구현

• 템플릿: Todo 항목의 내용과 완료 여부를 표시하는 템플릿을 작성합니다.

<template>
  <li :class="{ completed: todo.completed }">
    {{ todo.text }}
    <button @click="$emit('remove')">삭제</button>
  </li>
</template>

 

• 스크립트: 부모 컴포넌트에서 전달받은 todo 데이터를 사용하고, 삭제 버튼 클릭 시 remove 이벤트를 발생시킵니다.

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: {
      type: Object,
      required: true
    }
  }
}
</script>

 

기능 추가

• Todo 추가: 입력 필드와 추가 버튼을 만들어 새로운 Todo를 추가하는 기능을 구현합니다.
• Todo 삭제: TodoItem 컴포넌트에서 발생한 remove 이벤트를 App.vue에서 처리하여 해당 Todo를 삭제합니다.
• Todo 완료/미완료 토글: 체크박스를 사용하여 Todo의 완료 여부를 토글하는 기능을 구현합니다.
• 로컬 스토리지: 사용자가 입력한 Todo 데이터를 로컬 스토리지에 저장하여 페이지를 새로 고쳐도 데이터가 유지되도록 합니다.

심화

• Vuex: 상태 관리 라이브러리인 Vuex를 사용하여 더 복잡한 애플리케이션을 관리할 수 있습니다.
• 컴포넌트 재사용: TodoItem 컴포넌트를 기반으로 다양한 Todo List 기능을 구현할 수 있습니다.
• CSS 스타일링: CSS를 사용하여 Todo List의 디자인을 개선할 수 있습니다.

결론

이번 가이드를 통해 Vue.js를 활용하여 간단한 Todo List를 만들어 보았습니다. Vue.js의 컴포넌트 기반 개발 방식과 데이터 바인딩 등의 기본 개념을 이해하고, 실제 프로젝트에 적용할 수 있는 기반을 다졌습니다. 더욱 복잡한 기능을 구현하고 싶다면 Vue.js 공식 문서를 참고하여 학습을 이어나가세요.