2023.03.19 TIL - 토이 프로젝트[TO-DO LIST]

[Problem]

항해 99 파트타임 1기 OT주차를 들어가기 전에 하는 마지막 사전 스터디. 이번 토이 프로젝트는 전에 했던 방명록을 남기는 프로젝트와 비슷한 TO-DO LIST 프로젝트였다. 기존의 프로젝트와 동일하게 저장하고 불러오는 형식은 동일했다. 추가로 지우는 부분과 수정하는 부분을 추가했다. 머리로 생각할 때는 불러온 부분에 수정과 삭제 버튼을 달아주는 형식으로 생각했다. 그러나 아이디어에 비해 부족한 실력으로 인해 구현하기가 쉽지 않았다.

 

[Try]

처음에 시도한 부분은 스크립트부분이나 파이썬을 수정하는 것을 시도했다. 파이썬은 그저 데이터를 받고 뿌려주는 형태만을 갖고 있었다. 따라서 스크립트부분을 수정해야 한다는 것을 깨달았다. 추가적으로 body부분에 post부분도 일부 수정해야 한다는 것을 알게 되었다.

 

[Solution]

스크립트 수정부분

@ POST 부분 

function show_todolist() {
            fetch('/todolist').then((res) => res.json()).then((data) => {
                let rows = JSON.parse(data['result'])
                $('#todo-list').empty()
                rows.forEach((a) => {
                    let id = a['_id']['$oid'];
                    let day = a['day']
                    let todo = a['todo']

                    let temp_html = `<div class="card">
                                        <div class="card-body">
                                            <blockquote class="blockquote mb-0">
                                                <p id = 'todo' contentEditable = 'false'>${todo}</p>
                                                <footer id = 'day' contentEditable = 'false' class="blockquote-footer">${day}</footer>
                                                <button onclick="update_todolist('${id}')" type="button" id="update-btn" class="btn btn-dark">수정</button>
                                            <button onclick="delete_todolist('${id}')" type="button" class="btn btn-dark">삭제</button>
                                            </blockquote>
                                        </div>
                                    </div>`
                    $('#todo-list').append(temp_html)
                })
            })
        }

 

@update

function update_todolist(id) {
            let text = document.querySelector('#update-btn');
            let day = document.querySelector('#day');
            let todo = document.querySelector('#todo');


            if (text.textContent == "수정") {
                text.textContent = "저장";
                day.contentEditable = true;
                todo.contentEditable = true;


            } else {
                text.textContent = '수정';
                day.contentEditable = false;
                todo.contentEditable = false;

                let update_id = id;
                let update_day = document.querySelector('#day').textContent
                let update_todo = document.querySelector('#todo').textContent

                let formData = new FormData();

                formData.append('update_id', id);
                formData.append('update_day', update_day);
                formData.append('update_todo', update_todo);

                fetch('/todolist', { method: 'UPDATE', body: formData }).then((res) => res.json()).then((data) => {
                    alert(data['msg'])
                    window.location.reload();

                })
            }
        }

 

@삭제 부분

function delete_todolist(id) {
            let delete_id = id;
            let formData = new FormData();
            formData.append('delete_id', delete_id);

            fetch(`/todolist`, { method: 'DELETE', body: formData }).then((res) => res.json()).then((data) => {
                alert(data['msg'])
                window.location.reload();
            })
        }

<div class="card">
<div class="card-body">
    <blockquote class="blockquote mb-0">
        <p id = 'todo' contentEditable = 'false'>${todo}</p>
        <footer id = 'day' contentEditable = 'false' class="blockquote-footer">${day}</footer>
        <button onclick="update_todolist('${id}')" type="button" id="update-btn" class="btn btn-dark">수정</button>
    <button onclick="delete_todolist('${id}')" type="button" class="btn btn-dark">삭제</button>
    </blockquote>
</div>
</div>

특히 위에 부분이 꾸미는 방법을 잘 몰랐기에 많은 고민을 했고 특히 팀원들의 도움을 많이 받았다.

 

[Conclusion]

 좋은 아이디를 가지고 있지만 구현하는 방식을 모른다면 결과물을 도출하지 못한다는 것을 깨달았다. 따라서 지금 가지고 있는 스킬로는 좋은 아이디어를 구현하기 어렵다고 판단되었다. 수동적으로 알아가는 형태가 아닌 능동적으로 다양한 스킬을 습득하기 위해 많은 노력이 필요하다 생각된다.

- 마지막 토이 프로젝트 -