[JavaScript] #3.6 Making a To Do List part Two (#코딩공부)

https://youtu.be/JEbOaI_0phc

---

<복습>

https://wook-2124.tistory.com/87

[JavaScript] #3.5 Making a To Do List part One (#코딩공부)

 

<준비물>

https://repl.it/

Online IDE, Editor, and Compiler - Fast, Powerful, Free

 

<코드기록>

// const toDoObj(Object)
// text(key): text(value) / id = toDo를 [] list화 한 것에서 +1함 / toDo에 toDoObj를 push(추가)함
function paintToDo(text) {
  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  delBtn.innerText = "✖";
  const span = document.createElement("span");
  span.innerText = text;
  li.appendChild(span);
  li.appendChild(delBtn);
  toDoList.appendChild(li);
  const toDoObj = {
    text: text,
    id: toDo.length + 1
  };
  toDo.push(toDoObj);
}


// newId를 정의하고 li.id를 newId와 같게 설정한 뒤 toDoObj의 id가 newId의 값을 같게 했다
function paintToDo(text) {
  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  const span = document.createElement("span");
  const newId = toDo.length + 1;
  delBtn.innerText = "✖";
  span.innerText = text;
  li.appendChild(span);
  li.appendChild(delBtn);
  li.id = newId;
  toDoList.appendChild(li);

  const toDoObj = {
    text: text,
    id: newId
  };
  toDo.push(toDoObj);
}


// JSON.stringify(toDo) - JSON, JavaScript Object Notation
// JavaScript object를 stirng으로 바꿔줌
function saveToDo() {
  localStorage.setItem(TODO_LS, JSON.stringify(toDo));
}


// console.log(loadToDo) - console에 LS에 저장된 toDo 목록을 보여줌
// console에 출력이 되지만, string 값으로 출력됨
// 위에서 바꿔준 string값을 다시 object 값으로 바꿔야함, 다시 JSON사용
function loadToDo() {
  const loadToDo = localStorage.getItem(TODO_LS);
  if (loadToDo !== null) {
      console.log(loadToDo)
  }
}


// JSON.parse(x) - parse(parsing, 문법적 해부)
// loadToDo 값인 string과 parsedToDo 값인 object를 console로 출력해 비교해봄
function loadToDo() {
  const loadToDo = localStorage.getItem(TODO_LS);
  if (loadToDo !== null) {
    console.log(loadToDo);
    const parsedToDo = JSON.parse(loadToDo);
    console.log(parsedToDo);
  }
}


// forEach - array([] list)를 위한 function(함수)
// parsedToDo에 있는 각각의 항목(text로 입력한 값)에 대해 function를 실행함
function loadToDo() {
  const loadToDo = localStorage.getItem(TODO_LS);
  if (loadToDo !== null) {
    const parsedToDo = JSON.parse(loadToDo);
    parsedToDo.forEach(function(toDo) {
      paintToDo(toDo.text);
    });
  }
}


// 최종 코드
const toDoForm = document.querySelector(".js-toDoForm"),
  toDoInput = toDoForm.querySelector("input"),
  toDoList = document.querySelector(".js-toDoList");

const TODO_LS = "toDo";

const toDo = [];

function saveToDo() {
  localStorage.setItem(TODO_LS, JSON.stringify(toDo));
}

function paintToDo(text) {
  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  const span = document.createElement("span");
  const newId = toDo.length + 1;
  delBtn.innerText = "✖";
  span.innerText = text;
  li.appendChild(span);
  li.appendChild(delBtn);
  li.id = newId;
  toDoList.appendChild(li);

  const toDoObj = {
    text: text,
    id: newId
  };
  toDo.push(toDoObj);
  saveToDo();
}

function handleSubmit(event) {
  event.preventDefault();
  const currentValue = toDoInput.value;
  paintToDo(currentValue);
  toDoInput.value = "";
}
// TODO_LS를 load(가져)온 뒤 parse를 통해 string을 object로 바꾸고
// parsedToDo 각각에 대해(forEach) paintToDo function(함수)를 실행함
function loadToDo() {
  const loadToDo = localStorage.getItem(TODO_LS);
  if (loadToDo !== null) {
    const parsedToDo = JSON.parse(loadToDo);
    parsedToDo.forEach(function(toDo) {
      paintToDo(toDo.text);
    });
  }
}

function init() {
  loadToDo();
  toDoForm.addEventListener("submit", handleSubmit);
}

init();

---

1. toDo

먼저 toDo를 [ ] Array로 정의해주고, 다음으로 const toDoObj로 text, id 각각 text(key): text(value) 그리고 id는 toDo를 [ ] Array화 한 것에서 +1을 해주는 것으로 정의한 뒤 toDo에 toDoObj를 push(추가)하게끔 했다.

 

아직은 toDo의 [ ] Array가 비어있는 모습이다.

 

코딩공부라는 value를 입력하니 test: "코딩공부"(value)와 id가 0에서 +1되어 1이 됐다.

 

text(key)에 상응해서 입력한 text(value)가 toDoObj로 나타나 toDo로 보이고, [ ] Array로 묶여있다.

---

2. newId

const newId = toDo.length + 1을 정의하고 li.id를 newId와 같게 설정한 뒤 toDoObj의 id가 newId의 값을 같게 했다.

 

쉽게 설명하면, ul class의 하위 class인 li에서 아까 console에서 봤듯이 id + 1 되는 것을 newId로 간소화 시켜서 li의 id를 newId로 나타내어 "1, 2, 3, 4... "의 값이 나오게 했다.

 

toDoObj가 push한 toDo에도 li의 id와 동일한 값을 가진 id가 있다.

---

3. toDo value, LS에 저장하기

saveToDo function으로 [ ] Array로 간 toDoObj의 toDo를 LS에 저장해주자.

 

key는 toDo로 제대로 나오지만, value는 [object Object]가 두 개 뜨는 것을 알 수 있다. 그 이유는 LS에는 JavaScript의 data로는 저장할 수 없고 오직 string으로만 저장할 수 있기 때문이다.

 

LS에 Hello(key), true(value)로 입력해두고 console로 key "Hello"를 호출하면 boolean 타입인 true로 나올까 string 타입인 "true"로 나올지 실험해보기.

 

boolean 타입 true가 아닌 string(문자열) 타입인 "true"로 출력됐다. 이렇듯 LS에는 전부 string으로 저장해야한다.

---

4. JSON(JavaScript Object Notation), stringify

JSON은 JavaScript의 object를 stirng으로 바꿔주는 역할을 하고, 그 반대의 역할도 한다.

 

JSON.stringify(toDo)처럼 stringify는 object를 string으로 바꿔주는 JSON의 method이다.

 

아까 [object Object]와 다르게 value의 값이 [ ] Array로 { }에 묶여서 LS에 저장되었다.

 

loadToDo가 null 값이 아닐 때(!) console에 LS에 저장된 toDo 목록을 출력해보자.

---

5. JSON(JavaScript Object Notation), parse(parsing, 문법적 해부)

console에 제대로 출력되어 나오지만 object가 아닌 string으로 나온다. 그럼 이제 console에 출력될 때는 string이 아니 object로 바꿔서 출력해보자.

 

loadToDo로 object에서 string으로 바뀐 값과 parsedToDo로 string에서 object로 바뀐 값을 각각 console로 출력해 비교해보자.

 

string 값과 object 값이 확연하게 차이나는 모습을 볼 수 있다.

 

정리하면, Local Storage는 string 값만 저장할 수 있으므로 object 값을 string 값으로 바꿔줘야하고, console에서는 다시 string 값을 object 값으로 바꿔서 출력해야한다.

---

6. forEach

forEach는 [ ] Array를 위한 function(함수)이다. parsedToDo에 있는 각각의 항목(text로 입력한 값)에 대해 paintToDo function을 실행한다.

 

그 결과로 원래는 li id가 추가되어도 LS에 저장되지 않아서 화면을 새로고침하면 적어놓았던 toDo가 지워졌었는데, 지금은 LS에 toDo value가 key와 대응하여 저장되어 화면 새로고침을 해도 toDo가 화면에서 지워지지 않고 계속해서 남아있다. 다음 시간에는 X버튼 누르면 Delete되는 기능을 추가할 것이다.

 

---

※ 코로나19 조심하세요!!!!