바닐라JS - 앱 만들기 to do list 2

 

Loading To Dos

- 새로고침을 해도 저장되도록 하기

 

JSON.parse()로 string을 object로 변환

JSON.parse()

array.forEach(function);

array의 각 item을 argument로 전달해 function을 실행

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

if(savedToDos) {
    const parsedToDos = JSON.parse(savedToDos);
    console.log(parsedToDos);
    parsedToDos.forEach(sayHello);
}

arrow function - MDN

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

위 함수와 같은 걸 다른식으로 간단하게 표현

결과

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

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos() {
    localStorage.setItem(TODOS_KEY, JSON.stringify(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);

const savedToDos = localStorage.getItem(TODOS_KEY);

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

toDos array가 항상 []; 빈 array로 정의되고 시작해서 새로고침하고 새로운 값을 넣을 때 기존에 있던 값이 사라짐

그래서 변수 속성을 let으로 바꾸고 if문에서 toDos를 localStorage에 저장된 값으로 수정해줌

 

 

Deleting To Dos

- to do를 삭제했을 때 localStorage에서도 삭제하기

- localStorage는 toDos array를 복사해두는 곳

- 중복인 값이 있을 때 어떤 값인지 알 수 없음

- toDos를 텍스트가 아니고 object로 만들고 싶음

- 예를 들어 파이썬의 딕셔너리처럼 id와 값을 가진 형태

 

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    const newTodoObj = {
        text: newTodo,
        id: Date.now(),
    }
    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveToDos();
}

새로운 object를 생성하여 거기에 to do를 텍스트로, Date.now()을 이용해 랜덤 숫자를 id로 저장

toDos에 새로운 object 형식으로 to do를 추가하여 newTodoObj를 인수로 paintToDo()를 호출

 

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

li.id를 newTodo.id로 설정하고 span의 innerText를 newTodo(object형식으로 받음).text로 표시

 

- 삭제 프로세스: 지우고 싶은 item을 제외하고 새로운 array를 저장한다.

 

array.filter();

sexyFilter(){
    return true;
}
// 새 array에 호출할 때 보낸 item을 유지하고 싶으면
// 이 function은 반드시 true를 리턴해야 함
// false를 리턴하면 그 item은 새 array에 포함되지 않음

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

//array의 각 item을 sexyFilter() 인수로 보냄

array.filter()

응용

object로 적용

 

 

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

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos() {
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    saveToDos();
}

function paintToDo(newTodo) {
    const li = document.createElement("li");
    li.id = newTodo.id;
    const span = document.createElement("span");
    span.innerText = 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);
    paintToDo(newTodoObj);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

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

deleteToDo() 함수에 추가

toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

li.id는 string이고 toDos item의 id는 number라서 parseInt() 함수를 씀 

savedToDos() 함수를 실행해야 localStorage에도 적용됨