바닐라JS 2주 완성반 DAY6: #3.5~3.7

2021-01-18

 

#3. 5 Making a To Do List part Two (14:06)

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");


const TODOS_LS = "toDos";

const toDos=[];

// JSON.stringfy
// JSON = JavaScript Object Notation 의 준말. 자바스크립트 오브젝트 표기법
// ex) Object 를 String으로 혹은 String을 Object로 바꿔주기도 한다.
// localStorage key값으로는 Object가 못들어간다. 오직 String만
// 그래서 String으로 변환해야 정상적으로 key값에 들어가는걸 확인할 수 있다.
function saveTodos() {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos))
}

function paintToDo(text) {
    const li= document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length+1
    delBtn.innerHTML="X";
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id=newId
    toDoList.appendChild(li);
    const toDoObj = {
        text : text,
        id : newId
    };
    toDos.push(toDoObj);
    saveTodos();
}


function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";
}
// forEach는 array를 위한 function이다.
// 이와 같은 예로 String도 function이 있고
// Object도 function이 있다.

function loadToDos(){
    const loadedToDos=localStorage.getItem(TODOS_LS)
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
       parsedToDos.forEach(function(toDo) {
           paintToDo(toDo.text);
       });
    }
}

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

이번 강의에선 브라우저에 출력해놓은 toDoList를 localStorage

key / vlaue 값에 저장하고 그 저장된 값을 브라우저 새로고침을 해도 똑같이 리스트들이 나오게 하는 기능을 추가했다. 

 

첫 번째로 key / value 값에 저장하기 위해 목록 리스트를 담을 배열 변수를 선언해주고 

saveToDos() 함수를 생성하고 정의해준다. 

 

두번째로 저번 강의에 만든 loadToDos 함수를 정의해주는데

localStorage의 값을 가져오는 함수를 작성해주고 value값들은 Object로 바꿔주는 JSON.parse를 사용해서 가져온다.

그리고 배열을 위한 function으로 forEach 함수를 사용해서 리스트들은 하나씩 가져와서 브라우저에 리스트로 생성해주는 paintToDo함수를 사용해준다. 

 

다음 강의에서는 버튼을 누르면 list가 삭제되는 기능을 구현해보겠다. 

 

---

#3.6 Making a To Do List part Three (12:03)

 

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");


const TODOS_LS = "toDos";



let toDos=[];

function deleteToDo(event){
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id);
    });
    toDos=cleanToDos;
    saveTodos();
}

// JSON.stringfy
// JSON = JavaScript Object Notation 의 준말. 자바스크립트 오브젝트 표기법
// ex) Object 를 String으로 혹은 String을 Object로 바꿔주기도 한다.
// localStorage key값으로는 Object가 못들어간다. 오직 String만
// 그래서 String으로 변환해야 정상적으로 key값에 들어가는걸 확인할 수 있다.
function saveTodos() {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos))
}

function paintToDo(text) {
    const li= document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length+1
    delBtn.innerHTML="X";
    delBtn.addEventListener("click",deleteToDo);
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id=newId
    toDoList.appendChild(li);
    const toDoObj = {
        text : text,
        id : newId
    };
    toDos.push(toDoObj);
    saveTodos();
}


function handleSubmit(event){
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";
}
// forEach는 array를 위한 function이다.
// 이와 같은 예로 String도 function이 있고
// Object도 function이 있다.

function loadToDos(){
    const loadedToDos=localStorage.getItem(TODOS_LS)
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
       parsedToDos.forEach(function(toDo) {
           paintToDo(toDo.text);
       });
    }
}

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

이번 강의에서는 list를 지우는 기능을 추가할 것이다. 

 

첫 번째로 버튼의 addEventListener를 생성한다. click 이벤트 발생 시 deleteToDo함수 호출되게 

 

이후 deleteToDo함수를 정의해보자면 

첫번째로 버튼을 클릭했을 때 consold.log를 확인해보면 버튼은 클릭된다는 걸 확인할 수 있는데 

어떤 리스트의 버튼이 클릭되는지 확인이 불가하다 .그래서 확인이 가능하게 해주는. target을 이용해서 

부모 태그인 <li>의 id를 알아내기 위해 parentNode를 사용해서 추출해낸다. 

추출 후 html태그에서의 removeChild를 이용해 지워주면 html상 즉 브라우저상에서는 사라진 list를 확인할 수 있다. 

하지만 새로고침하면 사라진 list가 다시 생성이 되는데 이는 지워준 리스트 항목들로 교체를 하지 않았기 때문이다.

교체해주기 위해서는 .filter함수를 사용할 건데 안의 콜백 함수의 조건? 에 부합하는 값들로 새로운 Array를 만들어준다. 

그러니까 1,2,3 가지의 리스트가 있고 리스트 1의 버튼을 눌러 삭제를했으면 2,3, 의 리스트가 남아 있을 거고 이건 브라우저에 보이는 2,3 리스트이다. 하지만 localStoarage에서는 안 없어져 1,2,3의 리스트가 존재하고 2,3 이남은 Array와 1,2,3, 이 남은 Array를 비교해서 값이 다른 부분을 버리고 남은 부분으로 새롭게 Array를 만들어주는 것 

그렇게 새롭게 만든 Array를 toDos에 넣어주고 saveToDos()를 이용해서 새롭게 초기화해준다.