[JavaScript] #7 TO DO LIST (바닐라JS로 크롬 앱 만들기 by 노마드코더)

● JSON.stringify()

값을 string으로 바꾸고 싶을 때 사용하는 함수이다.

JS의 object나 array 또는 어떤 JS 코드 건 간에 string으로 바꿔준다.

● JSON.parse()

string을 인자로 넣어주면 배열로 변환된다.

 

local storage에서 key가 todos이고, value가 ["a","b","c"]일 때

 

local storage에 array로 저장이 되지 않기 때문에 JSON.stringify로 string으로 저장 후 JSON.parse()로 그 string을 array로 바꿔주는 작업이다.

● filter()

filter() 함수 동작 이해를 위한 console창

1000보다 작은 값만 배열에 남기고 싶을 때

 

filter() 함수는 새로운 배열을 만드는데, true인 값은 남기고 false인 값은 빼준다.

---

#7 TO DO LIST 까지 완성된 todo.js 코드이다.

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=[];

//local storage에 toDos 배열의 내용을 넣는 함수
function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}

//aray에서 뭔가를 삭제할 때 실제로 그 array에서 요소를 지우는게 아니라
//지우고 싶은 item이 없는 새 array를 만든다는 개념으로
function deleteToDo(event){
    //삭제하기 위해선 어떤 element가 클릭되었는지 알아야함
    //taret(button)의 부모(li)를 찾아서 remove
    const li=event.target.parentElement;
    
    li.remove();

    //여기서 toDo는 toDos DB에 있는 요소 중 하나
    //클릭한 id(li.id) 말고 남은 id들은 남겨놓고 싶은 것
    //int형과(toDo.id) string형(li.id)의 형을 맞춰주기 위해 parseInt()사용
    toDos=toDos.filter(toDo=>toDo.id!==parseInt(li.id));

    //toDOs DB에서 todo를 지운 뒤에 save해주기
    saveToDos();
}

function paintToDo(newTodo){
    const li=document.createElement("li");
    li.id=newTodo.id;
    const span=document.createElement("span");
    
    //span의 text를 handleToDoSubmit에서 온 newTodo로
    span.innerText=newTodo.text;

    const button=document.createElement("button");
    button.innerText="❌";
    button.addEventListener("click",deleteToDo);

    //span과 button을 li 내부에 만들고 싶음
    li.appendChild(span);
    li.appendChild(button);

    //이제 만들어진 li를 toDoList로
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    //form의 기본행동인 새로고침을 막음
    event.preventDefault();

    //input의 현재 값을 newTodo에 복사
    const newTodo=toDoInput.value;
    //엔터를 누를 때마다 input 비우기
    toDoInput.value="";
    
    const newTodoObject={
        text:newTodo,
        id:Date.now() //각각의 li Item을 구별하기 위해 ID 부여
    };

    toDos.push(newTodoObject);
    paintToDo(newTodoObject);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos=localStorage.getItem(TODOS_KEY);

if(savedToDos !==null){
    const parsedToDos= JSON.parse(savedToDos);
    
    //이전 toDos를 보관해야하므로 
    toDos=parsedToDos;
    parsedToDos.forEach(paintToDo);
}