CRUD 기능 중 U/D 기능 구현에 대한 학습
방명록 삭제, 수정 기능을 구현하기 위해 앞서 서버와 클라이언트에 각각 POST API 와 GET API를 입력하였다. 방명록 정보를 입력하면서
예상한 결과는 내가 방명록을 입력한 페이지에만 입력되는 것이었고,
출력된 결과는 모든 회원의 페이지에 입력되었다.
이를 해결하기 위해 조장님께 도움을 요청하였다. 이는 두가지 문제를 수정하면서 해결되었는데, 첫 번째로 각 API의 route 주소를 옳게 수정하였으며, 두 번째로는 방명록을 불러오는 comments_get() 함수에 member_id 라는 매개변수 값을 주어 해당 페이지에 해당하는 id값이 등록된 comment만 불러올 수 있도록 하였다.
@app.route("/comments/<member_id>", methods=["GET"])
def comments_get(member_id):
all_comment = list(db.comments.find({'member_id': member_id}))
for comment in all_comment:
# _id 필드의 ObjectId 값을 문자열로 변환하여 가져오기 !!!
comment['_id'] = str(comment['_id'])
return jsonify({'result': all_comment})방명록 삭제 기능을 구현하는 방법으로 두가지 방법이 제시되었다.
하나는 comment의 object_id 를 담아와 식별하는 것이고,
두 번째는 comment 각각에 고유 번호를 부여하고 이로 식별하는 방법이다.
처음에는 첫 번째 방법을 사용하려고 했는데 이유는 각 팀원의 페이지를 불러올 때 이미 멤버 id 값을 사용하고 있었기 때문에 이를 이용하면 편리할 것이라고 생각했기 때문이다.
하지만 comment_id 값을 불러오는 방법이 생각보다 어려웠다. 그 때문에 조장님이 해보시고 안되면 두번째 방법을 사용하기로 하였다.
그리고 조장님이 멋지게 성공하셨다.
클라이언트에서 comment_id 값을 data-로 직접 받아와 temp_html에 넣어 사용하였다. 또한 버튼의 부모와 data-comment_id 값을 선언하여 fetch 주소로 사용하였다.
<div class="card" data-commentID="${comment_id}">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p class="gstbuttons">
<button type="button" id="commentEditBtn" class="btn btn-outline-primary">수정</button>
<button type="button" id="commentDeleteBtn" class="btn btn-outline-primary">삭제</button>
</p>
</p>
<p>${name}</p>
<footer class="blockquote-footer">${comment}</footer>
</blockquote>
</div>
</div>`if (event.target.matches('#commentDeleteBtn')) {
const cardElement = event.target.closest('.card'); // 버튼의 부모 card
const commentId = cardElement.getAttribute('data-commentid'); // 버튼의 부모 card의 data-commentid값이러한 방법으로 삭제 기능 구현까지 완료되었다.
앞으로 배울것이 정말 많다고 느꼈다.
