문제 상황 : 화면의 item을 삭제해도 localStorage에 있는 toDos의 항목은 삭제되지 않는다.

더 문제 상황 : 어떤 item을 지우는지 localStorage는 알 수가 없다.

해결 : 항목마다 ID를 부여하자.


function handleToDoSubmit(event) {
  event.preventDefault();            // 기본동작 제거
  const newTodo = toDoInput.value;   // 입력값을 newTodo에 저장
  toDoInput.value = "";              // 입력공간 값 제거
  const newTodoObj = {               // object 정의
    text: newTodo,                   // newTodo의 key는 text
    id: Date.now(),                  // id를 Date.now()로 두어 랜덤 id 부여
  }
  toDos.push(newTodoObj);            // toDos array에 newTodoObj 추가
  paintToDo(newTodoObj);             // 입력값을 처리
  saveToDos();                       // Submit되면 ToDos를 저장하는 saveToDos 함수 호출
}
  • 고유 id를 부여하기 위해 Date.now() 사용
  • 이를 text와 함께 담기 위해 object로 저장
  • paintToDo에 object 전달

function paintToDo(newTodoObj) {
  // li와 span 정의
  const li =  document.createElement("li");          // document에 li 만들기
  li.id = newTodoObj.id;                             // li의 id를 newTodoObj의 id로 지정
  ...
}
  • object 전달받음
  • object의 id를 li에 id를 지정할 때 사용
  • li가 각각의 고유한 id를 가지게 되었음

  • array.filter(function) 형태로 사용
  • array의 각 item에 대하여 function에서 true인 item들만 남겨 새 array 생성
  • item을 각각 처리한다는 점에서는 forEach() 함수와 비슷
    • forEach() : 각각의 item에 function 적용
    • filter() : true를 반환하는 item들만 모아 새 array 생성
function evenCheck(n){
  if (n % 2 === 0) {
    return true
  } else {
    return false
  }
}
 
const array = [1, 2, 3, 4].filter(evenCheck);
console.log(array);
 
// (2) [2, 4]

// js/todo.js
function paintToDo(newTodoObj) {
  ...
  // button 정의
  const button = document.createElement("button");   // document에 button 만들기
  button.innerText = "❌";                          // button에 'X' 표시 text 넣기
  button.addEventListener("click", deleteToDo);      // button클릭 시 deleteToDo 함수 실행
  ...
}
 
function deleteToDo(event) {
  const li = event.target.parentElement;             // 삭제해야 하는 li를 parentElement를 이용해 조회/저장
  // toDos 배열의 각각의 toDo에 대해 id가 li.id와 다른 것만 남긴다.
  // li.id는 string, toDo.id는 number 이므로 데이터타입 통일시키는 것에 주의
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); 
  li.remove();                                       // parentElement 제거 
  saveToDos();                                       // li를 제거한 toDos를 localStorage에 저장
}
  • X 버튼을 클릭하면 deleteToDo() 함수 실행
  • event.target의 parentElement를 통해 X의 부모 태그인 li 확인
  • 이 li의 id와 toDos 배열의 toDo 객체의 id 프로퍼티가 같은지 확인
  • 데이터타입이 li.id는 string이므로 parseInt() 함수 사용으로 자료형 통일
  • li.remove()하여 HTML 화면 상에서 제거
  • saveToDos()하여 li가 제거된 ToDos 배열을 localStorage에 저장

// js/todo.js
 
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
 
const TODOS_KEY = "todos"
let toDos = [];             // 초기에는 빈 array, 그리고 바꿀 수 있도록 let 설정
 
function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));    // localStorage에 todos라는 이름으로 toDos array 저장
}
 
function deleteToDo(event) {
  const li = event.target.parentElement;             // 삭제해야 하는 li를 parentElement를 이용해 조회/저장
  // toDos 배열의 각각의 toDo에 대해 id가 li.id와 다른 것만 남긴다.
  // li.id는 string, toDo.id는 number 이므로 데이터타입 통일시키는 것에 주의
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); 
  li.remove();                                       // parentElement 제거 
  saveToDos();                                       // li를 제거한 toDos를 localStorage에 저장
}
 
function paintToDo(newTodoObj) {
  // li와 span 정의
  const li =  document.createElement("li");          // document에 li 만들기
  li.id = newTodoObj.id;                             // li의 id를 newTodoObj의 id로 지정
  const span = document.createElement("span");       // document에 span 만들기       
  span.innerText = newTodoObj.text;                  // span에 newTodoObj의 text 넣기
 
  // button 정의
  const button = document.createElement("button");   // document에 button 만들기
  button.innerText = "❌";                          // button에 'X' 표시 text 넣기
  button.addEventListener("click", deleteToDo);      // button클릭 시 deleteToDo 함수 실행
 
  // span, button을 li에, li를 toDoList에 넣기
  li.appendChild(span);                              // li에 span을 넣기
  li.appendChild(button);                            // li에 button 넣기
  toDoList.appendChild(li);                          // toDoList ul에 li 넣기
}
 
function handleToDoSubmit(event) {
  event.preventDefault();            // 기본동작 제거
  const newTodo = toDoInput.value;   // 입력값을 newTodo에 저장
  toDoInput.value = "";              // 입력공간 값 제거
  const newTodoObj = {               // object 정의
    text: newTodo,                   // newTodo의 key는 text
    id: Date.now(),                  // id를 Date.now()로 두어 랜덤 id 부여
  }
  toDos.push(newTodoObj);            // toDos array에 newTodoObj 추가
  paintToDo(newTodoObj);             // 입력값을 처리
  saveToDos();                       // Submit되면 ToDos를 저장하는 saveToDos 함수 호출
}
 
toDoForm.addEventListener("submit", handleToDoSubmit);
 
function sayHello(item){                             // JS는 자동으로 item이라는 parameter 추가
  console.log('this is the turn of', item);
}
 
const savedToDos = localStorage.getItem(TODOS_KEY);  // localStorage의 toDos를 가져와 savedToDos에 저장
 
if (savedToDos) {                                    // savedToDos에 item이 있다면
  const parsedToDos = JSON.parse(savedToDos);        // parse한 것을 parsedToDos에 저장하고
  toDos = parsedToDos;                               // toDos에 parsedToDos를 저장
  parsedToDos.forEach(paintToDo);                    // 이 각각의 item에 paintToDo 함수 적용
}