노마드코더 JS로 크롬앱만들기) #7 TO DO LIST - parentElement, JSON.stringify(), filter()

■ adding To Dos

 

새로운 코드는 없다.

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

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

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

toDoForm.addEventListener("submit", handleToDoSubmit);

 

---

 

■ deleting To Dos

 

event.target.parentElement : 부모 객체 선택

event.target.parentElement.innerText : 부모 객체의 innerText 선택

function deleteToDo(event) {
    console.log(event);
    console.log(event.target.parentElement)
    console.log(event.target.parentElement.innerText)
}

윈도우 이모지 단축키 : win + .

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

function deleteToDo(event) {  // 추가
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newTodo) {  // 수정
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");  // 추가
    button.innerText = "❌";  // 추가
    button.addEventListener("click", deleteToDo);  // 추가
    li.appendChild(span);
    li.appendChild(button);  // 추가
    toDoList.appendChild(li);
}

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

toDoForm.addEventListener("submit", handleToDoSubmit);

 

---

 

■ saving To Dos

localStorage에 To Dos를 저장되게 했다. 그러나 몇가지 문제가 있다.

1 array로 저장되지 않는다.

2 새로고침 후 입력시 value가 지워진다.

3 delete시 localStorage value가 변경되지 않는다.

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

const toDos = [];  // 추가

function saveTodos() {  // 추가
    localStorage.setItem("todos", toDos);
}

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

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

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);  // 추가
    paintToDo(newTodo);
    saveTodos();  // 추가
}

toDoForm.addEventListener("submit", handleToDoSubmit);

 

'1 array로 저장되지 않는다'의 해결법

array 형식을 String으로 강제 저장한다.

JSON.stringify(변수) : 변수의 내용을 String으로 만들어준다.

// todo.js
function saveTodos() {
    localStorage.setItem("todos", JSON.stringify(toDos));  // 수정
}

 

-JSON.parse(String) : String을 array로 만들어준다.

 

-array.forEach(함수) : array의 항목 하나하나마다 함수를 실행한다.

function sayHello() {
    console.log("hello");
}

parsedToDos.forEach(sayHello);

event와 같이 item으로 공짜로 주어지는 argument를 받을 수 있다.

arrow function(화살표 함수)를 사용해서 표현할 수 있다.

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

parsedToDos.forEach(sayHello);

// arrow function(화살표 함수)를 사용하면 아래처럼 한 줄로 가능하다.
parsedToDos.forEach((item) => console.log("this is the turn of", item));

 

 

'2 새로고침 후 입력시 value가 지워진다.' 해결법

빈 array를 정의하고 newTodo를 거기에 push 하기 때문에 문제가 발생한다.

toDos를 localStorage에 저장된 값을 가져오는 코드를 추가한다.

// todo.js
let toDos = [];  // let으로 수정

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;  // 추가
    parsedToDos.forEach(paintToDo);
}

const savedToDos = localStorage.getItem("todos");  // 추가

 

 

'3 delete시 localStorage value가 변경되지 않는다.' 해결법

 

Date.now() : 현재 시간을 밀리초로 반환한다.

배열의 값에 id를 부여하고, 삭제시 활용하도록 한다.

// todo.js
function paintToDo(newTodo) {
    const li = document.createElement("li");
    li.id = newTodo.id;  // 추가
    const span = document.createElement("span");
    span.innerText = newTodo.text;  // newTodo.text로 수정
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo)
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    const newTodoObj = {  // 추가
        text: newTodo,
        id: Date.now()
    }
    toDos.push(newTodoObj);  // newTodoObj로 수정
    paintToDo(newTodoObj);  // newTodoObj로 수정
    saveTodos();
}

 

 

-filter()

array.filter(boolean) : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

function sexyFilter(){

}

[1, 2, 3, 4].filter(sexyFilter)

// 아래와 같이 작동. 하나씩 대입함
sexyFilter(1)
sexyFilter(2)
sexyFilter(3)
sexyFilter(4)

예)

// console
function sexyFilter(item){return item !== 3}
undefined
[1,2,3,4,5].filter(sexyFilter)  // [1,2,3,4,5].filter(item => item !==3) 동일

(4) [1, 2, 4, 5]

 

filter 적용하면 x 클릭시 localStorage에서 삭제된다.

// todo.js
function deleteToDo(event) {  // 수정
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));  // 추가
    saveTodos();  // 추가
}