DB - 삭제하기

이한결·2023년 1월 13일

Flask 몽고DB 부트 캠프 삭제하기 스파르타 코딩 여정 5일차 항해99

부트 캠프

목록 보기

11/98

1월 13일 여정 5일차이다.
입학 시험을 치렀다. 내가 열심히 공부를 한 것인지 아니면 난이도가 쉬웠던 것인지는 모르겠지만, 예상과는 다르게 잘 풀어낸 느낌이다.

입학 시험 준비 중에 어려웠던 부분에 대하여 정리하고자 한다. 기능은 간단히 이러하다.

프론트에서 영화 이름과 별점 그리고 영화 홈페이지 주소입력 값을 받는다. BeautifulSoup을 사용하여 어떤 영화를 스크럽해오면 DB에 그 정보를 저장하고 프론트에서는 사용자에게 meta 이미지와 이름, 평점을 함께 보여주게 된다.

오늘의 Today I Learned

Problem

문제는 보여주는 것은 문제가 되지 않았다. 특정 포스트한 영화를 삭제하려고 할 때 문제였다. 막상 기능을 구현하려고 하니 머리 속이 복잡해졌다.

try

일단 나는 자바스크립트로 접근을 하였다. 삭제버튼을 눌렀을때 parentNode를 타고 올라가 영화를 제목만 불러오려고 시도하였다. 제목을 일종의 ID로 사용하려 했다. 그러나 실패하였다. 왜냐하면 기본적으로 짜여있는 코드가 제이쿼리였고, 그리고 그렇게 접근하기에는 너무 복잡해졌다.

solve

내가 배운 것을 가만히 생각해보았다. 이미 나는 웹개발 5주차 때 버킷리스트에서 삭제하는 법을 배웠었다.

백앤드

@app.route("/movie", methods=["POST"])
def movie_post():

count = len(movie_list) + 1

 doc ={
        'title': title,
        'image': image,
        'desc': desc,
        'star': star_receive,
        'comment':comment_receive,
        'num':count
    }

일단 서버 쪽에서 영화를 저장 할 때, 영화 정보에 count라는 숫자를 같이 넣었다. 이것은 나중에 내가 어떤것을 삭제할지 구별하기 위해서이다.

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

위 코드 역시 서버쪽이다. 어떤 정보를 갱신 혹은 업데이트 하기에 POST로 선택하였다. 그리고 프론트에서 num_receive로 값을 받았다. 그것으로 delete_one이라는 것으로 num값만 찾아서 Flask로 DB 데이터 삭제하기를 실행하였다.

프론트

 for(let i = 0; i < rows.length; i++){
let num = rows[i]['num']


let temp_html = ` <button onclick="removeMovie(${num})">삭제하기</button>
                                                </div>
                                            </div>
                                        </div>`

                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }

프론트에서는 버튼에 onclick으로 removeMovie(${num}) 함수에 인자값으로 num을 넘겨주었다. 이 temp_html을 cards-box에 append 하였다.

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

        }

프론트 removeMovie(num) 함수에서 받은 num 값을 그대로 POST로 백엔드에 data에 실어서 넘기고 있다.

최종적으로 그럼 원하는 것이 삭제가 완료된다.

knew

특정한 무엇인가를 삭제하려 할때 보통은 값에 ID를 많이 붙인다. 자바스크립트를 배울 때도 그래왔고, 리엑트를 배울때 역시나 그랬다. 내가 접근하려 했던 parentNode는 어떻게 보면 내가 접근부터 잘못하고 있다는 것을 알려주고 있다. 항상 배운데로 접근하는 노력이 필요한 것 같다.