[노마드 코더]바닐라 JS로 크롬 앱 만들기 - #7 TO DO LIST

#7.0 ~ 7.1 Setup, Adding ToDos

greetings에서 사용한 코드를 바탕으로 만들 수 있다. input에 텍스트를 입력하면 화면에 보이지만, 새로고침 하면 사라지는 문제가 있다. 

 

#7.2 Deleting To Dos

삭제 버튼을 만드는 것도 위의 내용과 같다. createElement를 통해 버튼을 만들어주고 EventListener를 통해 클릭을 감지하면 된다.

하지만 이대로 버튼을 클릭하면, 어떤 리스트에서 버튼을 클릭하였는지 알 수가 없다. 따라서 

deleteToDo 함수의 console.log(event); 를 통해 확인해보면 target > parentElement 또는 parentNode > innerText에서

클릭한 리스트의 내용을 알 수 있었다.

따라서 다음과 같은 코드로 버튼을 클릭한 리스트만 삭제할 수 있다.

#7.3 Saving To Dos

새로고침해도 정보가 남아있으려면 localStorage를 활용해야한다. localStorage에 저장하고 새로고침하면 localStorage를 불러와서 화면에 표시해야 한다. 하지만 localStorage에는 배열을 저장할 수 없고 텍스트만 저장 가능하다. 따라서, saveToDo 함수를 만들어 개별로 저장한다.

하지만 이대로 하면 새로고침하고 새로운 값을 입력했을 때 이전의 내용이 모두 사라진다. 따라서 단순 텍스트가 아닌 ["a","b","c"]와 같은 배열 형태로 저장하기 위해 JSON.stringify()를 이용하면 다음과 같이 배열의 형태로 저장된다. 

배열로 저장하면 중복도 가능하게 된다. 하지만 새로고침 문제는 아직까지는 해결되지 않는다.

 

#7.4 ~ 7.5 Loading To Dos

 

stringify를 통해 만든 배열 모양의 string을 parse를 사용하여 JS가 이해할 수 있는 실제 배열로 만들 수 있다.

 

 

 

 

 

 

 

따라서 이처럼 적용하면 살아있는 배열로 사용가능하다.

 

 

 

 

 

 

 

JS는 배열에 있는 각각의 item에 대해 function을 실행할 수 있게 해 준다. 이는 배열이 가진 forEach를 통해 가능하다.

parsedToDos.forEach(sayHello);

parsedToDos.forEach((item) => console.log("this is the turn of ", item)); 

둘 다 같은 표현이다. 두번째 표현은 따로 이름, 함수를 만들지 않고 더 짧게 쓸 수 있다.

즉, JS는 function을 호출하면서 배열에 있는 각각의 item을 준다.

이를 활용한다면, 매 item마다 paintToDo를 실행하면서 새로고침 시에도 내용을 유지할 수 있다.

-> parsedToDos.forEach(paintToDo);

 

하지만 다시 새로고침하면 이전의 내용은 또 사라진다. 그 이유는 처음 배열 선언을 const toDos = [];로 해두었기 때문에 실행할 때마다 다시 비어있는 배열로 시작되는 것이다. 

let toDos =[];로 수정하고 parse한 이후에 toDos = parsedToDos;해주면 해결된다.

 

#7.6 Deleting To Dos

아직 삭제 버튼을 누르고 새로고침을 하면 삭제되지 않는다. 

중복된 item을 삭제하려면 정확히 어떤 item인지 구별이 필요하다. 따라서 배열의 형태가 아닌 랜덤한 아이디도 함께 가지고있는 object로 저장해야 한다.

paintToDo함수에도 이 속성을 반영해줘야 정상적으로 실행된다.

배열의 원소를 지우기 위해 filter()를 사용한다.

filter의 함수에 대해 false값을 가지면 삭제된다. 위의 경우, item !== 3 이 false가 되는 3이 삭제된다. 이를 적용시키면 클릭한 버튼 id에 대한 조건을 가진 함수를 만들어 알맞은 li 를 삭제할 수 있다.

li.id가 string이므로 parseInt함수를 통해 정수로 변환시켜준다. filter를 통해 삭제한 이후 saveToDos() 해야한다!!