1. Vanila JS를 이용한 기본 Todo list 구현
  2. MVC 패턴으로 구현
  3. #1 기본 세팅(의존성) 설명
  4. #2 처음 initializing 되는 과정
  5. #3 list item 추가
  6. #4 삭제
  7. #5 status / 등등 / 이후의 es6, react 비교

React 라이브러리를 사용한 토이 프로젝트를 몇번 시도했었지만 JavaScript의 문법과 객체 지향 프로그래밍, MVC 패턴 등의 내용들을 제대로 알고 있지 못했어서 일정 수준 이상으로 구현을 할 수도 없었고 이해가 안가는 부분도 많았다. 다시 순수 JS만을 이용하여 Todolist를 만들어봄으로써 MVC 패턴은 무엇인지, JS의 prototype은 어떻게 사용되고 있는지 공부해 보았다.

이전에 만들었던 것과 MVC 패턴을 이용하여 다시 만들어본 Todo list는 둘다 Vanila JS 만을 이용하여 구현했다. 같은 기능(ex. 리스트의 삭제) 을 하는 데도 코드가 많이 달라서 ㅎㅎ 이렇게 하면 간편하고 함수별로 기능이 분리되어서 활용하기 편하구나를 느꼈다.

  • 근데 이렇게 프론트 부분만 구현해서 잘 동작되는걸 보다보면 도대체 서버는 무슨 역할을 하고 언제 필요한지 궁금증이 또 생긴다.
    이 궁금증은 일단 잠시 넣어두고 JS가 앞에서 어떤 역할을 하고 있는지 살펴보자.

첫번째 Todo List

처음으로 만들었던 Todolist에는 리스트 추가, 삭제, Importance 색추가 기능을 구현했다. 먼저 클릭 버튼, list 입력 버튼, list 클릭 버튼 모두 이벤트 리스너와 handler를 붙여서 이벤트를 처리하게 만들었다.

  • 아래 createListitem 함수는 입력 form 에서 받은 입력 값을 todoText, importaceColor로 받고 해당 list를 만드는 역할을 한다.
  • 해당 값들을 받고 document.createElement를 이용하여 li, div 엘리먼트들을 만들고 리스트 내부에 위치하게 될 삭제 버튼에도 addEvent 함수를 이용하여 click event listener를 붙여 주었다.
const createListitem = (todoText, importanceColor) => {
    // DOM 객체 만들기
    const listItem = document.createElement('li');
    listItem.classList.add('list__info');

    const listContent = document.createElement('div');
    listContent.classList.add('list__content');

    const removeBtn = document.createElement('div');
    removeBtn.classList.add('list__remove');
    const x = document.createTextNode("X");
    removeBtn.appendChild(x);

    const textNode = document.createTextNode(todoText);

    const importance = document.createElement('div');
    importance.classList.add('list__importance');
    importance.style.backgroundColor = importanceColor;

    listItem.appendChild(importance);
    listContent.appendChild(textNode);
    listItem.appendChild(listContent);
    listItem.appendChild(removeBtn);

    unlist.appendChild(listItem);
    addEvents(listContent,removeBtn); // 만든 리스트에 이벤트 추가

}

이 후 리스트의 삭제 버튼에 click event가 불러 질 때 리스트가 삭제된다.

개선하면 좋을 부분 : 리스트의 id 값 넣어서 해당 id로 수정, 삭제 하자.

  • list를 삭제할 때도 삭제 버튼에 클릭 이벤트를 붙여 removeItem 핸들러가 이를 처리했는데 event.target을 잡고 해당 타겟의 부모 노드 list, list 부모노드의 ul 을 각각 변수로 지정해준 후 ul에서 li를 삭제했다.
  • 부모, 부모의 부모 노드까지 값을 받아오지 않아도 리스트의 id 값만 있으면 바로 document.querySelector로 해당 리스트 가져올 수 있다.
  • 여기서는 버튼의 parent, parent.parent만 찾아도 리스트 DOM을 가져올 수 있지만, 다른 경우에는 엄청나게 많은 parent가 있을 수 있으니 id 값을 이용하는 것이 좋겠다.