중요 키워드

parseInt

 toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

parseInt() 함수는 문자열을 파싱해서 숫자나 NaN(Not a Number)을 리턴합니다.
위에 예제에서는 li.id가 문자열로 된 숫자 이기 때문에 number로 리턴합니다.
만약 문자열이 숫자가 아닌 말그대로 문자면은 NaN값을 리턴합니다.

Date.now()

const newTodoObj = {
    text: newTodo,
    id: Date.now(),
};

Date.now는 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 나타내는 숫자입니다.
위에 예제에서는 id값에 Date.now()를 설정하여 각각의 오브젝트에 고유한 id number를 보유하게 하였습니다.

JSON.stringify

localStorage.setItem(TODOS_KEY , JSON.stringify(toDos));

JSON.stringify는 객체를 JSON 파일 문자열로 바꿔줍니다. 이렇게 하는 이유는 localStorage에 저장하기 위함입니다.

JSON.parse

 const parsedToDos = JSON.parse(savedToDos);

JSON.parse는 JSON 파일을 객체로 바꿔줍니다. localStorage에 저장된 JSON 파일을 객체로 바꿔줍니다.

forEach()

 parsedToDos.forEach(paintToDo);

Array 인스턴스의 forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.
위에 예제에서는 JSON 파일에서 객체로 변환된 toDos 배열안에 있는 배열요소를 한번 씩 paintToDo 함수를 이용해서 실행합니다.

filter()

toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

filter() 함수는 배열안에 요소들을 각각 비교한뒤에 조건에 부합하는 요소들만 따로 꺼내서 새로 배열을 만들어 줍니다. 위에 예제에서는 toDo.id 와 li.id를 비교하여 맞지 않는 id를 가지면 따로 배열을 만들게 합니다.

toDos 리스트 만들기

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");


let toDos = [];

const TODOS_KEY = "todos";

function saveToDos() {
    localStorage.setItem(TODOS_KEY , JSON.stringify(toDos));
}

function paintToDo (newTodo) {
 const li = document.createElement("li");
 li.id = newTodo.id;
 const span = document.createElement("span");
 span.innerText = newTodo.text;
 const button = document.createElement("button");
 button.innerText = "☑︎";
 button.addEventListener("click",deleteToDo )
 li.appendChild(span);
 li.appendChild(button);
 toDoList.appendChild(li);
}

function deleteToDo (event) {
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    saveToDos();
}

function handleToDoSubmit (event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
const newTodoObj = {
    text: newTodo,
    id: Date.now(),
};
toDos.push(newTodoObj);
paintToDo(newTodoObj);
saveToDos();
}



toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);


if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

1. 유저가 할 목록을 써서 저장하면 handleToDoSubmit 함수가 실행
2. 유저가 작성한 할일 목록을 newTodoObj 객체 값으로 이름과 id값을 저장 한다.
3. id 값은 Date.now()사용하여 무작위의 숫자를 만든다.
4. toDos.push로 유저가 작성한 목록을 배열값에 넣는다.
5. painToDo(유저가 작성한 객체값)을 저장하여 실행한다.
6. saveToDos()를 실행하여 push한 객체값을 저장한다.
7. saveToDos에서 JSON.stringify 로 객체를 JSON 파일로 저장한다.
8. paintToDos() 가 실행되면 toDoList안에 li값을 만들고 li 값안에 span 과 button 을 만든다.
9. span 에는 유저가 적은 할일 값을 넣고 button을 누르면 할일이 제거 되는 이벤트 리스너를 만든다.

1. button을 누르면 deleteToDo 가 실행된다.
2. li 변수를 만들어 event.target.parentElement 안에 있는 li를 제거해준다.
3. toDos 에 filter 함수를 사용하여 클릭한 toDo.id 와 li.id를 비교하며 같으면 제거하고 아니면 새로운 배열을 만든다.
4. saveToDos() 함수를 실행하여 localStorage를 업데이트 해준다.

1. 만약 이미 할일 목록이 localStorage에 저장되 있다면
   2. savedToDos 변수에 localStorage에 저장된 목록을 저장한다.
   3. if 문을 사용하여 만약 savedToDos가 비어 있지 않으면
   4. JSON.parse 을 사용하여 savedToDos를 다시 객체형으로 변환한다.
   5. toDos 배열에 parsedToDos를 넣는다.
   6. parsedToDos.forEach문을 이용하여 paintToDo를 콜백함수로 불어온다.
   7. parsedToDos에 있는 각각의 객체는 paintToDo안에서 실행된다.