DAY 12

 

 

7.0 ~ 7.5 TO DO LIST

(양이 많아 DAY 12에는 7.0~7.5, DAY 13에는 7.6~7.8, DAY 14에는 8.0~8.2로 나눈다.)

#7.0 Setup

 

index.html 

    <!-- todo -->
    <form id="todo-form">
      <input type="text" placeholder="Write a To Do and Press Enter" required />
    </form>
    <ul id="todo-list"></ul>

todo-form 내의 input에는 할 일을 입력받고, ul 태그에는 저장한 text가 나열될 수 있게 한다. 

 

 

todo.js

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
// const toDoInput = toDoForm.querySelector("input"); // 이런 식으로 쓸 수도 있다.
const toDoList = document.getElementById("todo-list");

function handleToDoSubmit(event){
    event.preventDefault();
    console.log(toDoInput.value);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

 

toDoForm에는 #todo-form을, toDoList는 #todo-list를 받아왔으며, todo-form의 input태그의 value를 toDoInput에서 불러올 수 있도록 따로 설정했다.

 

할 일을 입력받았는데도 입력했던 value가 그대로 남아있음.

 

다만 할 일 목록을 추가했을 때, 새로운 할 일을 입력받기 위해서는 저 value에 있는 값을 지우고 다시 작성해야 하는 일이 번거로우므로 value 값을 저장한 후 다시 value 값을 비워둔다.

 

handleToSubmit

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

 

 

 

#7.1 Adding ToDos 

 

이제 list에 출력해볼 것이다.

그러기 위해서는 ul 태그 안에 li 태그를 추가해 각각의 newTodo를 만들고,

그 todo 안에는 할 일의 내용과, 해당 할 일을 삭제하는 버튼을 만들기 위해서 내용은 span 태그에, 삭제 버튼은 button 태그로 만들 것이다. 

 

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); // paintToDo 함수에 newToDo 값을 전송
}

 

handleToDoSubmit 함수 안에 newTodo를 인자로 가지는 paintToDo 함수를 호출했다. 

 

paintToDo function

document 안에 li 태그와 span 태그를 생성한 후,

span 태그를 이 li 태그의 자식으로 추가했다.

그리고 span 태그의 내용에는 handleToDoSubmit 함수에서 전달한 newTodo의 값을 넣고,

toDoList(ul 태그)에는 li 태그를 자식으로 추가했다.

 

 

#7.2 Deleting To Dos

 

이제 삭제 버튼에 이벤트를 추가할 것이다.

 

function deleteToDo(){}

function paintToDo(newTodo){
    // todo 내용 추가
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    // delete할 버튼 추가
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    // li 태그에게 span, button을 자식으로 추가
    li.appendChild(span);
    li.appendChild(button);
    // toDoList(ul)에게 li 태그를 자식으로 추가
    toDoList.appendChild(li);
}

 

그러나 위의 코드에서의 삭제 버튼은 newTodo의 li 태그가 여러 개 있을 때, 임의의 버튼을 클릭했을 때 다른 버튼과 동일한 이벤트가 실행될 것이다. 

 

이를 위해 각각의 버튼에게 발생한 이벤트 값을 매개변수로 전달해준다.

이 때 deleteToDo 함수 안에서 console.log(event); 작성 후 실행했을 때, 각각의 버튼의 이벤트를 자세히 살펴보면,

event는 많은 property들을 가지는데 이것은 위의 코드에서는 어떤 버튼이 클릭 됐는지 알려준다. property중 하나인 target은 클릭된 HTML element를 말한다. 

이 때 각 event의 target을 콘솔에 출력하고자 하면 실질적 button의 innerText에는 ❌가 있으므로 <button>❌</button> 이 출력되겠지만, 

 

function deleteToDo(event){
    console.dir(event.target);
}

 

dir로 봤을 때는 각 target 내의 많은 property 들을 확인할 수 있었는데, 이 중 부모 태그(li)에 관련된 parentNode나 parentElement를 이용할 수 있다.

console.log(event.target.parentElement.innerText);

event.target.parentElement.innerText를 출력하면 각 버튼의 해당 버튼의 부모 태그(li)에 있는 모든 innerText도 가져올 수 있게 된다.

아무튼 이런식으로 parentElement가 각 li태그를 가져온다는 사실을 알게 되었다.

 

deleteToDo

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

 

이제 삭제 기능도 잘 구현되고 있지만 지금까지의 코드는 브라우저를 새로고침할 때 사라지므로 이제 localStorage를 이용할 것이다. 

 

 

 

#7.3 Saving To Dos

 

먼저 각각의 newTodo를 담을 array를 하나 생성한다. 

const toDos = [];

 

그리고 newTodo를 출력하기 전에, toDos array에 newTodo를 push하고, 출력하고, 저장할 것이다.

 

const toDos = [];

// 나머지는 생략

function saveToDos(){
    localStorage.setItem("todos", toDos);
}

function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo); // paintToDo 함수에 newToDo 값을 전송
    saveToDos();
}

 

위 코드는 새로고침 시 localStorage에 정보는 잘 남아있지만, 출력되지도 않을 뿐더러 만약 다시 새로운 할 일을 추가하려고 하면 초기화된다. 게다가 localStorage에 저장된 정보도 array가 아닌 그냥 a,b,s,c로 저장된 text이며 결국 array로 저장할 수 없다.

 

이를 JSON.stringfy()로 사용하면 변수를 문자열로 바꿔서 array 그 자체를 문자열로 만들고,

나중에 JSON.parse()를 사용해 문자열을 다시 javascript가 이해할 수 있는 array로 만들 수 있다.

 

saveToDos

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

 

array 형식으로 잘 저장되며, 참고로 중복 데이터 삽입도 가능하다.

 

 

 

#7.4 Loading To Dos part One 

 

이제 실제 리스트에 출력할 때는 JSON.parse를 이용해 실제 javascript가 받아들이는 array 형태로 변환시키고, forEach()를 이용해 index의 처음부터 끝까지 각각의 item에 대해 함수를 한번씩 실행해준다.

 

위의 코드들 중 addEventListener를 보면 실제로 실행했을 때 함수 handleOnSubmit에 event argument를 그냥 제공해주는데, item도 마찬가지다. 

 

// todos라는 문자열이 여러번 사용되어 따로 정의
const TODOS_KEY = "todos";
const toDos = [];

// 나머지는 생략

toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);

// 각각의 array들의 item(parsedToDos.array.forEach의 인덱스)을 인자로 한 함수가 된다.. 
function sayHello(item){
	console.log("this is the turn of", item);
}
// savedToDos에 데이터가 있다면
if (savedToDos !== null) {
	// saveToDos 내에 담겨있던 내용을 javascript가 이해할 수 있는 array로 전환한다.
    const parsedToDos = JSON.parse(savedToDos);
    // 각각의 array(parsedToDos)의 인덱스들에 대해 sayHello라는 function을 실행한다.
    parsedToDos.forEach(sayHello);
    /* // 또는 19번째 row의 코드를 sayHello의 정의 없이 아래와 같이 쓸 수도 있다. 
    parsedToDos.array.forEach((item) => {
        console.log("this is the turn of", item);
    });
    */
}

 

위 코드의 실행 결과..

 

이제 list에 출력하는 일만 남았다.

 

 

 

#7.5 Loading To Dos part Two

 

위의 코드처럼 console.log도, item도 쓸 필요 없이 그냥 paintToDo를 출력하면 된다.

 

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

 

이제 계속 newToDo를 추가할 때마다 바로 list로 출력될 것이다. 다만 지금까지의 코드로는 새로 추가한 것들만 localStorage에 저장되었고, 이전 것은 없어져있다. 즉 데이터가 덮어씌워졌다는 것이다. 

그 이유는 const toDos = []; 이다. application이 시작 될 때 toDos의 array가 항상 비워져 있기 때문이다. 

 

이 때문에 const가 아닌 업데이트가 가능한 let으로 바꿔주고, toDos에 parsedToDos를 대입해 전에 있던 toDos를 복원한 상태로 toDos를 시작한다. 

 

let toDos = [];

// 생략

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

 

덮어씌워지지 않고 잘 추가되었다!

 

이제 그냥 보여지는 li 태그만 remove하는 것이 아닌 실제 localStorage에서 삭제되는 코드를 추가할 것이다.