[TIL] 05.12 개발일지

오늘은 웹개발 5주차 강의를 마무리하고, 이외의 추가기능을 구현해보고싶어서

ChatGPT와 구글 바드 등 여러가지 인공지능 챗봇의 도움을 받아 팬명록 삭제 기능을 구현하였다.

이렇게 팬명록을 남길때, 자기만의 고유 비밀번호를 입력할 수 있도록 칸을 만들었고

댓글삭제 버튼을 눌렀을때 비밀번호를 입력하게 해서 올바른 비밀번호를 입력하게하고싶었다.

 

 

<JS CODE>

     function show_comment() {

        fetch('/guestbook').then((res) => res.json()).then((data) => {

            let rows = data['result']

            $("#comment-list").empty()

            rows.forEach((a) => {

              let name = a['name']

              let comment = a['comment']

              let temp_html = `<div class="card">

                            <div class="card-body">

                                <blockquote class="blockquote mb-0">

                                    <p>${comment}</p>

                                    <footer class="blockquote-footer">${name}</footer>

                                </blockquote>

                                <button type="button" class="btn btn-danger" data-id="123" id="comment-delete" >댓글 삭제</button>

                            </div>

                        </div>`

              $("#comment-list").append(temp_html)

            })

          })

      }

      function deleteComment() {

        var commentId = $(this).data("id");

        var password = prompt("비밀번호를 입력하세요: ", {

          type: "password"

        });

       

     

        if (password == "") {

          alert("비밀번호를 입력하세요!");

          return;

        }

     

        $.ajax({

          url: "/guestbook/delete/" + commentId,

          type: "POST",

          data: { password: password },

          success: function(data) {

            if (data.success) {

              alert(data['msg']);

              window.location.reload();

            } else {

              alert(data['result']);

            }

          }

        });

      }

     

      $(document).on("click", "#comment-delete", deleteComment);

     

<app.py>

@app.route("/guestbook/delete/<int:comment_id>", methods=["POST"])

def delete_comment(comment_id):

    password = request.form["password"]

    comment = db.fan.find_one({"_id": comment_id})

    if comment and comment["password"] == password:

        db.fan.delete_one({"_id": comment_id})

        return jsonify({"msg": "댓글이 삭제되었습니다!"})

    else:

        return jsonify({"result": "비밀번호가 틀렸습니다!"})

   

삭제 API 구현을 위와 같이 했지만,

 

서버에서 commentId를 받을수 없다는 에러가 떳다.

삭제버튼을 했을때 $(this).data("id")부분을 제대로 받지 못했을거라 생각 했고,

 

처음 $("#comment-delete")로 작성한 부분을

$(document).on("click", "#comment-delete", deleteComment);로 바꾸니 해결되었다.

이런 오류는 해결했지만 DB에 저장된 댓글이 삭제되지 않는 문제가 생겼다,.,.,.,,.,.,.,.,.,.,.,.,