미니 팀과제 기술 공유 ( 3번 subC(post) 데이터 삭제)

1번 : https://seed0335.tistory.com/10

2번 : https://seed0335.tistory.com/13

 

흐름도 참고 : 전체 흐름도에서 sub 붙은 내용이 게시글 등록 삭제와 관련된 부분입니다.

1. subA : 사용자가 입력한 관람 후기를 등록됩니다.

2. subB : 사용자가 출력한 데이터를 기록합니다. 이 과정에서 삭제 버튼도 함께 작성됩니다. 

3. subC : 사용자가 삭제 버튼을 누르면 DB에서 데이터가 삭제됩니다.  

 

3. subC : 

2번 내용에서 만든 버튼을 클릭하면 매개변수 del 함수가 동작하면서 ('${id}' + ${comment}') 값이 매개변수로 들어가게 됩니다. 

sub.html 내용

  let temp_html = `<tr>
                                    <td>${id}</td> 
                                    <td> ${comment} </td>
                                    <td> <button onclick ="del('${id}'+'${comment}')" class="btn btn-outline-dark">삭제</button></td>
                                    </tr>`
                    $('#subB2').append(temp_html)

 

아래 del(a) 함수 a로 위에 ('${id}' + ${comment}')이 전달되고, 이 전달된 값이 app.py로 으로 보내지게 됩니다. 

sub.html script 내용

        // 데이터 삭제 기능
        function del(a) {
            let formData = new FormData()
            let id = a
            formData.append("id_del", id)

            fetch("/subC1", { method: "post", body: formData }).then(res => res.json()).then(data => {
                alert(data['del'])
                window.location.reload()
            })
        }

 

그러면 app.py에서 post 방식으로 데이터를 받아서, DB에 있는 sum에 데이터를 삭제하게 됩니다. 

 

여기서 기술적 의문이 들수 있는데, 

sum 데이터를 굳이 만들어서 지우는 이유입니다. 

해당 방법이 완벽한 방법은 아니지만, 

예를 들어 id나 comment 값만으로 삭제할 경우, 동일 값이 db에 먼저 저장된 순서대로, 삭제되는 문제가 있습니다.  

 

예) ID로 삭제하게 되면 삭제는 되지만, 내가 원하는 값이 아닌 DB에 기록된 순서로 삭제됩니다. 

[111] 코멘트 버튼을 눌러서 [111] 삭제하고 싶지만, [333] 코멘트 들어있는 부분이 삭제 될 수도 있다는 것입니다. 

 

반대 경우도 마찬가지 입니다. 그래서, 둘다 동일한 같으면 같은 데이터니까, 순서 상관없이 지워져도 괜찮다고 생각해서

생성 후 삭제하는 방식을 택한 것입니다. (이 방법이 완전하지 않은 이유는 글을 썼을 떄 같은 값이지만, 위치가 다르다는 문제를 해결하지 못했기 때문입니다. )  

 

id1 111

id1 333

id1 222

#삭제기능
@app.route("/subC1", methods=["post"])
def subC1():
    id_receive = request.form['id_del']
    db.vision5_comment1.delete_one({'sum':id_receive})
    return jsonify({'del': '삭제 성공'})