[웹앱 제작으로 배워보는 Vue.js, ES6, Vuex] - Todo App 프로젝트 실습

 

캡틴판교님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 실습한 내용입니다.

---

TodoHeader.vue

<template>
  <header>
    <h1>TODO it!</h1>
  </header>
</template>

<!-- 컴포넌트 안에서만 유효한 스타일 속성을 지정하려면 scoped 처리 -->
<style scoped>
h1 {
  color: #2F3B52;
  font-weight: 900;
  margin: 2.5rem 0 1.5rem;
}
</style>

 

---

TodoInput.vue

<template>
  <div class="inputBox shadow">
      <input type="text" v-model="newTodoItem" v-on:keyup.enter="addTodo">
      <!-- <button v-on:click="addTodo">add</button> -->
      <span class="addContainer" v-on:click="addTodo">
        <i class="fa-solid fa-plus addBtn"></i>
      </span>
  </div>
</template>

<script>
export default {
  data : function() {
    return {
      //초기 선언
      newTodoItem : ""
    }
  },
  methods : {
    addTodo : function() {
      //input태그에 어떤 값이 있을때만 값을 추가해줌
      if(this.newTodoItem != '') 
      {
                    //emit 이벤트 이름 지정, 보내줄 인자 1,2,3,4,...
        this.$emit('addTodoItem', this.newTodoItem);
        this.clearInput();
      }
    },
    clearInput : function() {
      this.newTodoItem = '';
    }
  }
}
</script>

<style scoped>
input:focus {
  outline: none;
}
.inputBox {
  background: white;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
}
.inputBox input {
  border-style: none;
  font-size: 0.9rem;
}
.addContainer {
  float: right;
  background: linear-gradient(to right, #6478FB, #8763FB);
  display: block;
  width: 3rem;
  border-radius: 0 5px 5px 0;
}
.addBtn {
  color: white;
  vertical-align: middle;
}
</style>

 

---

TodoList.vue

<template>
  <div>
    <!-- ul>li*3-->
     <ul>
       <!--
         <li v-for="todoItem in todoItems" v-bind:key="todoItem" class="shadow">
       -->
       <li v-for="(todoItem, index) in propsdata" v-bind:key="todoItem.item" class="shadow">
          <i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}"
            v-on:click="toggleComplete(todoItem, index)"></i>
          <!-- todoitem의 배열에 담긴 객체의 속성 중 completed 속성이 true면 해당 태그가 그대로 적용. false면 {} 처리되어짐 -->
          <span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span>
          <span class="removeBtn" v-on:click="removeTodo(todoItem, index)">
            <i class="fas fa-trash-alt"></i>
          </span>
       </li>
     </ul> 
  </div>
</template>

<script>
export default {
  //App.vue에서 내린 propsdata를 받는다.
  props : ['propsdata'],
  methods : {
    removeTodo : function(todoItem, index) {
      this.$emit('removeItem', todoItem, index);
    },
    toggleComplete : function(todoItem, index) {
      this.$emit('toggleItem', todoItem, index);
    }
  }
}
</script>


<style scoped>
ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 0;
  text-align: left;
}
li {
  display: flex;
  min-height: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0.5rem 0;
  padding: 0 0.9rem;
  background: white;
  border-radius: 5px;
}
.checkBtn {
  line-height: 45px;
  color: #62acde;
  margin-right: 5px;
}
.checkBtnCompleted {
  color: #b3adad;
}
.textCompleted {
  text-decoration: line-through;
  color: #b3adad;
}
.removeBtn {
  margin-left: auto;
  color: #de4343;
}
</style>

 

---

TodoFooter.vue

<template>
  <div class="clearAllContainer">
    <span class="clearAllBtn" v-on:click="clearTodo">Clear All</span>
  </div>
</template>

<script>
export default {
  methods : {
    clearTodo : function() {
      this.$emit('clearAll');
    }
  }
}
</script>



<style scoped>
.clearAllContainer {
  width: 8.5rem;
  height: 50px;
  line-height: 50px;
  background-color: white;
  border-radius: 5px;
  margin: 0 auto;
}
.clearAllBtn {
  color: #e20303;
  display: block;
}
</style>

---

App.vue

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
                    <!-- todoinput에서 보낸 event를 받고, 그걸 받으면서 실행할 메소드는 addOneItem-->
    <TodoInput v-on:addTodoItem="addOneItem"></TodoInput>
                    <!--내려보낼 컴포넌트에 부여할 이름(내가 지정) : 현재 컴포넌트에서 붙여진 데이터 속성 이름(여기선 배열 이름)-->
                    <!--암묵적으로 인자까지 같이 넘어옴-->
    <TodoList v-bind:propsdata="todoItems" 
      v-on:removeItem="removeOneItem" 
      v-on:toggleItem="toggleOneItem">
    </TodoList>
    <TodoFooter v-on:clearAll="clearAllItems"></TodoFooter>
    <my_cmp></my_cmp>
  </div>
</template>

<script>
import Vue from "vue"
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'

var my_cmp = {
  template : '<div>made by euna</div>'
}

new Vue(
  {
    el:'#app',
    components : {
      'my-cmp': my_cmp
    }
  }

)
export default {
  data : function() {
    return {
      todoItems : []
    }
  },
  methods : {
                        //아래에서 보낸 인자  this.$emit('addTodoItem', this.newTodoItem);의 this.newTodoItem
    addOneItem : function(todoItem) {
      var obj = {complete: false, item: todoItem}; //text값과 boolean값을 저장할 객체 생성
      localStorage.setItem(todoItem, JSON.stringify(obj));
      this.todoItems.push(obj);
    },
    removeOneItem : function(todoItem, index) {
      localStorage.removeItem(todoItem.item);
      this.todoItems.splice(index, 1);
    },
    toggleOneItem : function(todoItem, index) {
      this.todoItems[index].completed = !this.todoItems[index].completed;
      localStorage.removeItem(todoItem.item);
      localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
    },
    clearAllItems : function() {
      localStorage.clear();
      this.todoItems = [];
    }
  },
    //created:인스턴스가 생성되자마자 실행되는 lifecycle
  created : function() {
    //console.log('created');
    if(localStorage.length > 0) {
      for (var i=0; i<localStorage.length; i++) {
        if(localStorage.key(i) !== 'loglevel:webpack-dev-server')
        {
          //localStorage.getItem(localStorage.key(i)); //todoinput에서 stringify한 값이므로 string type
          console.log(JSON.parse(localStorage.getItem(localStorage.key(i))));//string화 한 것을 다시 json parsing하여 obj로 돌림
          this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
          //위에서 생성한 배열에 데이터를 push
          //this.todoItems.push();
        }
      }
    }
  },
  components : {
    'TodoHeader':TodoHeader,
    'TodoInput':TodoInput,
    'TodoList':TodoList,
    'TodoFooter':TodoFooter,
    'my_cmp':my_cmp
  }
}
</script>

<style>
body {
  text-align: center;
  background-color: #F6F6F8;
}
input {
  border-style: groove;
  width: 200px;
}
button {
  border-style: groove;
}
.shadow {
  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03)
}
</style>