👩🏻‍💻 크롤링을 활용한 사이트 제작 - 3

1️⃣ 삭제 기능 구현

삭제 기능을 만들기 전까지는 단순히 url을 받아와 저장하고 받아온 url 정보를 카드 형태로 보여주는 것에 불과했다.
하지만, 필요 없는 데이터 혹은 잘못 가져온 데이터를 삭제할 수 있어야 했다.
→ 삭제 기능이 없다면... 불필요한 데이터가 계속 쌓이고 사용자도 원하지 않은 정보를 계속 봐야만 한다. (세상 불친절한 사이트가 되는 것 ㅜ)

데이터를 수정하는 코드를 작성해 봤기 때문에 이때 사용했던 코드들을 잘 활용해서 삭제 기능을 구현할 수 있었다.

1. 생성되는 카드에 고유 번호를 부여하자!
   원하는 카드를 삭제하기 위한 조건을 무엇으로 해야 할까 고민을 하다가 애초에 DB에 처음 저장을 할 때 카드에 고유한 번호를 생성하기로 했다.
   DB 삭제 조건으로 간단하게 고유 번호를 받아오면 쉽게 일치하는 데이터를 찾을 수 있고 또 삭제할 수 있다.

page_list = list(db.pages.find({}, {'_id': False}))
    count = len(page_list) + 1

    doc = {
        'url': url_receive,
        'title': title,
        'image': image,
        'desc': desc,
        'num': count
    }

→ 전체 DB 길이를 구해서 DB의 숫자에 + 1을 하는 식으로 생성된 카드에 고유한 번호를 부여한다.

<button onclick="delete_video(${num})" type="button" class="btn btn-outline-dark" style="margin-top: 10px">Delete</button>

→ temp_html에 삭제 버튼을 넣을 때 DB 저장 때 생성한 고유 번호를 해당 버튼에 부여한다.

2. 클라에서는 삭제 함수의 매개변수인 num을 그대로 가져와서 서버로 전달한다.

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

→ 매개변수로 받아 온 번호를 서버로 전달!

3. 서버는 클라에서 받아 온 번호를 조건으로 조건에 해당하는 카드 데이터를 삭제한다.

@app.route("/delete/page", methods=["POST"])
def delete_page():
    num_receive = request.form['num_give']

    db.pages.delete_one({'num': int(num_receive)})
// 클라에서 받아온 숫자 데이터는 서버에서 받을 때 문자로 인식하기 때문에 꼭 숫자 데이터 타입으로 변환이 필요하다!
// 에러가 생길 수 있는 부분!!

    return jsonify({'msg': '삭제 완료'})

⭐️ 주의할 점 ⭐️

: 클라에서 데이터를 받을 때 숫자 데이터의 경우 서버는 문자 데이터로 인식하여 받게 된다. 따라서, 조건에 문자가 아닌 숫자로 인식할 수 있도록 int()를 반드시 넣어야 한다!
→ 만약 삭제 버튼을 클릭해도 아무런 변화가 없다면 숫자 변환을 했는지, 먼저 생각해 보면 좋을 것 같다!