할 일 목록 만들기(+1일차)(잠정 진행 중...)

오늘은 완전히 죽 쒔다. 내가 어제 to do list 삭제 기능을 만드는 데에 참고 했던 자료들은 각각 jquery를 사용하지 않는 바닐라 자바스크립트와 react를 사용하여 페이지를 구성하는 코드들이었다. react는 현재로써는 미지의 영역이니 제쳐 놓고, jquery를 사용하지 않는 코드는 작성할 수 있을 것 같다. 다만 해당 글의 코드 구현 방식은 foreach를 통해 '리스트 배열'을 만드는 것이었고, 내가 사용한 것은 `` 내의 일련의 바디 코드를 선언한 변수를 append로 붙이는 방식이었으니 이러한 차이에서 어떻게 해당 글의 삭제 기능 구현 방식을 참고할 수 있을지 미지수이다. 

 

그저 어림짐작하기를, 내가 이전에 간단하게 리스트를 만든 것처럼 ``을 사용하지 않고 하나하나 변수 선언하고, 리스트 붙여넣고, 값 지정하고, 상호작용 붙여넣는 것이 사실 최선의 방식이 아니었나 하는 것이다. ``을 append 하는 방식으로는 `` 내의 내용에 추가적으로 자바스크립트를 적용하는 것이 매우 어려운 것 같다. 하지만 이제와서 리스트를 간단하게 만들 수도 없는 것이 간단한 리스트의 완료, 삭제 기능은 이미 간단하게나마 구현했다.

 

let temp_html = `

        <div class="card text-bg-light mb-3" style="max-width: 18rem;">

            <div class="card-header">${date}

                <button class="editbtn" id="deletebtn">삭제</button>

                <button class="editbtn" id="editbtn">수정</button>

                </div>

            <div class="card-body">

                <h5 class="card-title">${title}</h5>

                <p class="card-text">${content}</p>

            </div>

            <button id="complete">완료!</button>

        </div>`

본캠프가 얼마 안 남기도 했으니 내일은 약간 복잡하게 구성한 본래의 리스트의 ``내의 내용을 자바스크립트에서 풀어서 구현해보기로 했다. 그렇게 ``을 풀어내면 상호작용을 추가하기가 수월해질 것이라고 믿는다.