바닐라 JS로 크롬 앱 만들기 #7.5~#7.6

Jenner 2022. 4. 21. 19:37

#7.5 Loading To Dos part Two

const ToDos =  [];

console.log(saveToDos);
if(saveToDos !== null){
    const parsedToDos = JSON.parse(saveToDos);
    parsedToDos.forEach(paintToDo);
}

이제 해야 할 것은, parsedToDos array 내부의 item들을 가지고

paint(나타내기)하는 것이다.

그러려면 parsedToDos의 인자를 각각 넣은 paintToDo 함수를 호출하면 된다.

그 함수가 바로 forEach 함수이다.

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

변경된 코드.

문제는 새로고침하고 todo list에 무언가를 다시 저장하면,

application에 저장되어있는 내용들은 모두 지워지고 또다시 새로이 application에 저장이 되어버린다.

그이유는

const toDos = [];

application이 시작될 때 toDos array는 항상 비어있기 때문.

그리고 우리는

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

}

저장을 하려고 할 때마다 newToDo를 비어있는 array에 그냥 push 하게 되는 것이다.

그리고 saveToDos를 실행시킬 때마다 새로운 toDo들만 포함하고있는 array를 저장하는 것이다.

이전에 있던 것은 localstorage에만 있다.

방법은

const로 되어 항상 비어있는 상태로 시작했던 ToDos를

let ToDos =  [];

let으로 ToDos를 선언하고,

localStorage에 toDo들이 들어있다면

console.log(saveToDos);
if(saveToDos !== null){
    const parsedToDos = JSON.parse(saveToDos);
    ToDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

ToDos에 parsedToDos를 할당하여 다시 ToDos를 불러들여온다.

그러면 새로고침 하여도 비어있는 상태가 아닌 담아져 있는 상태로 오게 된다.

그런데 문제는 todo list를 지우고 새로고침하게 되면 다시 생겨난다.

localstorage에는 삭제가 되지 않았기 때문이다.

그건 다음 강의에서.

#7.6 Deleting To Dos part One

local storage는 toDos array를 복사해 두는 곳이다.

database는 console에서 toDos를 입력하면 나오게 되는 것이 database.

우리는 localstorage에 저장되어있는 어떤 text를 database에서 지워야 할지 모른다.

문제를 해결하려면

toDos에 ID를 주어야 한다. (object를 주어야 한다.)

[{id :dfdf , text : " drink "}]

이런 형식으로...

랜덤 아이디를 만들어보자.

Date.now()는 밀리초(1000분의 1초)를 주는 함수다.

초들이 거의 랜덤으로 보인다.

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

}

수정한 코드..

newTodoObj를 text에 newTodo값을 주고 id에 Date.now()값을 주면

랜덤하게 보이는 ID값을 얻는 array를 저장하게 된다.

ToDos에 newTodoObj를 전달하고

paintToDo에 newTodoObj도 전달한다.

그런데 문제가 생겼다. todo list에 입력하게 되면 [object Object]와 같이 나오게 된다.

    span.innerText = newTodo.text;

이렇게 바꾸면 문제가 해결된다.

newTodo의 텍스트 인자만을 가지고 span의 innerText에 넣는것.

위에 array에 부여한 랜덤한 ID를 사용하려면 id를 HTML에 두는 방법이 있다.

    createLiList.id = newTodo.id;

이제 문제없이 object에 id와함께 text를 저장하는 법을 배웠다.

이제 X를 누른 버튼의 id를 얻도록 해보자.

console.log(li.id);

그러면 지운 인자의 id가 콘솔 창에 나타나게 된다.