Todo list 만들기

todolist의 기본적인 기능을 만들어 보고자 한다.

로컬스토리지를 통해서 새로고침을 해도 todolist들이 없어지지 않고 삭제 버튼이 누르면 로컬스토리지에서 정보가 사라지는 정보만 만들거다.

 

 

HTML

 

html은 이런식으로 구성했다.

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

input을 통해 todo를 만들도록 하였고

ul태그를 만들어 놓고 <li>는 자바스크립트로 생성하도록 하였다.

 

JS

 

아래는 전체코드이다.

이해안된다고 겁 먹지말고 천천히 뜯어보자.

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

let toDos = [];

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

function deleltToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  toDos = toDos.filter((item) => item.id !== parseInt(li.id));
  console.log(toDos);

  saveToDos();
}

function createToDo(newToDo) {
  const li = document.createElement("li");
  li.id = newToDo.id;
  const span = document.createElement("span");
  const button = document.createElement("button");
  span.innerText = newToDo.text;
  button.innerText = "❌";
  toDoList.appendChild(li);
  li.appendChild(span);
  li.appendChild(button);
  button.addEventListener("click", deleltToDo);
  toDos.push(newToDo);
  saveToDos();
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  const newToDoObj = {
    text: newToDo,
    id: Date.now(),
  };
  toDoInput.value = "";
  createToDo(newToDoObj);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem("todos");

if (toDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  parsedToDos.forEach((item) => {
    createToDo(item);
  });
}

 

셀렉터

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

html에서 정해놓은 id를 통해서 각각의 태그를 셀렉(선택)할 수 있도록 하였다.

 

 

Submit 함수

function handleToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  const newToDoObj = {
    text: newToDo,
    id: Date.now(),
  };
  toDoInput.value = "";
  createToDo(newToDoObj);
}

input에 값을 넣고 엔터를 누르면 활성화되는 함수이다.

event.preventDefault();는 input의 기본적인 기능을 제한하는 역할을 한다.

원래 input은 todo를 적고 엔터를 누르면 페이지가 새로고침이 되는데 그것을 막아준다.

 

const newToDo는 위의 셀렉터의 값 즉 input에 적은 내용을 변수에 담아준것이다.

const newToDoObj는 각 todo를 구분짓기 위해서 id값을 지정해주려고 이러한 형태로 만들어준것이다.

여기서 id값은 Date.now()로 현재 시간을 토대로 값을 만들어주었다.

 

toDoInput.value = "";는 input에 값을 넣고 엔터를 넣으면 input안에 있는 값이 초기화되도록 만드는 것이다.

 

createTodo(newToDoObj)는 input 값을 todo를 생성해주는 함수로 보내주는 것이다.

 

 

toDoForm.addEventListener("submit", handleToDoSubmit);

input에 값을 넣고 엔터를 누르면 handleToDoSubmit 함수가 작동되게한다.

여기서 handleToDoSubmit()를 하지 않는 이유는 자바스크립트가 작동할 권리를 주기 때문이라고 한다. 함수만 손에 쥐어주고 알아서 작동시켜라 라는 뜻인듯하다.

 

 

todo 생성 함수

function createToDo(newToDo) {
  const li = document.createElement("li");
  li.id = newToDo.id;
  const span = document.createElement("span");
  const button = document.createElement("button");
  span.innerText = newToDo.text;
  button.innerText = "❌";
  toDoList.appendChild(li);
  li.appendChild(span);
  li.appendChild(button);
  button.addEventListener("click", deleltToDo);
  toDos.push(newToDo);
  saveToDos();
}

 

submit함수에서 createToDo함수가 실행되어 newToDo값으로 아래의 객체형태로 온다.

  const newToDoObj = {
    text: newToDo,
    id: Date.now(),
  };

document.createElement 들은 셀렉터와 비슷해보이지만 셀렉터가 아니라 태그를 생성해주는 역할을 한다.

 

li.id = newToDo.id는 생성된 li태그에 id값을 지정해준다.

 

innerText는 content부분의 값을 넣어주는 것이다.

span.innerText = newToDo.text; -> span태그 content에 input에 넣어던 값으로 지정해주는것이다.

button.innerText = "❌"; -> button에 ❌ content를 추가해주는 것이다.

 

appendChild는 자신의 자식으로 만드는것이다.

toDoList.appendChild(li); -> html에서 ul태그의 자식으로 li태그를 만드는것이다.

li.appendChild(span); -> li태그의 자식으로 span태그 

li.appendChild(button); -> li태그의 자식으로 button태그

이런 모습으로 된다.

 

button.addEventListener("click", deleltToDo); -> 버튼을 click하면 뒤에 정리할 deleltToDo함수를 실행한다.

 

toDos.push(newToDo); -> 이렇게 생성된 newToDo(객체)를 toDos(배열)로 보내는데 toDos는 todo들을 모아놓은 배열이다.

let toDos=[] 

 

saveToDos(); -> svaeToDos(); 함수를 실행 toDos를 로컬스토리지에 넣는 작업을 하는 함수이다.

 

todo 삭제 함수

function deleltToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  toDos = toDos.filter((item) => item.id !== parseInt(li.id));
  saveToDos();
}

 

여기서 event는 button 태그를 의미한다. 

const li = event.target.parentElemnet; 는 button의 부모태그를 셀렉한다는 의미이다. -> button의 부모는 li태그이다.

 

li.remove() -> li태그 삭제

 

toDos = toDos.filter((item) => item.id !== parseInt(li.id));

이 부분은 filter의 이해가 필요하다.

filter는 toDos의 객체들을 하나씩 가져와서 true면 그대로 냅두고 false이면 삭제시킨다.

toDos는 아래의 코드처럼 생겼다.

let toDos = [{
    text: "숙제하기"
    id: 12345678981
},
{
    text: "유튜브보기"
    id: 189189546846
},
{
    text: "자소서쓰기"
    id: 65156151981
}]

여기서 id값을 가져와서 li의 id값이랑 비교해서 같으면 삭제시켜버린다.

parseInt(li.id) 이걸하는 이유는 li.id는 string 형태여서 number로 바꾸는 작업이다.

 

saveToDos(); -> 로컬스토리지에 저장

 

로컬스토리지 함수

 

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

localStorage.setItem은 로컬스토리지에 저장하는 역할

localStorage.getItem은 로컬스토리지에 저장된 값을 가져오는 역할이다.

 

JSON.stringify(toDos)를 하여 객체를 string형태로 저장을 해놓는다. 그래야 빼서 쓰기 좋다.

 

if문

 

const savedToDos = localStorage.getItem("todos");

if (toDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  parsedToDos.forEach((item) => {
    createToDo(item);
  });
}

const savedToDos = localStorage.getItem("todos"); -> 로컬 스토리지에 있는 값을 변수에 담는다.

 

toDos !== null -> toDos에 값이 있으면

 

const parsedToDos = JSON.parse(savedToDos); -> 로컬스토리지에 있는 값을 string에서 다시 배열로 만들어준다.

parsedToDos.forEach((item) => { createToDo(item); }); -> 각각의 값을 createToDo함수로 보낸다.

 

후기

 

간단하게 만드내용이지만 정리를 하려니깐. 생각보다 힘들고 어떻게 설명해야할 지 어려움이 많았다.

다음에는 단계적으로 끊어서 설명을 해보려고해야겠다.

그리고 forEach, filter 함수라던지 셀렉터부분에서 이해가 부족하여 그 부분을 좀 더 공부를 해봐야겠다.

빠르게 자바스크립트를 끝내고 리액트, 타입스크립트를 들어가서 프로젝트에 투입되고 싶다.