Deleting To Dos part 1

console에서 출력되는 toDos array를 보면 이는 데이터베이스임을 알 수 있다.

localStorage는 이 toDos array를 복사해두는 곳으로

localStorage는 toDos array와 같지 않다는 것을 알아두어야 한다.

toDo 목록에 있는 것을 지워도 콘솔창에 toDos array를 출력해보면 여전히 그 item을 가지고 있다는 것을 알 수 있다.

toDo 목록에 있는 것을 지우면 그것이 toDos array에서도 지워지도록 수정하고 싶은데 문제는 어떤 item을 지워야하는지 알 수 없다는 것이다.

JS와 Html의 입장에서 deleteToDo는 화면에서 Html의 어떤 element를 지워야 하는 지 알고 있지만 어떤 todo text를 데이터베이스에서 지워야 하는 지 모른다.

그러니까 이렇게 toDos array에 'e'가 두 개 있는데, 그 중 세 번째 'e'를 지워도 어떤 것을 지웠는지 모른다는 것이다.

이제 우리는 toDos를 더 나은 방법으로 다시 만들어야 한다.

그래서 이 todo들에게 ID를 붙여서 text가 아닌 object를 만들어 보려고 한다.

일단 첫 번째로 toDos 데이터베이스를 비워보자

Date.now()는 밀리초(1000분의 1초)를 주는 함수인데, 이 함수는 우리에게 랜덤으로 숫자를 제공해주기 때문에

element가 만들어질 때 이 ID를 갖게 할 것이다.(매번 초가 바뀌기 때문에 랜덤처럼 보임)

데이터베이스에 입력한 todo를 추가해주는 코드는 이것이고

그 다음엔 여기서 사용자가 입력한 todo text를 데이터베이스로 push 해준다.

지금까지는 위의 방식으로 했지만 이제는 text 대신 object를 push 하길 원하기 때문에 바로 윗줄에 text로는 newTodo를 갖고 id는 Date.now()를 갖는 objobject를 만들었다.

그리고 이 newTodoObj를 toDos array에 넣어줬다.

이제 콘솔창에서 확인해보면 입력창에 a를 입력했을 때 localStorage에 text가 아닌 object가 저장되는 것을 알 수 있다.

paintToDo도 오직 text인 newTodo만 갖고 있기 때문에 이것을 object로 바꿔줄건데

먼저 paintToDo에 string으로 newTodo를 넣어주는 대신에 newTodoObj를 넣어주어야 한다.

그러면 toDos 배열에 newTodoObj를 추가하고 paintToDo에는 text가 아니라 newTodoObj를 주게 될것이다.

이때 입력창에 글자를 입력하면 글자가 아닌 object가 나타나는데

paintToDo를 수정하면 글자 그대로를 나타낼 수 있다.

위에서 코드를 수정했기 때문에 paintTodo도 이제 object를 받는데

이때 object는 text와 id를 갖고 있기 때문에 span.innerText = newTodo를 span.innerText = newTodo.text로 수정해야 한다.

이제 페이지에서 확인해보면 입력한 글자가 그대로 todo에 등록되는 것을 확인할 수 있다.

이제 id를 활용하여 각각의 li item들을 구별해보자

예전의 paintToDo는 toDoInput.value에서 온 newTodo와 함께 call 했지만 이제는 object와 함께 call되고 있다

id도 마찬가지로 span.innerText = newTodo.text 처럼 paintToDo에 코드를 추가해주면 된다.

이제 localStorage를 비우고 todo를 입력한 다음 element를 확인해보면 내가 입력한 todo가 id를 가진 채로 Html의 li로 생성된 것을 알 수 있다..

이렇게 저장된 id를 활용하면 내가 원하는 특정 요소를 삭제할 수 있게 된다.

그것을 실행하기 전에 먼저 우리가 누른 X 버튼의 id를 얻어야 한다.

일단 deleteToDo()를 살펴보면 화면에서 li를 삭제하기 전에 li를 얻게 되는데

console.log(li.id)를 입력하면 화면에서 삭제하기 전에 li의 id도 얻게 된다.

다음 번에는 array에서 item을 지우는 법에 대해 배워보자

show you