vue to-do 리스트 구현 4 - vuetify 적용

Vuetify는 Vue.js 기반의 Material Design 컴포넌트 프레임워크로, 반응형 UI를 쉽게 만들 수 있습니다.

기존의 To-Do 리스트 애플리케이션에 Vuetify를 적용하여 스타일을 개선하고, Vuetify의 컴포넌트를 활용하여 UI를 향상시켜보겠습니다.

 

1. Vuetify 설치

먼저 Vuetify를 프로젝트에 설치합니다.

1. 터미널에서 Vuetify 설치:

vue add vuetify

vue add vuetify 를 할 경우 4가지 선택지가 나오는데
vuetify2 를 할 것인지, 그리고 vue-cli 를 할 것인지에 대한 선택지가 나오는데
vuetify3 및 vite 라는 빌드툴을 사용하기로 했습니다. (최신버젼이기 때문) 

Vuetify 3 + Vite의 장점

A. 빠른 빌드 속도:

• Vite는 빌드 도구로서 매우 빠른 속도를 자랑합니다. 특히 개발 중에 실시간으로 코드 변경 사항을 반영하는 속도가 빠르기 때문에, 대규모 프로젝트에서 매우 유용합니다.

• Vite는 기본적으로 ES 모듈을 기반으로 작동하므로, 빌드 과정이 간소화되고 빠릅니다.

B. 최신 기능:

• Vuetify 3는 Vuetify의 최신 버전으로, 최신 Vue.js 기능들을 활용할 수 있습니다. 특히, Composition API와 함께 사용할 때 더욱 강력한 기능을 제공합니다.

• Vuetify 3은 새로운 디자인 시스템과 개선된 컴포넌트 구조를 제공하여 UI 개발에 더 나은 경험을 제공합니다.

C. 미래 지향적:

• Vite와 Vuetify 3은 모두 Vue.js 커뮤니티에서 적극적으로 지원하는 최신 도구들입니다. 이를 사용하면 최신 기술을 습득하고 미래의 프로젝트에서 활용할 준비를 할 수 있습니다.

 

Vuetify 3 + Vite의 단점 및 고려사항

A. 호환성 문제:

• Preview 단계: Vuetify 3은 아직 preview 단계이므로, 일부 기능이 불안정할 수 있으며, 공식적으로 모든 기능이 완전히 지원되지 않을 수 있습니다.

• 플러그인 호환성: Vuetify 3과 Vite를 사용하면, 기존의 일부 Vue.js 플러그인 또는 Vuetify 2에서 사용하던 플러그인들이 호환되지 않을 수 있습니다.

B. 러닝 커브:

• Vite는 Webpack과는 다른 접근 방식을 취하기 때문에, 기존에 Webpack에 익숙한 개발자라면 Vite의 설정과 동작 방식에 적응하는 데 약간의 시간이 걸릴 수 있습니다.

C. 안정성:

• Vite와 Vuetify 3의 조합은 최신 기술 스택이기 때문에, 프로젝트에 사용하기 전에 충분한 테스트가 필요할 수 있습니다. 대규모 프로젝트나 프로덕션 환경에서 사용할 때는 사전 검토가 중요합니다.

2. 프로젝트 실행:

설치가 완료된 후, 프로젝트를 다시 실행하여 Vuetify가 정상적으로 적용되었는지 확인합니다.

npm run dev

 

1). App.vue에서 Vuetify 레이아웃 적용

Vuetify의 기본 레이아웃 컴포넌트인 v-app, v-container, v-row, v-col 등을 사용하여 레이아웃을 설정합니다.

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <h1 class="text-center">Vue.js To-Do App</h1>
          <AddTodo @add-todo="addTodo" />
          <ToDoList :todos="todos" @remove-todo="removeTodo" @save-todos="saveTodos" />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
import AddTodo from './components/AddTodo.vue';
import ToDoList from './components/ToDoList.vue';

export default {
  name: 'App',
  components: {
    AddTodo,
    ToDoList
  },
  data() {
    return {
      todos: []
    };
  },
  mounted() {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      this.todos = JSON.parse(savedTodos);
    }
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push({ text: newTodo, completed: false });
      this.saveTodos();
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
      this.saveTodos();
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    }
  }
};
</script>

<style>
.text-center {
  text-align: center;
}
</style>

3. AddTodo.vue에 Vuetify 컴포넌트 적용

 

AddTodo.vue 컴포넌트에서 Vuetify의 입력 및 버튼 컴포넌트를 사용합니다.

<template>
    <v-row class="mb-3">
      <v-col>
        <v-text-field
          v-model="newTodo"
          label="Add a new to-do"
          outlined
          dense
          @keyup.enter="submitTodo"
        />
      </v-col>
      <v-col cols="auto">
        <v-btn color="primary" @click="submitTodo">Add</v-btn>
      </v-col>
    </v-row>
  </template>
  
  <script>
  export default {
    name: 'AddTodo',
    data() {
      return {
        newTodo: ''
      };
    },
    methods: {
      submitTodo() {
        if (this.newTodo.trim()) {
          this.$emit('add-todo', this.newTodo);
          this.newTodo = '';
        }
      }
    }
  };
  </script>

4. TodoList.vue에 Vuetify 컴포넌트 적용

 

TodoList.vue 컴포넌트에서도 Vuetify의 리스트, 체크박스, 버튼 컴포넌트를 사용합니다.

<template>
  <v-list>
    <v-list-item
      v-for="(todo, index) in todos"
      :key="index"
      :class="{ 'completed': todo.completed }"
    >
      <v-row align="center" no-gutters>
        <v-col cols="auto" class="mr-3">
          <v-checkbox
            v-model="todo.completed"
            @change="saveTodos"
            hide-details
          />
        </v-col>
        <v-col>
          <v-list-item-content>
            <v-list-item-title>{{ todo.text }}</v-list-item-title>
          </v-list-item-content>
        </v-col>
        <v-col cols="auto">
          <v-btn icon small @click="removeTodo(index)">
            <v-icon>mdi-delete</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-list-item>
  </v-list>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    todos: {
      type: Array,
      required: true
    }
  },
  methods: {
    removeTodo(index) {
      this.$emit('remove-todo', index);
    },
    saveTodos() {
      this.$emit('save-todos');
    }
  }
};
</script>

<style scoped>
.completed .v-list-item__title {
  text-decoration: line-through;
  color: grey;
}
</style>

 

 

전체 코드 요약

 

App.vue

• Vuetify의 레이아웃 컴포넌트(v-app, v-container, v-row, v-col)을 사용하여 구조를 만듭니다.

 

AddTodo.vue

• Vuetify의 v-text-field와 v-btn을 사용하여 입력 필드와 버튼을 구현합니다.

 

TodoList.vue

• Vuetify의 v-list, v-checkbox, v-btn, v-icon을 사용하여 할 일 리스트와 삭제 버튼을 구현합니다.

이전 블로그 

vue to-do 리스트 구현 3 - 컴포넌트 분리 및 emit 실습
https://juntcom.tistory.com/318