할 일 목록(To Do List) 만들기(2일차(잠정 완성))

오늘은 투두 리스트 추가 기능 구현과 다른 방식으로 코드 구성하기를 목표로 삼았다. 결론부터 말하자면 둘 다 성공하기는 했다. 간단한 구성의 리스트로 만들어야 하긴 했지만 말이다. 아래가 간단한 구성으로 완성한 To Do List 페이지이다. 

 

더블 클릭 해서 삭제라고 입력한 리스트를 지우고(아래 마지막 함수) 클릭으로 완료라고 입력한 리스트에 줄을 그은(아래 2번째 함수) 모습이다. 이 페이지는 간단하게 이렇게 구성했다. 어렵게 생각했던 것과 다르게 명령어를 이해하니 오히려 쉬웠다. 

const input = document.querySelector("#textinput")

const button = document.querySelector("#addbutton")

const listcard = document.querySelector("#listcard")

button.addEventListener('click', function () {

    let li = document.createElement('li');

    li.innerText = input.value;

    listcard.appendChild(li);

    input.value = '';

    li.addEventListener('click', function () {

        li.style.textDecoration = "line-through";

    })

    li.addEventListener('dblclick', function () {

        listcard.removeChild(li);

    })

})

 

이는 이전에 결심했듯 평소와 다른 방식으로 페이지를 구현한 것으로, 평소와 달리 제시된 가이드에 따라 구성한 코드를 js파일로 분리한 것이다. js파일과 css파일을 분리하는 것은 그냥 복사-붙여넣기하고 경로만 지정해주면 쉽게 되었다. 다만 이전에 코드 구성과 함께 js파일을 분리하려다가 실패한 것과 같이 수정하는 단계면 모를까 코드를 구성하는 단계에서 이렇듯 파일을 분리하는 것은 초보자 입장에서 쉽지 않은데다가 오히려 불편할 수 있으므로 파일 분리는 마지막 단계에서 하는 것이 좋겠다.

 

또 그때 염려하던 것 중 하나가 js파일에서 jquery를 사용하지 못하지 않을까 한 것이었는데, html 본문에 jquery를 지정해두니 js파일에서 사용한 jquery 형식이 정상적으로 작동하는 것을 확인할 수 있었다. 아래는 정상적으로 작동한 분리된 파일들이다. 

 

 

현재로써는 이렇듯 파일을 분리해두는 이점을 느끼기 힘들지만 추후에 코드가 길어지면 도움이 될테니 이렇게 미리 익혀둔 것을 써먹을 때가 올 것이다. 

---

 

다만 이러한 성공들을 앞세운 것도 무색하게, 본래 작성하던 페이지에 추가 기능을 구현하는 것만은 실패하고 말았다. 

 

 

기존 페이지에 버튼을 3개 추가했지만 모조리 작동하지 않는다. 패색을 느끼고 다른 사람이 작성한 완성도 높은 To Do List 페이지의 코드들을 살펴보니 리스트 삭제 기능을 구현하려면

 

리스트마다 id를 다르게 하고

=>id와 일치하는 리스트만 삭제하고

=>일치하지 않는 id를 가진 다른 리스트들을 재구성하여

=>리스트를 다시 띄운다고 한다. 

 

내가 이걸 제대로 이해한 건지는 모르겠는데, 일단 리스트마다 id를 다르게 하는 방법을 찾아보고 있다. for문으로 +1씩 더해지는 숫자 배열은 만들 수 있는데, 이걸 id에도 적용이 가능할지 의문스러운 부분이다. 그래도 아직 본캠프까지 4일은 남았으니 할 수 있는 데까지 해볼 작정이다.