[23.01.11]

Delete 코드에 대해서 알아보겠다.

 

pymongo 에서 사용하는 코드다.

 

db.users.delete_one({'name':'bobby'})

users 에 있는 'bobby' 라는 'name'을 가진 데이터를 삭제하는 코드다.

 

이걸 활용하여 

 

5주차 마지막 버킷리스트에 활용해보겠다.

 

 

해당 화면처럼 첫번째 버킷 리스트에있는 삭제하기 버튼을 누르면, 해당 버킷리스트가 데이터도 삭제되고 화면에서도 

 

지워지는 형식으로 만들어보겠다.

 

@app.route("/bucket/delete", methods=["POST"])
def bucket_delete():
    number_receive = request.form['number_give']
    db.bucket.delete_one({'num': int(number_receive)})
    return jsonify({ 'msg' : '삭제 완료!'})

 

이와 같은 코드로 서버를 만들어주었다.

 

POST 형식의 delete 창구를 만들어주었다.

 

index에서 number_give 로 가져와서 number_receive 지정해주고

 

int(number_receive) 코드로 해당 번째의 숫자를 가져온다. 

 

그 가져온 숫자를 가지고 있는 데이터를 삭제하는거고

 

삭제가 완료되면 msg -> 삭제 완료! alert가 뜨게끔 했다.

 

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>
                </li>`
} else {
    temp_html = `<li>
                    <h2 class="done">✅ ${bucket}</h2>
                    <button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제하기</button>
                </li>`
}

$('#bucket-list').append(temp_html)

index.html로 넘어와서

 

`<li>
                <h2 class="done">✅ ${bucket}</h2>
                <button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제하기</button>
            </li>`

 

해당 부분을 넣어주었다,

 

자세하게 보자면

 

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

 

이 버튼을 넣어준것이다.

 

원래는 삭제 버튼이 없었다.

 

i 번째의 num에  delete_bucket() function을 구현하도록 버튼을 만들어준것이다. 

 

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

 

해당 function 을 맨 밑에 만들어주었다.

 

ajax 콜을 해주는거다.

 

post 형식에 bucket/delete 창구에 데이터를 전달할거고

 

전할 데이터는 num -> number_give 형식으로 전달한다.

 

성공하면 msg를 띄우고

 

윈도우를 새로고침 하게 만드는 코드를 넣었다.

 

 

자이제 로컬파일로 가서 확인해보자

 

삭제하기 누르니 삭제 완료! 라는 알림이 떴다.

 

 

 

 

말끔히 지워진것을 볼 수 있다.

 

 

mongoDB에서도 삭제된것을 확인했다.

 

이 작업을 하면서 한 2시간정도 잡아먹은 것 같다.

 

제일 처음 버벅거린건 

 

num_receive 와 number_receive를 num_receive로 통일해서 쓰다보니 내가 쓰면서도 많은 혼선이 있었다.

 

db.bucket.delete_one({'num': int(number_receive)})

 

그리고 여기 int(number_receive) 부분에 int를 넣어주지 않아서 계속 오류가 떴었다.

 

계속 왜 이런 문제가 생기지 했을때 우선

 

뼈대부터 확실하게 살펴보았다.

 

뼈대를 다 맞추어 보니

 

알림은 정상적으로 떴다.

 

근데 데이터가 지워지지 않았다.

 

그래서 기술 매니저님께 질문을 해서 같이 코드를 공유하고 하나씩 살펴보다가 겨우 찾은 문제였다.

 

많은것을 배웠고 하나하나 코드 하나하나 더 살펴보는 습관을 길러야겠다.