[javascript] Vue.js를 사용한 프로젝트 예시

01 Dec 2023

javascript

Vue.js는 사용하기 쉬운 JavaScript 프레임워크로, 웹 애플리케이션 개발에 많이 사용됩니다. 이번 포스트에서는 Vue.js를 사용하여 간단한 할일 관리 애플리케이션을 만드는 예시를 살펴보겠습니다.

프로젝트 설정

먼저 Vue CLI를 사용하여 프로젝트를 설정합니다. Vue CLI는 Vue.js 프로젝트를 생성하고 관리하는 도구입니다.

npm install -g @vue/cli
vue create todo-app
cd todo-app

위 명령어를 실행하여 Vue CLI를 설치하고, todo-app이라는 이름의 프로젝트를 생성한 후 해당 디렉토리로 이동합니다.

컴포넌트 생성

애플리케이션의 기능은 할일을 추가하고 목록에서 체크할 수 있어야 합니다. 따라서 TodoList와 TodoItem이라는 두 개의 컴포넌트를 생성하겠습니다.

// TodoList.vue
<template>
  <div>
    <h1>할일 목록</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <todo-item :todo="todo" @toggle="toggleTodo" />
      </li>
    </ul>
  </div>
</template>

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

export default {
  components: {
    TodoItem
  },
  props: {
    todos: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggleTodo(todo) {
      // 할일 체크 토글 로직
    }
  }
};
</script>

// TodoItem.vue
<template>
  <div>
    <input type="checkbox" v-model="todo.done" @change="toggle" />
    <span :class="{ 'done': todo.done }">{{ todo.text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggle() {
      this.$emit('toggle', this.todo);
    }
  }
}
</script>

TodoList 컴포넌트에서는 할일 목록을 보여주고, TodoItem 컴포넌트를 사용하여 각각의 할일을 표시합니다.

애플리케이션 실행

아래 명령어를 실행하여 Vue 개발 서버를 시작합니다.

npm run serve

개발 서버가 열리면 localhost:8080에서 애플리케이션을 확인할 수 있습니다.

결론

이 예제에서는 Vue.js를 사용하여 간단한 할일 관리 애플리케이션을 만드는 방법을 살펴보았습니다. Vue CLI를 사용하여 프로젝트를 설정하고 컴포넌트를 생성한 후에는 애플리케이션을 실행하여 확인할 수 있습니다.

Vue.js는 강력한 기능과 편리한 문법을 제공하므로 웹 애플리케이션 개발을 쉽게 할 수 있습니다. 더 자세한 내용은 Vue.js 공식 문서를 참고하시기 바랍니다.