22/12/16_3차과제 회고

🎄 API 활용 todolist 만들기

🔗 배포 링크

• https://classy-sopapillas-368c17.netlify.app/

📅 과제기간

• 이번에는 commit을 제대로 하지도 않았고,, 웹팩/타입스크립트 도전하다가 지우고 다시하고 해서 정확한 기간도 기록하기 애매하네요..ㅎ

🔨 사용 기술

• HTML/CSS, 부트스트랩
• 바닐라 자바스크립트
• 웹팩

📃 설명

• todolist만들기 과제였는데 크리스마스 이모지를 쓰고싶어서 wishlist 컨셉으로 만들어 보았습니다.
• 첫 화면에 기존 목록이 출력되고 유저가 새롭게 목록을 추가/삭제/수정할 수 있으며, 체크여부에 따라 분류해서 출력할 수 있는 기능과 체크된 항목을 한번에 삭제할 수 있는 기능을 구현했습니다.

✍ 아쉬운 점 / 어려웠던 부분

• 2차과제에서 웹팩 사용을 추천받아 도전하였는데,, 초기설정에 어려움이 있었습니다. 그래서 부트스트랩은 결국 CDN방식으로 사용하였는데.. 이렇게 해도 괜찮을지 CSS 플러그인을 사용해서 하는것이 좋은지 어떤 차이점이 있는건지 궁금합니다.
• 일단 되는대로 기능을 구현하고보니 코드가 너무 길어지고 가독성이 떨어지는거 같아서 많이 아쉽습니다..

멘토님/코드리뷰 조원분들의 답변

• CDN 방식은 실제 프로덕트에선 사용이 잘 되지 않습니다.
  그 이유는 여러가지 있겠으나, CDN 방식은 트리쉐이킹이 잘 되지 않습니다.
  또한 저희 네트워크와는 무관하게 CDN의 네트워크에 문제가 있을때 저희 프로젝트에 영향을 줄 수 있습니다.(외부 네트워크에 취약)
• 아래 반복되는 부분 리팩토링 과정을 보여주셨습니다.
• 코드가 길어지는 부분은 진입점에서 추가되어있는 목록을 불러오고 그 목록과 함께 수정/삭제 버튼 생성과 이벤트 리스너를 함께 작성하면서 createElement/append를 반복하다보니 구조가 명확히 보이지 않는 점이 조금 아쉽다고 생각했었는데, 조원분께서 이벤트 위임에 대해 말씀해주셨습니다.

🏁 주요 코드리뷰

• 반복되는 부분 리팩토링

// 기존
export function handleSortBy(e) {
  if (sortBy.value === '') {
    todoList.querySelectorAll('li').forEach((e) => {
      e.style.display = 'flex';
    });
    return;
  } else if (sortBy.value === 'true') {
    todoList.querySelectorAll('li').forEach((e) => {
      if (!e.classList.contains('done')) {
        e.style.display = 'none';
      } else {
        e.style.display = 'flex';
      }
    });
  } else {
    todoList.querySelectorAll('li').forEach((e) => {
      if (e.classList.contains('done')) {
        e.style.display = 'none';
      } else {
        e.style.display = 'flex';
      }
    });
  }
}

const todoFilter = (callback) => todoList.querySelectorAll("li").forEach(callback);
const hideTodo = (todo) => (todo.style.display = "none");
const showTodo = (todo) => (todo.style.display = "flex");

export function handleSortBy(e) {
  if (sortBy.value === "") {
    return todoFilter((e) => showTodo(e));
  }
  if (sortBy.value === "true") {
    return todoFilter((e) => {
      if (!e.classList.contains("done")) return hideTodo(e);
      else showTodo(e);
    });
  }
  return todoFilter((e) => {
    if (e.classList.contains("done")) return hideTodo(e);
    else showTodo(e);
  });
}

• 목록 수정기능 관련
  목록 수정버튼을 누른 후 submit 하기 전 다른 목록의 수정버튼을 클릭하면 초기값을 input value로 받아오지 못하고 submit 해도 변경사항을 수정하지 못하는 오류가 발생합니다.

👩‍💻 리팩토링 주요 계획

• 목록 수정기능 오류를 해결
• renderTodoList.js 파일에 rendering하는 부분을 이벤트 위임을 활용해서 리팩토링할 예정입니다!