자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #11 localStorage, forEach, JSON.stringify, JSON.parse

to do list 만들기

 

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

function handleToDoSubmit (event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
}

toDoForm.addEventListener("submit",handleToDoSubmit);

 

 

const toDoInput = toDoForm.querySelector("input"); // input을 toDoForm에서 찾기
const toDoInput = document.querySelector("#todo-form input"); // input을 document에서 찾기
같다. 

 

input 창에 값 입력 후 엔터 누르면 빈칸으로 되게 만들기
=> toDoInput의 value에 빈 값("")을 넣기

 

그 전에! toDoInput의 value 값을 저장해야 하니까 const newToDo = toDoInput.value; 새로운 변수 선언해서 저장해준거다. 

 

주의할점! toDoInput.value를 비웠다고 해서 newToDo 가 비워지는 것은 아니다. newToDo 라는 새로운 변수에 값을 넣어둔거니까! 이후에 toDoInput.value를 가지고 무엇을 하든 newToDo와는 아무런 관계가 없다.

 

 

---

 

<creatElement() & appendChild() 복습>

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

function paintToDo(newToDo){
    const li = document.createElement("li"); // html에 'li'생성하기
    const span = document.createElement("span"); // html에 'span'생성하기
    li.appendChild(span); // li는 'span'을 품는다. 
    span.innerText = newToDo;
    toDoList.appendChild(li); // toDoList는 'li'를 품는다. 
}

function handleToDoSubmit (event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newToDo);
}

toDoForm.addEventListener("submit",handleToDoSubmit);

 

 

---

console.dir(event.target);

event.target은 선택된 객체의 대한 정보를 알 수 있다. 

target은 클릭된 HTML element 이다. 그리고 모든 HTML element에는 하나 이상의 property가 있다.

 

 

 

창에 이렇게 입력이 된다. 

 

 

 

function deleteToDo (event){
    const li = event.target.parentElement; // 우리가 삭제하고 싶은 내용
    li.remove();
}

 

❌버튼을 클릭하면 event를 얻게 된다. 그리고 그 event는 target 을 준다. target은 button 이다. 그 button은 부모(parent/ parentelement)를 가지고 있다. button의 부모는 li 가 된다. 

 

그리고 우리는 그 li를 제거한다. (remove)

 

 

---

<브라우저에서 데이트를 저장하고 싶을때 - localStorage>

=> toDos array를 "toDos"라는 이름의 localStorage에 넣는다. 

 

 

<참고>localStorage에 array를 저장할 수  없다. 오직 텍스트(string)만 저장할 수 있다. 
local storage에 array로 저장이 안되기 때문에 JSON.stringify로 array처럼 생긴 string으로 저장한 후 다시 JSON.parse 이용해 array로 꺼내는 방법을 쓰기도 한다. 

 

 

 

 

 

---

<localStorage에 array 형태로 저장하고 싶을때>

 

=>JSON.stringify(player) => player 라는 object를 string으로 바꾸고 싶어!

 

기능= JS object, array 등 어떤 것이든 string 으로 바꿔주는 기능 

 

 

 

array 로 바뀐걸 확인할 수 있다. 

 

---

<값을 string으로 저장하고 싶을 때 - JSON.stringify()>

 

 

<단순한 string을 살아있는 JS object로 만들고 싶을 때 - JSON.parse()>

 

 

 

원래 toDos는 string 이다. 

근데 JSON.parse()를 통해 array가 됐다. 

 

~비교~

 

 

위의 그냥 localStorage에 저장되어있는 건 그냥 string이다. 

아래의 JSON.parse()는 array 되어있다. 

 

 

---

 

<JS - forEach>

=> foreach 반복문은 오직 Array 객체에서만 사용가능하다. 배열의 요소들을 반복하여 작업을 수행할수 있다. 

 

 

=>parsedToDos가 가지고 있는 각각의 item (=array의 각 item)에 대해 sayHello function을 실행하라고 말한다. 

 

즉, sayHello("a"), sayHello("b"), sayHello("c") 가 순서대로 된거다!

 

console창에 log 된 값

배열 안에 3개가 들어 있어서 hello가 3번 로그된거다. 

 

 

---

(응용)

 

출력

이렇게 출력된다. 왜냐면 👇👇👇

 

 

localStorage에 이렇게 저장되어 있으니까!

 

 

---

<화살표 함수>

 

function sayHello(item){
    console.log("this is the turn of", item);
}

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

 

 

if (savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach((item) => console.log("this is the turn of", item))
}

 

같은 함수다!!

 

 

둘 다 이렇게 출력된다. 

 

 

 

---

<더 깊게 이해해보자!>

localStorage는 string format밖에 지원을 안한다. 따라서 뭐든지 간에 다 string으로 변환시킨다.

근데 JSON.stringify도 string으로 변환시킨다. 그럼 이 둘의 차이는?

const todo = ["hi","hello"]
localStorage.setItem('todo',todo)
localStorage.getItem('todo')
>>> 'hi,hello' ( 기존 리스트 형식 없애고 내용물만 string화 시킴)
localStorage.setItem('todo',JSON.stringify(todo))
localStorage.getItem('todo')
>>> '["hi","hello"]' (리스트 째로 string화 시켜줌)

이런 차이가 있다. 
JSON.stringify로 넘겨준 자료는 JSON.parse로 받아와서 이전 모습 그대로 꺼낼 수 있지만
그냥 넘겨준 자료(localStorage.setItem('todo',todo)는 JSON.parse로 받아오지 못해요 오류가 납니다.