19일차

~18.3 자바스크립트로 댓글 수정하기(종이책 p.511~537)

18장 웹 페이지에서 댓글 수정하기

18.1 댓글 수정의 개요

댓글 수정 페이지는 부트스트랩에서 제공하는 모달 기능을 이용해 만든다.

모달(modal)은 웹 페이지에 새 창을 띄우는 팝업 창과 달리 같은 웹 페이지 내부에서 상위 레이어를 띄우는 방식으로 사용하는 창이다. 모달 창이 뜨면 기존 창은 비활성 상태가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있다.

18.2 댓글 수정 뷰 페이지 만들기

수정 버튼을 클릭하면 모달 창을 띄우고 거기서 댓글을 수정할 수 있도록 구현한다.

수정 버튼과 모달 추가하기

1. 부트스트랩 페이지에서 modal로 검색해 live demo를 찾아 <!-- Button trigger modal --> 부분을 복사해서 _list.mustache의 {{nickname}} 아랫 부분에 붙여 넣는다.
2. 버튼 제목을 Launch demo modal에서 ‘수정’으로 변경한다.
3. 앞으로 이 버튼을 ‘모달 트리거 버튼’이라고 부를 것이다. 이 버튼의 속성의 의미는 다음과 같다.
   • data-bs-toggle=”modal”: 클릭하면 모달이 나타나고 다시 클릭하면 사라짐(토글 역할)
   • data-bs-target=”#exampleModal”: 해당 id의 모달 실행
4. 다시 부트스트랩으로 가서 <!-- Modal --> 부분도 복사해 _list.mustache 코드의 맨 아래에 붙여 넣는다.
5. <!-- Modal --> 코드를 다음과 같이 수정한다.
   • 모달의 id를 comment-edit-modal로 바꾸고, 모달 트리거 버튼의 data-bs-target 속성 값도 똑같이 바꾼다.
   • 모달에 필요 없는 속성을 지운다.(aria-labelledby=”exampleModalLabel” aria-hidden=”true” 삭제)
   • 모달 제목을 Modal title에서 ‘댓글 수정’으로 바꾼다.
   • close와 save changes 버튼은 필요 없으므로 modal-footer 영역을 지워준다.

수정 폼 삽입하기

모달 본문에 댓글 수정 폼을 넣는다. <form> 태그를 이용하며, _new.mustache에서 만들었던 폼을 가져와서 사용한다.

1. _new.mustache 파일 상단의 <form>・・・<form> 코드를 복사한다.
2. _list.mustache 파일의 모달 본문에 ・・・을 삭제하고 붙여 넣는다.
3. 붙여 넣은 코드를 다음과 같이 댓글 수정 폼으로 변경한다.
   • 닉네임 input 박스의 id를 edit-comment-nickname으로 수정한다.
   • 댓글 본문 textarea 박스의 id를 edit-comment-body로 수정한다.
   • 히든 인풋의 머스테치 변수를 삭제한다.({[#article}}, {{/article}})
   • <input> 구문에 value 속성은 필요 없으므로 삭제하고, id를 edit-comment-id로 수정한다.
   • <input> 구문을 하나 더 복사해 id를 edit-comment-article-id로 수정한다.
   • 전송 버튼의 id를 comment-update-btn으로 수정하고 버튼 제목을 ‘댓글 작성’에서 ‘수정 완료’로 변경한다.

18.3 자바스크립트로 댓글 수정하기

트리거 데이터 전달하기

1. _list.mustache파일의 {{#commentDtos}}・・・{{/commentDtos}}로 감싸진 부분에서 commentDto에 저장된 데이터를 모달 트리거 버튼의 속성 값으로 가져온다.

   • data-bs-id 속성을 추가하고 현재 댓글의 {{id}} 값을 저장한다.
   • data-bs-nickname 속성을 추가하고 현재 댓글의 {{nickname}} 값을 저장한다.
   • data-bs-body 속성을 추가하고 현재 댓글의 {{body}} 값을 저장한다.
   • data-bs-article-id 속성을 추가하고 현재 댓글의 {{articleId}} 값을 저장한다.

   이처럼 data-로 시작하는 속성을 데이터 속성이라고 한다. 데이터 속성은 HTML 요소에 추가 정보를 저장하고 싶을 때 사용한다.

2. 받아 온 데이터를 모달의 각 폼에 출력한다. 이를 모달 이벤트 처리라고 한다.

3. 코드 맨 아래에 <script></script> 태그를 추가하고 그 사이에 중괄호({})로 영역을 잡는다.

4. 모달 이벤트 처리를 하려면 먼저 모달을 선택해야 하므로 querySelector() 메서드로 모달을 선택하고 이를 commentEditModal 변수에 저장한다.

   // 모달 요소 선택
   const commentEditModal = document.querySelector(”#comment-edit-modal”);

5. addEventListener() 메서드를 사용해 모달이 열리는 이벤트를 감지해 이벤트가 발생하면 기존 댓글을 받아온다.

   // 모달 이벤트 감지
   commentEditModal.addEventListener(”show.bs.modal”, function(event) {});

   function(event)는 모달이 열리는 이벤트를 매개변수로 받아 실행되는 함수이다. 이렇게 특정 이벤트 처리를 담당하는 함수를 이벤트 핸들러(event handler)라고 한다.

   • show.bs.modal: 모달이 열리기 직전 발생하는 이벤트
   • function(event): 이벤트를 받아 처리하는 함수, 즉 이벤트 핸들러
   • function(event)의 event: 발생된 이벤트 정보를 가리키는 매개변수, 여기서는 show.bs.modal을 가리킴

6. 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”);

   • 수정 폼에 데이터 반영

   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;

자바스크립트로 REST API 호출하고 응답 처리하기

수정 완료 버튼을 클릭해 REST API를 호출하는 형식으로 만든다.

1. <script></script> 태그 안쪽에 중괄호 블록을 하나 더 잡고 수정 완료 버튼을 선택한다.
2. 수정 완료 버튼의 이벤트를 감지하고 이벤트가 발생하면 함수를 실행하도록 한다.
3. 댓글 수정하기 위해 먼저 객체를 생성한다.
   • 17장에서 한 것처럼 객체 리터럴 방식으로 만든다.
4. url이라는 상수 타입의 변수를 만들고 댓글 수정 API 주소를 저장한다.
5. fetch() 함수를 작성한다.
6. 마지막으로 응답 처리를 할 수 있도록 구현한다.

이제 http://localhost:8080/articles/5 페이지에 가서 Choi가 작성한 댓글의 수정 버튼을 클릭하고 탕수육을 돈가스로 수정한 후 수저 완료 버튼을 클릭하면 ‘댓글이 수정됐습니다.’ 라는 창이 나타나고 확인 버튼을 누르면 Choi의 댓글이 수정된 것을 확인할 수 있다.

_list.mustache