project | Vaniila JS로 To-do 구현 회고

window98 Todo-list 프로젝트는 Rest API를 사용하여 Vanilla JavaScript로 CRUD(Create, Read, Update, Delete)를 구현해보는 것을 중심으로하여, JavaScript의 메서드 및 내장함수에 익숙해지는 것 등 JavaScript로 웹페이지를 만드는데 익숙해지는 것을 목표로 만들어졌습니다. 사용자는 To-do list를 만들고 삭제하고 수정하고 조회하는 것을 해볼 수 있습니다. 추가로 Open Api를 사용하여 날씨와 지역, 시간을 볼 수 있습니다.

🐾 사이트

Demo Site
Github Repository

🐾 구현기능

• Rest API를 통해 To-do를 추가, 조회, 수정, 삭제할 수 있습니다.
  • [JS] Vanilla JS로 To-do 사이트 만들 때, API 연동하기(fetch 방식)에 더 자세히 기록했습니다.
  • [JS] Vanilla JS로 To-do list 수정 구현하기에는 To-do 수정에 관하여 더 자세히 기록했습니다.

function renderTodoItem(todosServerData) {
  생략...
  
//check done
  const checkInput = document.createElement('input');
  checkInput.id = `checkbox-${liEl.id}`;
  checkInput.className = 'checkbox';
  checkInput.type = 'checkbox';
  const checkLabel = document.createElement('Label');
  checkLabel.htmlFor = `checkbox-${liEl.id}`;

  if (todosServerData.done) {
    checkInput.checked = true;
    titleEl.classList.add('text__deco');
  }

  checkInput.addEventListener('click', (e) => editCompleted(e, todosServerData.title, e.target.checked));
  
  생략...
}

• To-do를 체크하여 완료상태인 취소선 표시로 변경
  • 체크박스 스타일은 [CSS] input checkbox 스타일 적용하기와 같이 구현하였습니다.
  • To-do 하나당 input type checkbox와 label을 생성했습니다. 체크박스 클릭시 editCompleted라는 함수가 동작하여, 서버로 check 여부가 수정된 값이 전달됩니다. 화면에는 기존 To-do를 삭제하고 수정된 값을 반영한 To-do가 추가됩니다. 추가될 때 if (todosServerData.done) 조건문으로 판단해, 서버의 check 여부 값을 반영해 titleEl.classList.add('text__deco')와 같이 취소선을 적용합니다.

//filter
const onlyTodo = document.querySelector('.onlytodo-btn');
const onlyDone = document.querySelector('.onlydone-btn');
const allBtn = document.querySelector('.all-btn');

onlyTodo.addEventListener('click', async () => {
  ulEl.innerHTML = '';
  let getData = await getServerTodos();
  let filterTodoData = getData.filter((el) => el.done == false);
  getTodos(filterTodoData);
});

onlyDone.addEventListener('click', async () => {
  ulEl.innerHTML = '';
  let getData = await getServerTodos();
  let filterDoneData = getData.filter((el) => el.done == true);
  getTodos(filterDoneData);
});

allBtn.addEventListener('click', async () => {
  ulEl.innerHTML = '';
  let getData = await getServerTodos();
  getTodos(getData);
});

• 세가지 상태인 '완료된 To-do, 진행중인 To-do, 모두'로 필터
  • 필터버튼이 클릭될 때마다 목록이 초기화됩니다. 그리고 서버의 값을 불러온 후, filter 메서드를 이용해 해당하는 값을 걸러냅니다. 그 후 정렬해주고 값이 없다면 안내문구를 표시하는 getTodos 함수를 호출하여 데이터들을 정제하여 화면에 표시해줍니다.

const loginformEl = document.querySelector(".form");
const inputEl = loginformEl.querySelector("input");
const usernameEl = document.querySelector(".username");
const signoutBtn = document.querySelector(".signoutbtn");
const HIDDEN = "hidden";
const USER = "windows95 todo-list username";

const userLocaldata = localStorage.getItem(USER);
if (userLocaldata) {
  printUsername(userLocaldata);
} else {
  loginformEl.classList.remove(HIDDEN);
}

//sign in(input user name)
loginformEl.addEventListener("submit", (e) => {
  e.preventDefault();

  const username = inputEl.value;
  localStorage.setItem(USER, username);

  loginformEl.classList.add(HIDDEN);
  printUsername(username);
});

//print user name
function printUsername(username) {
  usernameEl.innerText = `${username}!!!!!!!`;

  usernameEl.classList.remove(HIDDEN);
  signoutBtn.classList.remove(HIDDEN);
}

//sign out
signoutBtn.addEventListener("click", signout);

function signout() {
  localStorage.removeItem(USER);

  inputEl.value = "";
  loginformEl.classList.remove(HIDDEN);
  usernameEl.classList.add(HIDDEN);
  signoutBtn.classList.add(HIDDEN);
}

• 사용자가 로그인하고 로그아웃하는 것은 로컬스토리지 사용

🐾 알게된 것

이 전 과제인 영화 API를 활용한 영화 검색 사이트 만들기 때는 기본적으로 API 개념, API 사용, fetch, 동기와 비동기에 대한 이해가 단단히 잡혀있지 않아서 굉장히 혼란스러웠습니다. 이번엔 이 전 과제와 다른 강의를 통해 연습해봄으로써 API 를 그나마 자유자재로(?!) 사용해서 CRUD를 구현했습니다. 그 외에는 아래와 같습니다.

• CSS는 팝업과 모달의 차이, input checkbox, 문자별 폰트적용하는 법, border 스타일링하는 법
• JS는 비동기(promise 개념, async/await 개념, api 연동하는 법), 메서드 및 내장함수(setAttribute, map, padStart, find와 filter, 이벤트리스너, closest, 문자열 자르기), 모듈화, CRUD 구현, 로딩스피너 애니메이션
• Git 은 push 취소하는 법, 한 개의 로컬에서 여러 개의 원격저장소로 push 하는 법, 원격저장소 제거하는 법

위에서도 언급하였듯이 알게된 것에 대해 자세히 포스팅한 것이 있습니다.

• [JS] Vanilla JS로 To-do 사이트 만들 때, API 연동하기(fetch 방식)
• [JS] Vanilla JS로 To-do list 수정 구현하기
• [CSS] 한글만 다른 폰트 적용하기
• [CSS] input checkbox 스타일 적용하기

🐾 회고

이번 프로젝트를 통해 자바스크립트와 성큼 가까워졌다는 엄청난 수확이 있었기에, 개인적으로 정말 재밌었던 프로젝트였다. 이벤트 리스너로 동작할 때, 이벤트로 어떤 정보들이 담겨오는지 console을 하나하나 찍어가며 요리조리 살펴보며 작업했다. 모듈화를 처음 적용해보며, 기능들을 어떻게 나누는게 좋은지 고민할 수 있는 시간이 됐다. 블로그에 정리만 해뒀던 배열 메서드들을 직접 써볼 수 있었다. css를 잘 안다고 생각했는데도 모르는게 많았다. git 활용 부분도 알게된 것이 많다. git 달인이 되고 싶다ㅎㅎ

• 해결하고자 했던 점
  • 하나의 To-do 가 수정될 때, 해당 li 태그가 삭제되고 새로운 li 태그 내의 모든 것이 재생성된다. 수정된 부분만 삭제되고 생성되면 좋겠다고 생각했다. 이 부분을 해결하고자 삽질을 무지 많이 했지만 결국 실패했다.
  • 나중에 리액트를 배우고 나서야, 수정된 부분만 상태 업데이트되는 걸 하려고 했다는 걸 깨달았다. 리팩토링을 통해 시도해보고자 한다.
• 좋았거나 잘했다고 생각하는 점
  • 그룹스터디원들과 코드리뷰를 하며 한 기능에 대한 다양한 구현 방법을 공유했던 것이 재밌었다. 또 학원에 과제 제출하는 것에서 그치지 않고, 업데이트하려고 했던 점이 좋았다.
  • 모르는 것에 대한 참고자료를 기록해두며 작업하니, 나중에 다시 찾아볼 때도 빠르게 알 수 있어 좋았다.
  • 프로젝트에 애착을 갖고 디자인을 최대한 이쁘게 하려고 노력했다.
  • 복잡한 방법을 생각해서 시도했지만, 결국엔 간단한 방법으로 해결했던 과정이 재밌었다. 그리고 그 안에서 포기하지 않고 계속해서 해결하려고 했던 태도가 좋았다.
• 아쉬웠기에 다음에 시도해볼 점
  • 번들러를 제대로 이해하지 못하고 사용했다. 다음엔 공부하여 사용해보고 gitignore, .env도 추가해보고 싶다.