들어가며...
인프런 캡틴판교님의 Vue.js 2번째 강좌를 완강 하였다.
첫번째 강좌는 vue.js의 기본적인 사용법, vue-cli를 이용한 vue프로젝트 및 컴포넌트 생성까지 알아보았다.
2번째 강좌는 생성한 프로젝트에서 Todo App을 제작하면서 단계별로 리팩토링을 진행하며, 최종적으로 vuex 사용법 및 Todo App에 적용 시키는 과정으로 마무리 된다.
이번 포스팅에서는 기본적인 component생성 과정 및 설명으로 진행할 예정이다.
*데이터 저장소는 별도 데이터베이스가 없어 LocalStorage를 사용
TodoHeader.vue
<template>
<header>
<h1>TODO it!</h1>
</header>
</template>TodoInput.vue
input:text에 newTodoItem이라는 data를 v-model로 연결하여 엔터키를 누를시 addTodo 메소드가 실행되며 LocalStorage에 data가 저장된 후 입력란을 초기화.
<template>
<div class="inputBox shadow">
<input type="text" v-model="newTodoItem" @keyup.enter="addTodo">
<span class="addContainer" @click="addTodo">
<i class="fas fa-plus addBtn"></i>
</span>
</div>
</template>
<script>
export default {
data: function() {
return {
newTodoItem: ""
}
},
methods: {
addTodo: function() {
localStorage.setItem(this.newTodoItem, this.newTodoItem);
this.clearInput();
},
clearInput: function() {
this.newTodoItem = "";
}
}
}
</script>TodoList.vue
created 훅에서 localStorage 정보를 읽어와 todoItems data 배열에 담은 후 v-for 디렉티브를 이용하여 화면에 저장된 todoItem을 출력.
휴지통 버튼을 만들어 클릭시 removeTodo메소드가 실행되며 인자로 todoItem, 해당 아이템의 index(순서)를 보내 해당 아이템을 삭제.
<template>
<div>
<ul>
<li v-for="(todoItem, index) in todoItems" :key="todoItem" class="shadow">
{{ todoItem }}
<span class="removeBtn" @click="removeTodo(todoItem, index)">
<i class="fas fa-trash-alt"></i>
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data: function() {
return {
todoItems: []
}
},
methods: {
removeTodo: function(todoItem, index) {
localStorage.removeItem(todoItem);
this.todoItems.splice(index, 1);
}
}
created: function() {
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {
this.todoItems.push(localStorage.key(i));
}
}
}
}
}
</script>TodoFooter.vue
Clear All 버튼 클릭시 clearTodo 메소드가 실행되며 localStorage를 모두 비운다.
<template>
<div class="clearAllContainer">
<span class="clearAllBtn" v-on:click="clearTodo">Clear All</span>
</div>
</template>
<script>
export default {
methods: {
clearTodo: function() {
localStorage.clear();
}
}
}
</script>이렇게 기본적인 Todo App이 완성되었다.
현재 구조를 보자면 각 컴포넌트가 각각의 기능을 수행하며 localStorage를 조작하고있다.
앱을 실행하면 삭제나 추가를 하여도 화면에 반응이 없다.
이유는 Vue의 data 영역과 web의 localstorage 영역이 서로 다르고 이벤트가 발생하면 localstorage만을 조작하고 Vue의 데이터에는 별도로 신호를 주지 않으므로 반응하지 않는것이 당연하다.
다음 포스팅에서는 컴포넌트의 역할을 비즈니스와 프레젠테이션 관점으로 나누고 화면에도 즉각 반응할 수 있도록 수정해 보도록 한다.
