앞서 써왔던 게시글에선 vue3 로 프로젝트를 생성했지만...회사에서 쓰고 있는건 2 버전이므로,
지금부터는 Vue2 버전에서 생성된 프로젝트라고 보면 된다.
Vue 2 Todo App 프로젝트 시작
프로젝트 생성 후 보일러플레이트
src - components 폴더 생성하고 폴더 안에 사용할 컴포넌트를 등록하면 된다.
컴포넌트 안에서 만들 컴포넌트 목록 [header, input, list, footer]
다시 App.vue 에 와서 import를 통해 컴포넌트를 등록한다.
template - html 영역
style 영역에는 scoped 라는 속성이 있는데 이 해당 컴포넌트에서만 스타일을 사용하겠다는 뜻이다.
TodoInput.vue
input 박스 안에 입력되는 값들이 맵핑이 되서 뷰 인스턴스 안에 나타나게 해주려면
v-model 디렉티브를 특정 data 속성과 연결시켜줘야 한다.
newTodoItem을 v-model로 연동시켜주면 input에 입력한 값이 실시간으로 반영된다.
methods에는 내가 쓸 함수를 등록한다.
input 박스 안에 내가 쓴 값을 저장하는 로직을 넣고 add 버튼을 클릭시 값을 input 박스의 값을 비워준다.
이때 저장은 localStorage.setItem() 이라는 API를 사용해 로컬스토리지에 저장할 거임(로컬스토리지에 key, value 형태로 저장된다)
addTodo 안에 input 의 텍스트를 비워주는 메서드를 clearInput 이라는 이름으로 분할해준다.
this.clearInput()을 써서 인풋값에 접근한다.
v-on:keyup.enter="addTodo"
= 엔터를 누르면 addTodo를 실행해줘
TodoList.vue
가장 먼저 vue 라이프사이클 중 created 라는 컴포넌트가 생성되자마자 실행되는 라이프사이클 훅을 써준다.
컴포넌트가 생성되자마자 localStorage의 data를 담아서 todoItems 라는 데이터에 연결 -> 화면에 뿌려주기만 하면 됌
<li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem" >todoItems 라는 배열 안에서 todoItem 이라는 숫자만큼 돌겠다 (반복문)
이때 index는 todoItem 의 순서를 가리킨다.
우리가 원하는 건 리스트 각각의 휴지통 모양의 아이콘을 클릭했을 때
리스트가 제거되어야 한다.
v-on:click="removeTodo(todoItem, index)"
내가 선택한 리스트의 순서를 알려면 todoItem 뿐만 아니라, index까지 넘겨줘야 한다.
methods: {
removeTodo: function(todoItem, index) {
// 로컬스토리지에 저장된 아이템 제거
localStorage.removeItem(todoItem);
// 데이터베이스에서는 지워졌지만 화면엔 반영x 따로 처리해야함
// 자바스크립트 배열 API - splice 사용
this.todoItems.splice(index, 1)
// 특정 index에서 하나를 지울거다!
}
}<완성된 모습>
