5주차 CRUD 구현

어제 매니저님으로부터 5주차에 만드는 버킷리스트에 CRUD 기능을 구현하라는 숙제를 받았다.
기본적으로 Create, Read, Update 기능은 있었기 때문에 Delete만 구현하면 되었다.

먼저 app.py에 pymongo 코드를 추가하고,

@app.route("/bucket/remove", methods=["POST"])
def bucket_remove():
    num_receive = request.form['num_give']
    db.bucket.delete_one({'num': int(num_receive)})
    return jsonify({'msg': '버킷 삭제 완료!'})

index.html에 삭제 버튼과 함수를 추가하였다.

<button onclick="remove_bucket(${num})" type="button" class="btn btn-outline-primary">삭제</button>

function remove_bucket(num) {
            $.ajax({
                type: "POST",
                url: "/bucket/remove",
                data: {num_give: num},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

큰 작업이 아니었기에 무난히 끝난 줄 알았는데 삭제 버튼을 아무리 눌러도 먹통인 것이다.
페이지에서 검사로 console을 확인하니 뭔가 에러가 자꾸 뜨는데 무엇인지 이해가 되지 않았다.

그렇게 파일들을 하나하나 뜯어보다 index에서 무언가 발견했다.

function show_bucket() {
            $.ajax({
                type: "GET",
                url: "/bucket",
                data: {},
                success: function (response) {
                    let rows = response['buckets']
                    for (let i = 0; i < rows.length; i++) {
                        let bucket = rows[i]['bucket']
                        let num = rows[i]['num']
                        let done = rows[i]['done']
                        let remove - remove[i]['done']

                        let temp_html =``
                        if (done == 0) {
                            temp_html = `    <li>
                                                <h2>✅ ${bucket}</h2>
                                                <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                                <button onclick="remove_bucket(${num})" type="button" class="btn btn-outline-primary">삭제</button>
                                            </li>`
                        }else {
                            temp_html = `<li>
                                            <h2 class="done">✅ ${bucket}</h2>
                                            <button onclick="remove_bucket(${num})" type="button" class="btn btn-outline-primary">삭제</button>
                                        </li>`
                        }
                        $('#bucket-list').append(temp_html)
                    }
                }
            });
        }

미래의 나는 바로 찾을 수 있을까? 그러면 좋겠다.
아무 생각 없이 새로 넣었다고 let remove를 넣은 것이었다.
당연히 저거 한 줄 지우니 멀쩡히 돌아갔다.

별 것 아닐지 몰라도 중요한 교훈을 얻었다.

뭔가 추가할 때는 신중하게 하자.