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

1. A Simple 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 값을 이용하는 것이 좋겠다.

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

  • 근데 이렇게 프론트 부분만 구현해서 잘 동작되는걸 보다보면 도대체 서버는 무슨 역할을 하고 언제 필요한지 궁금증이 또 생긴다.