const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "toDos";
const toDos = [];
function saveToDos (){
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo (event){
const li = event.target.parentElement; // 우리가 삭제하고 싶은 내용
li.remove();
}
function paintToDo(newToDo){
const li = document.createElement("li");
const span = document.createElement("span");
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click",deleteToDo);
li.appendChild(span);
li.appendChild(button);
span.innerText = newToDo;
toDoList.appendChild(li);
}
function handleToDoSubmit (event){
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit",handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log(savedToDos);
// savedToDos 가 null이 될 수 있다. (localStorage가 비어있어서)
if (savedToDos !== null){
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach(paintToDo);
}
이 함수로는 이전 toDo가 유지가 안된다. 이전에 입력해둔 것과 새로운 것을 모두 유지하고 싶다!!!
근데 왜 이전에 입력한 게 사라질까? 👇👇👇
const toDos = []; => application이 시작될 때마다 toDos array는 항상 비어있기 때문에 새로운 것만 저장되는 거다.
그래서 newToDo를 작성하고 form을 submit 할 때마다 newToDo를 toDos array (빈 array)에 그냥 push 하게 된다.
그리고 그 toDo를 저장할 때 나는 새로운 toDo들만 포함하고 있는 array를 저장하는거다. 이 array는 이전의 toDo들은 가지고 있지 않다. 전에 있던 toDo들은 localStorage에 들어있다. 새로운 toDo들은 사용자가 입력하는 것이다.
우리는 단지 newTodo들만 toDos array에 추가해서 단지 newToDo들만 localStorage에 저장하고 있는거다. 즉, 우리가 갖고 있던 toDos의 이전 복사본을 잊어버리고 있다는 말이다.
======해결 방법=======
application이 시작될 때 toDos array를 빈 값으로 시작하는 대신에, const를 let으로 바꿔서 업데이트가 가능하도록 만들고, localStorage에 toDo 들이 있으면 toDos에 parsedToDos를 넣어서 전에 있던 toDo들을 복원하면된다.
toDos array와 localStorage는 같지 않다.
toDos array => 데이터베이스
localStorage => toDos array를 복사해두는 곳.
<랜덤으로 ID 만드는 방법 => Date.now활용하기>
toDos array와 localStorage는 같지 않다.
toDos array => 데이터베이스
localStorage => toDos array를 복사해두는 곳.
deleteToDo는 어떤 HTML의 element를 지워야 하는지 알고 있다. 하지만 어떤 todo text를 데이터베이스에서 지워야 하는지 모른다.
그래서 toDos를 더 좋은 방법으로 만들자!
todo들에게 ID를 랜덤으로 주자! text 대신에 object를 만들고 싶은거다.
[{id:121212, text:"drink"}] <-- 이렇게 만들고 싶은거다.
Date.now()는 밀리초(1000분의 1초)를 주는 함수를 활용해보자.
filter 함수 = 지우고 싶은 item을 빼고 새 array를 만든다. 그래서 예전 array는 여전히 있다.
filter는 sexyFilter에 1,2,3,4를 넣어서 실행된다.
sexyFilter 함수는 반드시 true를 리턴해야 한다. 만약 새 array에도 1,2,3,4를 포함하고 싶으면.
만약 false를 리턴하면 그 item은 새 array에 포함되지 않을거다.
--해석--
JS가 sexyFilter를 4번 부른다. 매번 숫자는 달라진다.(1,2,3,4) 그리고 sexyFilter함수가 true를 리턴하면 JS는 각각 1,2,3,4 를 유지한다. 그래서 새로 만들어지는 array 안에 1,2,3,4가 있다.
만약 3번째에서 false라면 3을 빼고 1,2,4만 유지한 새로운 array가 만들어진다.
=응용1=
==해석==
sexyFilter는 item이 3이 아니면 true를 리턴해야한다.
근데 sexyFilter는 1,2,3,4 각각의 item을 부른다. 그래서 소괄호에 item을 저장할 공간을 만들어야한다.
=응용2 문제=
const arr = ["pizza", "banana", "tomato"]
만약 banana를 지우고 싶으면 filter 식을 어떻게 세울까?
function deleteBanana(item) {
return item !=="banana"
}
arr.filter(deleteBanana)
=응용3 문제=
const arr = [1234, 5454, 223, 122, 45, 6775, 334]
1000보다 큰 수를 지워보자.
function lessThanThousand (number){
return number <=1000
}
arr.filter(lessThanThousand)
<text도 filter 가능!>
<화살표 함수를 활용한 filter>
