안녕하세요. 이번 시간에는 지금까지 만들어오던 페이지에서 todo리스트를 로컬스토리지 상에서 삭제하는 법을 알아볼게요.
우선, 그 전에 지금까지 만들어뒀던 코드를 쭉 복기하는 과정을 거쳤습니다.
아무리 강의를 따라간다 하더라도, 결국 내가 쓰고 있는 코드 하나하나가 어떤 기능을 하는지 알지 못한다면, 쓸모가 없습니다.
헬로우 월드를 모두 찍을 순 있지만, 기계적으로 받아 적기만 해선 안됩니다.
제가 전공한 신문방송학에서도 이를 '받아쓰기 저널리즘'이라고 말하며 사고하지 않고 따라하는 것을 뜻합니다.
아무튼, 좋은 강의가 있어도 '이해'하지 않고 똑같은 자판만 쳐서는 안될 일입니다.
그러니 해당 코드를 한번 둘러보고 어떤 기능을 만들고 있는지 한번 생각해보는게 좋을 듯 합니다.
<script>
const toDoForm = document.querySelector("#todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector("#todo-list");
let toDos = [];
const TODOS_KEY = "toDos"
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter((item) => item.id !== parseInt(li.id));
saveToDos();
}
function paintToDo(newToDo) {
const list = document.createElement("li");
list.id = newToDo.id;
const span = document.createElement("span");
span.innerText = newToDo.text;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo)
list.appendChild(span);
list.appendChild(button);
toDoList.appendChild(list);
}
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 storageToDos = localStorage.getItem(TODOS_KEY);
if (storageToDos !== null) {
const parseToDo = JSON.parse(storageToDos);
toDos = parseToDo;
parseToDo.forEach(paintToDo);
</script>비록 강의에서 진행한 코드긴 하지만, 해당 코드에 대한 리뷰를 한 번 훑고 가는 습관이 필요할 듯 하다.
계속 곱씹고, 익숙해질 때까지 살펴보자.
우선 saveToDos는 스토리지 내에 toDos라는 카테고리를 만들고 해당 항목을 let배열에서 가져와 문자열로 만드는 작업을 한다.
밑에 deletetodo가 이번 시간의 핵심이다.
먼저 이번시간에 배운 것들의 완성형 코드다, 해당 필터식을 이해하는게 핵심과제
먼저, 리스트 버튼을 눌렀을 때, 화면상으로는 지워졌지만
정작 로컬스토리지엔 정보가 그대로 남아있어, 리프레쉬를 할 경우 다시 리스트가 생성되는 대참사가 벌어졌다.
이를 필터를 통해 새로운 array를 만들고 그 array를 todos로 변환시켜 세팅해주는 작업을 거친다면, 로컬스토리지를 변환할 수 있다. 결국 로컬 스토리지도 array 이기 때문이다(?),
적어도 이렇게 이해했는데 틀렸다면 기쁜 마음으로 지적 부탁드립니다ㅠㅠ
필터는, 이전 array를 지우지 않는다. 이 말을 기억하자
먼저 필터가 동작하는 방식이다.
필터는 true 를 반환하고 false는 걸러버린다.
위 식은 3 !==3 이 거짓이니, 3을 제외한 모든 숫자가 array로 만들어졌다.
여기에 화살표 함수로 간단히 표현해서 newa 를 만들고,
기존 a 함수와 비교했다.
newa는 결국 a.filter에서 온 값인데, a는 변하지 않았고
newa라는 array가 만들어졌다.
이를 우리 웹에 적용할 수 있다.
우리가 기존에 데이터가 저장되던 리스트가, 새로운 필터 array로 업데이트 할 수 있다면?
이 생각으로 출발하자
먼저
<script>
let toDos = [];
const TODOS_KEY = "toDos"
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}
</script>해당 식에서 출발한다
delete펑션을 건드려보자
결국 let toDos에 모인 값이 로컬스토리지 값과 같다
그리고 리스트 버튼을 지우면, array에 반영해 데이터도 업데이트 할 수 있다.
식은 다음과 같다.
<script>
toDos = toDos.filter();
saveToDos();
</script>먼저 toDos는 toDos.filter()와 같아야한다. 그리고 이를
다시 로컬스토리지에 저장하기위해 saveToDos();를 사용해준다.
그리고 필터식을 채워준다
<script>
toDos = toDos.filter((item) => item.id !== li.id);
saveToDos();
</script>아이템은 인자로 아무런 이름을 넣어도 상관없다.
다만, toDos의 id값을 선택해야하니 인자.id로 설정하고 뒤는 선택 당한 리스트를 뜻하는 li.id를 붙여준다.
이렇게 진행하면, 가능하다. 다만 작동을 안하는 경우에는 li.id 와 item.id의 데이터 유형이 일치하는지 확인해줘야한다.
기능이 작동하지 않으니, 이 둘은 다르단 뜻이디ㅏ.
이땐, li.id를 확인해보자
console.log(typeof li.id)를 시행하면
string이란 것을 알 수 있다. 이를 숫자로 바꾸면 된다.
parseint를 사용하자
<script>
toDos = toDos.filter((item) => item.id !== parseInt(li.id));
saveToDos();
</script>이렇게하면 새로운 array가 로컬스토리지에 들어가 정상적으로 리스트를 지울 수 있는 것을 확인할 수 있다.
