[todo] 리팩토링

AS-IS

TO-BE

1. 할일 목록 표시 기능

• App.vue에서 아래 코드 추가,

  data: function() {
    return {
        todoItems: []
    }
  },
  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(JSON.parse(localStorage.getItem(localStorage.key(i))));
          }
        }
      }
  },

• TodoList.vue에서 위 코드 삭제

• TodoList.vue에서 아래 코드 추가

    <ul>
      <li v-for="(todoItem, index) in propsdata" v-bind:key="todoItem.item" class="shadow">
        <i class="checkBtn fas fa-solid fa-check" v-on:click="toggleComplete(todoItem, index)"></i>
        <span v-bind:class="{textCompleted: todoItem.completed}"> {{ todoItem.item }} </span>
        <span class="removeBtn" v-on:click="removeTodo(todoItem, index)">
        <i class="fas fa-solid fa-trash"></i>
      </span>
      </li>
    </ul>



props: ['propsdata'],

• App.vue에서 아래 코드로 수정

<TodoList v-bind:propsdata="todoItems"></TodoList>

2. 할일 추가 기능

• TodoImput.vue에서 아래 코드 지우기

               var obj = {completed : false, item : this.newTodoItem };          //이 아이템이 check됐는지아닌지.
                //객체를 String으로 변환하는 API
                localStorage.setItem(this.newTodoItem, JSON.stringify(obj)); 

• App.vue에서 아래 태그로 수정해서 추가하기

  methods : {
    addOneItem : function(todoItem) {
       var obj = {completed : false, item : todoItem };          //이 아이템이 check됐는지아닌지.
       //객체를 String으로 변환하는 API
       localStorage.setItem(todoItem, JSON.stringify(obj)); 
    }
  },

3. 할일 삭제 기능