📝 오늘 한 것

1. to do list 추가하기 - 삭제 버튼 만들기 / 로컬 스토리지에 to do list 저장 후 불러오기

📚 배운 것

1. To Do List

1) to do list 추가하기

🔎 내가 작성한 코드

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

function ontoDoSubmit(event) {
  event.preventDefault();
  const toDo_li = document.createElement('li');
  toDo_li.innerText = toDoInput.value;
  toDoList.appendChild(toDo_li);
  toDoInput.value = null;
}

toDoForm.addEventListener('submit', ontoDoSubmit);

🔎 강의 코드

• todoInput을 toDoForm 안에서 찾았다

• 이벤트 핸들러 함수에서 todo를 화면에 표시하는 코드를 따로 빼내 paintToDo() 함수를 만들었다

• li 안에 휴지통도 만들기 위해 todo 텍스트를 바로 넣지 않고 span에 넣었다

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

function paintToDo(toDo) {
  const li = document.createElement('li');
  const span = document.createElement('span');
  li.appendChild(span);
  span.innerText = toDo;
  toDoList.appendChild(li);
}

function onToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  toDoInput.value = '';
  paintToDo(newToDo);
}

toDoForm.addEventListener('submit', onToDoSubmit);

2) 삭제 버튼 만들기, to do list 저장하기

(1) 삭제 버튼 만들기

• 삭제 버튼 클릭 시 해당 to do list가 삭제될 수 있도록 event.target.parentElement를 이용해 삭제할 li 요소 선택

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

// 삭제 버튼 클릭 이벤트 리스너 함수
function deleteToDo(event) {
  event.target.parentElement.remove();
}

function paintToDo(toDo) {
  const li = document.createElement('li');
  const span = document.createElement('span');
  span.innerText = toDo;
  // 삭제 버튼 추가
  const delBtn = document.createElement('button');
  delBtn.innerText = '❌';
  delBtn.addEventListener('click', deleteToDo);
  li.appendChild(span);
  li.appendChild(delBtn);
  toDoList.appendChild(li);
}

function onToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  toDoInput.value = '';
  paintToDo(newToDo);
}

toDoForm.addEventListener('submit', onToDoSubmit);

(2) to do list 저장하기

🔎 로컬 스토리지에 to do list 저장 후 불러오기

[TIL] 211011 4) 직렬화 참고

• 새로고침을 해도 작성한 to do list가 없어지지 않도록 하고자 함

• todos 배열을 만들어 todo를 작성할 때마다 그 텍스트를 push 해준다

• toDoForm에 submit 이벤트가 발생할 때마다 todos 배열의 각 요소들을 로컬 스토리지에 저장한다. 이때 로컬 스토리지에는 무조건 문자열로 변환되어 저장된다. 이때 그냥 todos를 입력하는 게 아니라 JSON.stringify(todos)를 입력해 배열 형식의 문자열로 저장하도록 한다.

• 그 후 로컬 스토리지에 todos가 존재한다면, JSON.parse()를 이용해 배열 형식의 todos 문자열을 다시 배열로 바꿔준다.

• 그렇게 바꾼 todos 배열에 forEach() 메서드를 실행함으로써 배열의 각 요소 즉, 각 todo list마다 paintToDo() 함수를 실행해 화면에 표시되도록 한다.

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

const TODOS_KEY = 'todos';

const todos = []; // todos 배열 생성

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(todos)); // 배열 형식의 문자열로 변환해 저장
}

function deleteToDo(event) {
  event.target.parentNode.remove();
}

function paintToDo(toDo) {
  const li = document.createElement('li');
  const span = document.createElement('span');
  span.innerText = toDo;
  const delBtn = document.createElement('button');
  delBtn.innerText = '❌';
  delBtn.addEventListener('click', deleteToDo);
  li.appendChild(span);
  li.appendChild(delBtn);
  toDoList.appendChild(li);
}

function onToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  toDoInput.value = '';
  todos.push(newToDo); // 새로운 todo를 todos 배열에 push
  paintToDo(newToDo);
  saveToDos(); // 로컬 스토리지에 to do list 저장
}

toDoForm.addEventListener('submit', onToDoSubmit);

// 로컬 스토리지에서 todos 불러오기
const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos) {
  const parsedToDos = JSON.parse(savedToDos); // 다시 배열 형식으로 변환
  parsedToDos.forEach(todo => paintToDo(todo)); // 배열의 각 요소(todo)를 화면에 띄움
}

• 이제 todos를 입력 후 다시 새로고침을 해도 todos가 사라지지 않는다. 그러나, todos를 추가한 후 새로고침을 하면 추가한 todos만 보이고, 처음에 입력한 todos는 보이지 않는다. 로컬 스토리지를 보면 추가한 todos만 저장되어 있는 걸 확인할 수 있다.

• 이는 todos 배열이 애플리케이션이 시작될 때 항상 빈 배열 상태이기 때문이다. 새로고침 할 때마다 todos 배열이 빈 배열로 초기화되기 때문에, 이전에 로컬 스토리지에 저장했던 todos가 없어지게 되는 것이다.

• 이 문제는 로컬 스토리지에 todos가 있다면 todos 배열을 parsedToDos로 업데이트하는 것으로 해결할 수 있다. 이렇게 하면 새로고침을 했을 때 로컬 스토리지에는 todos가 있으므로 todos를 parseTodos로 바꾸게 된다. 따라서, todo를 추가해도 parseTodos 상태에서 추가하는 것이므로 이전에 입력한 todos가 없어지지 않는다.

let todos = []; // let으로 바꾼 후

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos) { // 로컬 스토리지에 todos가 있다면
  const parsedToDos = JSON.parse(savedToDos);
  todos = parsedToDos; // todos 배열을 업데이트
  parsedToDos.forEach(todo => paintToDo(todo));
}

✨ 내일 할 것

1. 클론코딩 계속