ToDo만들기

목적

<aside> 💡 바닐라 JS를 다시 사용해보며 손에 익혀 봅니다 바닐라 JS로 만든 TODO를 타입스크립트로 마이그레이션 하며 타입스크립트를 익혀봅니다 최종 단계는 리액트로 코드를 변경해보는 것을 목표로 하고 있습니다

</aside>

1단계

기술

JS/Tailwind

진행

바닐라 자바스크립트를 이용해서 CRUD가 가능한 TODO를 만들어 줍니다. 이때 CRUD의 경우 데이터베이스가 온전히 있는 것이 아닌, 일단 로컬 스토리지를 이용해서 진행 후, 1차적으로 기능이 완성된 후에 백엔드를 고민하기로 해주었습니다.

그러나 tailwind를 이용해 주고 싶어, 간단히 nodejs와 express를 이용해서 서버를 만들어 주기로 했습니다.

1차 완성

Make ToDo - Chrome 2022-09-28 17-11-36.mp4

완성된 모습은 위와 같습니다. todo가 수정되었을 때는 새로 고침을 통해 삭제의 경우에는 배열내의 todo를 필터링하고, 선택된 엘리먼트를 삭제해주는 방향으로 진행해 주었습니다.

CRUD외의 함수

//todo저장
const saveTodo = () => {
  localStorage.setItem("todo", JSON.stringify(todoList));
};

//todo빈값방지
const checkBlank = (strings) => {
  if (strings.trim().length === 0) {
    return false;
  }
  return strings;
};

CRUD

생성

const showTodo = (newTodo) => {
  const { task, id, isDone } = newTodo;
  const todoComponent = `<li class="todo-item-list"  id=${id}>
  <div class="todo-item-div">
    <input type="checkbox" ${isDone && "checked"} />
    <div class="todo-text-div">${task}</div>
  </div>
<div>
<button onclick="updateReadyTodo(this)" >📝</button>
<button onclick="deleteTodo(this)" >❌</button>
</div>
</li>`;
  todoUl.innerHTML += todoComponent;
};

이전에는 append를 이용해서 진행해 주었는데, todo자체를 하나의 별개의 컴포넌트로 만들어 이용해 주었습니다. 진행 할때 웹컴포넌트에 대해 알아 보았으나, 당장의 진행은 어렵다고 판단되어 이후에 웹컴포넌트로 todo 만들기에 도전해야지 하는 생각이 들었습니다. 그래서 당장은 아래의 makeTodo 에 값을 보내주는 방향으로 진행해 주게 되었습니다.