[ Vue.js ] Todo App 구현 _ 할일 목록(추가, 삭제)

 

 

 

 

 

 

 

 

할일 추가 기능 구현

 

 

'addTodo' 메서드를 분리하는 작업부터 하자

input박스의 값을 비우는 기능을 분할할껀데, clearInput메서드를 생성해서 넣어준다.

 

methods: {
    addTodo: function () {
      // 저장하는 로직
      localStorage.setItem(this.newTodoItem, this.newTodoItem);
      this.clearInput();
    },
    // 비우는 메서드 만들기(분할)
    clearInput: function () {
      this.newTodoItem = "";
    },
  },

 

 

 

 

이제 스타일링을 한다

 

인풋박스를 먼저 꾸며주자

클래스에 이름 넣어주고, 

<template>
  <div class="inputBox shadow">
    <input type="text" v-model="newTodoItem" />
  </div>
</template>


<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;
}
</style>

 

 

add버튼을 꾸며줄건데, font-awesome을 사용한다

https://fontawesome.com/

Font Awesome

( 아 폰트어썸 버전업하고, 유료화되어서 예전에 찍어졌던 강의내용이랑 너무 다르다... 최근에 포스팅된 블로그 검색해보면서 진행했다 )

 

 

span태그를 만들어서 버튼을 넣어줄건데

사전에 버튼태그에 넣어놨던 v-on을 span태그에 넣어서 동일하게 동작하게 만들어준다.

<span class="addContainer" @:click="addTodo">
   <i class="fa-solid fa-plus addBtn"></i>
</span>


<style scoped>
.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>

 

마지막으로 추가할때 버튼을 클릭하기도 하지만 엔터버튼을 누르는경우가 많기때문에

엔터를 쳤을때 동일하게 동작하게 만들어보자

 

input태그에 아래코드를 추가한다.

v-on:keyup.enter="addTodo"

엔터키를 쳤을때 그 이벤트를 잡아서 'addTodo'를 실행시킨다는 뜻

 

 

 

 

 

 

 

목록 표시 기능 구현

이제 추가된 할일을 리스트에 출력하게 만들어주자

 

 

템플릿태그에 리스트를 추가해준다

ms 단축키를 사용해줄건데 ul > li * 3 작성후 탭하면

이렇게 생성됨 (진짜편하네)

여기에 아까 저장된 데이터들을 끄집어와서 데이터를 동적으로 여기에 맵핑시켜줄거다

 

 

우선 created 뷰 인스턴스를 생성하고, 이 안에 로컬스토리지에 저장된걸 가져오는 로직을 만들어보자

간단하게 if문과 for문을 사용한다.

 created: function () {
    if (localStorage.length > 0) {
      for (var i = 0; i < localStorage.length; i++) {
          console.log(localStorage.key(i));
      }
    }
  },

 

console창에 앞서 저장한 값들이 순서대로 출력되는걸 확인

이 값들을 담을 데이터가 필요하기 때문에 데이터먼저 선언한다.

 

 data: function () {
    return {
      todoItems: [],
    };
  },

 

이제 값들을 넣어주자

<script>
export default {
  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(localStorage.key(i));
          // console.log(localStorage.key(i));
        }
      }
    }
  },
};
</script>

 

 

화면에 뿌리는것은 <li>에 v-for를 사용하면 된다.

	<ul>
      <li v-for="todoItem in todoItems" v-bind:key="todoItem">
        {{ todoItem }}
      </li>
    </ul>

 

이렇게 출력 완

 

 

 

할일 목록 삭제 기능

 

 

<li>태그안에 span태그를 추가해서 삭제기능을 넣어보자

<span class="removeBtn" v-on:click="removeTodo">
  <i class="fa-solid fa-trash"></i>
</span>

아이콘은 폰트어썸사용했고, 

스타일링은

.removeBtn {
  margin-left: auto;
  color: #de4343;
}

이렇게!

 

간단하게 UI만들어줬고, 이제 메서드를 추가해서 삭제기능을 구현해보자

 

 methods: {
    removeTodo: function(){
    },
  },

이렇게 메서드먼저 만들어줬는데,

아이콘을 클릭했을때 해당 값만 호출하고싶고 

vue의 좋은점이 여기서 나온다

<li
v-for="(todoItem, index) in todoItems"
v-bind:key="todoItem"
class="shadow"
>
{{ todoItem }}
<span class="removeBtn" v-on:click="removeTodo(todoItem, index)">
  <i class="fa-solid fa-trash"></i>
</span>
</li>

 

v-for 에서 인덱스값을 알 수 있다 >> (todoItem, index) 이렇게 

이걸 또 removeTodo메서드로 넘겨줄 수 있고, 

이걸 받아서 console창에 한번 찍어보자!

 removeTodo: function (todoItem, index) {
      console.log(todoItem, index);
    },

화면에서 hello에 있는 쓰레기통 아이콘을 누르면 console에 hello와 인덱스값 0 이 출력되는걸 확인할 수 있다

데이터값을 지우는건 localStorage의  removeItem API를 사용한다. 

localStorage.removeItem(key값);

localStorage.removeItem(todoItem);

 

근데 이렇게만 작성하면 화면에서 바로바로 삭제되지않기때문에 

splicec API를 사용할건데 JavaScript 배열 API로 특정 인덱스에서 숫자만큼을 지울 수 있게 해준다.

this.todoItems.splice(index, 1);

이렇게해주면 화면에서도 application의 Local storage에서도 바로바로 삭제되는걸 확인할 수 있다.