오늘은 to-do list를 만들어보자!

📖to-do list 만들기

1. Adding to-dos

✍ example

//html
<form id="todo-form">
   <input type="text"class="todoinput" placeholder="Write a To Do and Press Enter">
</form>

//javascript
function handleToDoSubmit(event){
    event.preventDefault();
 	const newTodo=todoInput.value;
   	console.log(todoInput.value="");
  	paintToDo(newTodo);
}

todoForm.addEventListener("submit", handleToDoSubmit);

• 먼저 to-dos를 입력할 수 있는 input을 html에 추가.
• to-do list 창에 할일을 입력하고 엔터를 눌렀을 때 새로고침되지 않도록 preventDefault() 함수 사용.
• 엔터를 누를 때마다, 입력한 것을 비우기 위해 console.log(todoInput.value="") 추가.

✍ example

function paintToDo(newTodo){
    const li=document.createElement("li");
    const span=document.createElement("span");
  	const button=document.createElement("button");
    li.appendChild(span);
  	li.appendChild(button);
    span.innerText=newTodo;
    console.log(li);
 
}

• paintToDo()는 to-dos를 받아 html에 element를 생성하여 화면에 출력할 수 있도록 해주는 함수.
• document.createElement()를 이용하여 html에 li, span, button과 같은 element 생성 가능.
• appendChild()는 element에 마지막 자식 요소를 생성해주는 함수.
• span.innerText=newTodo 유저로 부터 받은 to do list를 span에 입력.

appendChild()는 인자를 가장 뒤에 놓는다. 따라서 button이 span보다 뒤에 올 것이다!!

✔ 결과 확인

2. Deleting to-dos

✍ example

//javascript
function deleteTodo(event){
	const li=event.target.parentElement;
    li.remove();
}
button.addEventListener("click",deleteTodo);

• 인자로 전달된 event는 어떤 button이 클릭되었는지를 알려주는 property를 가지고 있음.
• 클릭된 버튼의 target을 이용하여 parentNode나 parentElement를 이용해서 무엇을 삭제해야하는 지 알 수 있음.
• target은 event가 발생한(여기서는 클릭된) html의 element.
• parentElement는 클릭된 element의 부모.
• 클릭된 button의 부모는 span이므로 event.target.parentElement을 이용하면 클릭된 버튼으로 어떤 to-dos를 삭제 해야하는 지 알 수 있음.
  
  

3. Saving to-dos

-localstorage를 이용하여 todolist를 비우기 전에 이를 저장해보자.
✍ example

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

• localStorage에 todos라는 키로 toDos의 배열에 있는 값들을 저장.

그러나 !! localstorage는 데이터베이스는 아님. toDos는 데이터베이스지만 localstorage는 toDos array를 복사해두는 곳임.

• JSON.stringify()은 ()안에 적은 값은 string으로 변환.
• JSON.parse()은 ()안에 적은 값을 배열로 변환.
  
  

✔ 결과 확인

✍ example

//javascript
let TODOS_KEY="todos";
const saveToDo=localStorage.getItem(TODOS_KEY);
if(saveToDo!==null){
    const parsedToDos=JSON.parse(saveToDo);
}

• localStorage에 저장한 값이 있다면 이를 배열로 바꿔줌.

forEach()

✍ example

//javascript
function sayHello(item){
    console.log("say hello", item);
}
 parsedToDos.forEach(sayHello);

• 배열은 forEach()라는 함수를 가지고 있는데 이는 배열의 각각의 원소마다 함수를 적용시켜주는 역할.
• forEach()에서 함수를 부를 때마다 인자로 배열의 원소를 함께 넘겨줌. (인자를 명시하지 않더라도!)
• parsedToDos.forEach(paintToDo) 를 해주면 parsedToDos에 있는 배열의 원소 하나씩이 paintToDo()에넣어지면서 화면에 출력됨.
  
  

✔ 결과 확인

-todo를 정확하게 지우기 위해서는 todo에 id가 필요하다. 만약 같은 이름의 해야할 일이 2개가 있을수 있기 때문이다. 이 아이디는 todo가 입력된 시간으로 하자.

✍ example

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

• Date.now()로 todo가 입력된 시간을 구할 수 있음.
• todo와 id를 동시에 저장하기 위해서는 그냥 text를 push하는 것이 아니라 object를 push 해야함.

-id도 함께 추가해주었으면 id를 활용할 수 있다록 html에 넣어주어야 한다.


✍ example

//javascipt
function paintToDo(newTodo){
    const li=document.createElement("li");// html에 li생성
    li.id=newTodo.id;
}

• paintToDo()에서 li의 id에 object의 id를 추가.

4. Deleting to-dos at localStorage

-만약 array에서 무언가를 삭제할 때 이건 실제로 array에서 무언가를 지우는 것이 아니다. 지우고 싶은 item을 빼고 새 array를 만드는 것을 통해 무언가를 삭제하는 행위를 구현할 수 있다.

filter()

✔ filter()는 forEach()와 비슷한 함수.
✔ [1, 2, 3, 4].filter(function)을쓰면 function에 1, 2, 3, 4, 각각의 원소마다 함수를 실행하는데 이 때, 각각의 원소를 인자로 보냄.
✔ filter()에서call하는 함수는 새 array에서 이 object를 유지하고 싶다면 true를 리턴해야함.
✔ false를 리턴하면 이 item은 새 array에 포함되지 않을것.


✔결과확인




✍ example

//javascript
function deleteTodo(event){
    const li=event.target.parentElement;//button의 부모는 span
    li.remove();
    toDos=toDos.filter(toDo=>toDo.id!==parseInt(li.id));
    saveToDos();
}

• toDos=toDos.filter(toDo=>toDo.id!==parseInt(li.id))는 클릭한 li의 id가 아닌것만 true로 리턴. 즉 클릭한 li의 id는 false이므로 이를 제외하고 새로운 array를 만들 것!
• 이 때 li.id는 string형이기 때문에 parseInt로 형변환을 해주어야함. 자료형이 같아야 비교가 가능하고 삭제가 가능해짐!

✔ 마치며

다음 포스팅에서는 css를 적용하여 구현한 to-do list app과 개발하면서 있었던 이슈들을 정리하고 마무리하겠습니다. 😊