스프링 부트, 입문!

스프링 부트, 입문!

쉽고 빠르게 배우는, 스프링 부트 첫걸음!

26 댓글 수정 with JS

# 댓글 수정 with 자바스크립트 ## 미션 댓글 수정 페이지를 만들고, REST API를 호출하여 댓글을 수정하시오. ![홍팍-스프링-부트-입문--미션](http://drive.google.com/uc?export=view&id=1eGjcZACBnveyKbz6nbKZ1OdtnBMCEC0A) ## 01:31 수정 버튼 추가 - 부트스트랩, modal trigger button #### ../comments/_list.mustache ``` <div id="comments-list"> {{#commentDtos}} <div class="card m-2" id="comments-{{id}}"> <div class="card-header"> {{nickname}} <!-- 수정 버튼 추가 --> <button class="btn btn-sm btn-outline-primary">수정</button> </div> <div class="card-body"> {{body}} </div> </div> {{/commentDtos}} </div> ``` ## 02:27 부트스트랩5 모달 - bootstrap, modal #### ../comments/_list.mustache ``` <div id="comments-list"> {{#commentDtos}} <div class="card m-2" id="comments-{{id}}"> <div class="card-header"> {{nickname}} <!-- Button trigger modal --> <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#comment-edit-modal">수정</button> </div> <div class="card-body"> {{body}} </div> </div> {{/commentDtos}} </div> <!-- Modal --> <div class="modal fade" id="comment-edit-modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">댓글 수정</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> </div> </div> </div> ``` ## 05:25 수정 폼 삽입 - bootstrap, form, hidden input #### ../comments/_list.mustache ``` <div id="comments-list"> {{#commentDtos}} ... {{/commentDtos}} </div> <!-- Modal --> <div class="modal fade" id="comment-edit-modal" tabindex="-1"> ... <div class="modal-body"> <!-- 댓글 수정 폼 추가 --> <form> <!-- 닉네임 --> <div class="mb-3"> <label class="form-label">닉네임</label> <input type="text" class="form-control form-control-sm" id="edit-comment-nickname"> </div> <!-- 댓글 본문 --> <div class="mb-3"> <label class="form-label">댓글 내용</label> <textarea type="text" class="form-control form-control-sm" rows="3" id="edit-comment-body"></textarea> </div> <!-- 히든값 --> <input type="hidden" id="edit-comment-id"> <input type="hidden" id="edit-comment-article-id"> <!-- 전송버튼 --> <button type="button" class="btn btn-outline-primary btn-sm" id="comment-update-btn">수정 완료</button> </form> </div> ... </div> ``` ## 07:10 트리거 데이터 전달 - button attribute, data-bs-* #### ../comments/_list.mustache ``` <div id="comments-list"> {{#commentDtos}} <div class="card m-2" id="comments-{{id}}"> <div class="card-header"> {{nickname}} <!-- Button trigger modal --> <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#comment-edit-modal" data-bs-id="{{id}}" data-bs-nickname="{{nickname}}" data-bs-body="{{body}}" data-bs-article-id="{{articleId}}">수정</button> </div> <div class="card-body"> {{body}} </div> </div> {{/commentDtos}} </div> <!-- Modal --> <div class="modal fade" id="comment-edit-modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">댓글 수정</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <!-- 댓글 수정 폼--> <form> <!-- 닉네임 입력 --> <div class="mb-3"> <label class="form-label">닉네임</label> <input type="text" class="form-control form-control-sm" id="edit-comment-nickname"> </div> <!-- 댓글 본문 입력 --> <div class="mb-3"> <label class="form-label">댓글 내용</label> <textarea type="text" class="form-control form-control-sm" rows="3" id="edit-comment-body"></textarea> </div> <!-- 히든 인풋 --> <input type="hidden" id="edit-comment-id"> <input type="hidden" id="edit-comment-article-id"> <!-- 전송 버튼 --> <button type="button" class="btn btn-outline-primary btn-sm" id="comment-update-btn">수정 완료</button> </form> </div> </div> </div> </div> <!-- 모달 이벤트 처리 --> <Script> { // 모달 요소 선택 const commentEditModal = document.querySelector("#comment-edit-modal"); // 모달 이벤트 감지 commentEditModal.addEventListener("show.bs.modal", function(event) { // 트리거 버튼 선택 const triggerBtn = event.relatedTarget; // 데이터 가져오기 const id = triggerBtn.getAttribute("data-bs-id"); const nickname = triggerBtn.getAttribute("data-bs-nickname"); const body = triggerBtn.getAttribute("data-bs-body"); const articleId = triggerBtn.getAttribute("data-bs-article-id"); //console.log(`${id}, ${nickname}, ${body}, ${articleId}`); // 데이터를 반영 document.querySelector("#edit-comment-nickname").value = nickname; document.querySelector("#edit-comment-body").value = body; document.querySelector("#edit-comment-id").value = id; document.querySelector("#edit-comment-article-id").value = articleId; }); } </script> ``` ## 17:14 REST API 호출로 수정 - querySelector(), addEventListener(), fetch() #### ../comments/_list.mustache ``` <div id="comments-list"> {{#commentDtos}} ... {{/commentDtos}} </div> <!-- Modal --> <div class="modal fade" id="comment-edit-modal" tabindex="-1"> ... </div> <!-- 모달 이벤트 처리 --> <Script> { ... } { // 수정 완료 버튼 const commentUpdateBtn = document.querySelector("#comment-update-btn"); // 클릭 이벤트 처리 commentUpdateBtn.addEventListener("click", function() { // 수정 댓글 객체 생성 const comment = { id: document.querySelector("#edit-comment-id").value, nickname: document.querySelector("#edit-comment-nickname").value, body: document.querySelector("#edit-comment-body").value, article_id: document.querySelector("#edit-comment-article-id").value }; console.log(comment); // 수정 REST API 호출 - fetch() const url = "/api/comments/" + comment.id; fetch(url, { method: "PATCH", body: JSON.stringify(comment), headers: { "Content-Type": "application/json" } }).then(response => { // http 응답 코드에 따른 메시지 출력 const msg = (response.ok) ? "댓글이 수정 되었습니다." : "댓글 수정 실패..!"; alert(msg); // 현재 페이지를 새로고침 window.location.reload(); }); }); } </script> ``` ## 🔥 구글링 훈련하기 - 부트스트랩5 모달