[Javascript] Momentum 만들기 - 리팩토링 todo 만들기

지난번 작업을 통해 사용자가 날짜와 해당 날짜에 진행할 todo를 저장하고, 화면에 띄우는 기능을 구현하였다.

앞으로 구현할 오늘 진행해야 하는 todo(today)와, 앞으로 진행 예정인 todo(upcoming), 완료된 todo(time machine) 기능을 구현하기 위해서는 먼저 지금 작성한 todo list에 해당하는 코드를 수정해야 할 필요가 있다.

 

왜냐하면 today와 upcoming, time machine이 서로 공유하는 부분이 존재하기 때문이다.

1. 각 todo에 해당하는 배열을 읽어서 li 태그로 표현

function paintTodayTodo() {
	...
    span.innerText = todayTodo   
    ...
}

function paintUpcomingTodo() {
	...
    span.innerText = upcomingTodo   
    ...
}

function paintTimeMachineTodo() {
	...
    span.innerText = timeMachineTodo   
    ...
}

 

- 현재 작성한 방식으로는 위와 같이 태그의 텍스트만 다른 함수를 3개를 만들어야 하기 때문에 비효율적이다. 물론 예시이기 때문에 실제 코드에서는 조금 더 다른 부분이 존재할 것이다. 그렇다 하더라도 공통적인 기능을 하는 함수를 이름만 바꿔서 3개를 작성하는 것은 굉장히 불편해보인다.

 

2. todo 추가/삭제 버튼 기능

- 이 경우도, 추가/삭제하는 todo를 저장하는 배열과 localStorage에 저장하는 key값이 다르지 결국 동작하는 코드는 똑같다. 이 부분도 공통 기능으로 처리해주면 보다 깔끔할 것 같다.

 

원래는 3번으로 today-upcoming-time machine 간 todo를 이동하는 부분도 작성하려고 했는데, 생각해보니까 추가/삭제 기능을 잘 함수로 분리할 경우, 활용하여 구현할 수 있을 것 같아서 배제하였다.

---

우선, 오늘 작업에서는 li 태그를 작성하는 함수를 따로 분리하였다.

function createLiComponent(task, moveType, deleteHandler, moveHandler) {
    const li = document.createElement('li')
    const span = document.createElement('span')
    const delBtn = document.createElement('button')
    const moveBtn = document.createElement('button')

    span.innerText = task

    delBtn.innerText = 'del'
    delBtn.addEventListener('click', deleteHandler)

    moveBtn.innerText = moveType
    moveBtn.addEventListener('click', moveHandler)
    
    li.appendChild(span)
    li.appendChild(delBtn)
    li.appendChild(moveBtn)

    return li
}

 

- 총 4가지 변수를 받는다.

    - task : 사용자가 입력한 todo 이름이다. span 태그에 innerText로 들어간다.

    - moveType : 변수명이 애매한데, 각 todo들은 삭제 버튼과 추가적인 버튼을 갖고 있다. todayTodo는 완료 버튼으로, timeMachineTodo는 되돌리기 버튼으로 동작할 예정이다. 해당 버튼의 이름을 지정하기 위한 변수이다.

    - deleteHandler, moveHandler : 각 버튼에서 이벤트를 받아 처리할 함수를 지정하기 위한 변수이다. 이 부분에 들어가는 함수를 잘 분리하는 것이 앞서 설명한 2의 작업이 될 것이다.

- 이 코드에서는 입력받은 변수를 통해 todo를 그릴 li태그를 반환한다.

- 화면에 렌더링하는 함수에서 각 todo에 해당하는 배열에서 받아와, 이 함수를 호출하여 li 태그를 생성할 수 있다.

- vanilla js이지만, 리액트에서 컴포넌트를 구성하는 것과 같은 방식으로 생각해서 작성해보았다.

---

아직 upcoming과 time machine 부분을 구현하지 않았기 때문에 정확히 동작한다고 할 수는 없지만 일단, 현재까지 작업된 상태에서는 이전 버전과 동일하게 동작한다. 앞으로 앞서 언급한 2번을 구현하면서 조금씩 더 살을 붙여 나갈 예정이다.

 

여담으로, 기말 및 기술과제 등으로 정신이 없어서 잠시 놓고 있었는데 다시 조금씩 작업을 해나가보려고 한다.