문제 - 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의 기능을 체득해 봄으로써 지식 줍줍!!
'ssung_항해일지 > 항해99_OT주차_토이프로젝트' 카테고리의 다른 글
내가 아는 맛집 알려줄게! - 5일차 (0) | 2023.01.13 |
---|---|
내가 아는 맛집 알려줄게! - 3일차 (0) | 2023.01.12 |
내가 아는 맛집 알려줄게! - 2일차 (1) | 2023.01.11 |
내가 아는 맛집 알려줄게! - 1일차 (0) | 2023.01.10 |