내가 아는 맛집 알려줄게! - 4일차

문제 - 1

맛집 리스트 지우기

 - 맛집 리스트에 삭제 기능을 더하여 삭제가 가능하도록 구현하였다. 하지만, 삭제 시 남은 맛집 리스트의 정렬이 원활하게 이루어지지 않았고, 맛집 데이터가 잘못 읽혀 들어오거나 배열이 안맞는 경우가 발생

 

원인

- 팀원들과 의견을 나누어도 해결되지 않아 React기술매니저님께 여쭤보니, 해당 되는 원인은 데이터 삭제는 잘 이루어 졌다. 하지만, 해당 데이터를 담고있는 컨테이너까지 지워지지 않아 이러한 원인이 발생한 것 이라고 말씀해주셨다.

우리가 구현하려는 기술은 페이지를 새로고침 하지않고 부분 새로고침을 원했던 상태였고, 현재의 상태에서는 어렵다고 말씀해주셨다. 

 

해결

- 원인은 알았지만, 해당 컨테이너까지는 어려운 상태라서 해결하지는 못했지만, 원인을 파악한 것만으로도 만족!!

(어려운 기술이라고 설명해주셨지만, 해결하고 싶은 욕구는 왜 때문이죠..? (이미 다른 방법으로 또 시도해보고 있던 팀원들과 나..))

 

 

문제 - 2

내일 있을 입학 시험에 대비해 문제를 풀어보자!

시험 문제 - '웹종반'에서 실습했던 '버킷리스트'에서 버킷 완료된 목록에, 취소 버튼을 만들고 취소 버튼을 누르면 버킷 완료 전 상태로 복구 시켜라!

 

해결

temp_html = `<li>
                <h2 class="done">✅ ${bucket}</h2>
                <button onclick="cancel_bucket(${num}) "type="button" class="btn btn-outline-danger">취소</button>
            </li>`

기존에는 없던 '취소' 버튼을 만들어 주고, 버튼을 눌렀을 때 기능을 추가할 수 있는 친구를 만들어주고

if (done == 0) {
    temp_html = `<li>
                    <h2>✅ ${bucket}</h2>
                    <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                </li>`
} else {}

위치해 있던 if (...) {} .... else {} 구문에 위치를 시켜준 뒤

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

버튼을 눌렀을 때 값을 받아 행동할 수 있는 ajax 친구를 html에 만들어 주면 클라이언트 작업 완료! 이제 서버로 넘어가면~

@app.route("/bucket/cancel", methods=["POST"])
def bucket_cancel():
    num_receive = request.form['num_give']
    db.bucket_3.update_one({'num': int(num_receive)}, {'$set': {'done': 0}}) <--key
    return jsonify({'msg': '취소완료!!'})

전달 받은 num_give 값을 받아 다시 나의 db에서 수정을 하는데! 이때, db에 저장 되어 있는 값을 바꿔주고

다시 jsonify로 msg를 보내주면 완료!

 

이로써 클라이언트와 서버 간의 통신 흐름을 보다 더 이해할 수 있었고, updata의 기능을 체득해 봄으로써 지식 줍줍!!