[DAY 19] 댓글 수정 View 페이지 구현 및 자바스크립트 이벤트 처리

댓글을 수정하는 페이지를 모달 기능을 활용하여 만든다.

모달(modal)

웹 페이지 내부에서 상위 레이어를 띄우는 방식, 모달 창이 뜨면 기존 창은 비활성 상태가 되고, 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있음

view 페이지 구현 흐름

1. 댓글 목록 페이지에서 수정 버튼 코드를 넣는다. 이 버튼은 모달 트리거 버튼이 되어, 이 버튼을 클릭하면 모달이 실행된다.

2. 부트스트랩의 라이브 모달 코드를 복사하여 댓글 목록 페이지에 넣는다.

3. 모달의 id와 제목 등을 수정해주고, 수정 form 코드를 modal-body에 삽입한다.

form 코드의 id 값이나 내용을 수정에 맞게 수정해주면 view 페이지 구현은 완료된다.

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

이제 자바스크립트로 기존 댓글 정보를 가져오고, 자바스크립트 요청을 실어 rest api를 호출한다.

 

1. 현재 코드는 {{#commentDto}} ... {{/commentDto}} 에 담겨있는 수 만큼 반복하여 댓글 데이터를 출력하고 있다. 이 구문을 이용하여 commentDto에 저장된 데이터를 모달 트리거 버튼의 속성값으로 가져올 수 있다.

<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>

data- 속성을 이용하여 추가 정보를 버튼에 불러온다.

 

2. 모달 이베트 처리를 이용하여 받아온 데이터를 모달의 각 폼에 출력해야한다. 모달 이벤트 처리를 위해서 querySelector() 메서드로 모달을 선택하고, 이를 변수에 저장한다.

요소명.addEventListener("이벤트_타입", 이벤트_처리_함수)

// 모달 요소 선택
    const commentEditModal = document.querySelector("#comment-edit-modal");
    // 모달 이벤트 감지
    commentEditModal.addEventListener("show.bs.modal", function(event) {

위 형식에 맞춰 모달 요소를 선택하고, 모달이 열릴때 함수를 실행하도록 명령한다.

* 모달 동작과 관련한 이벤트 타입

show.bs.modal : 모달이 표시되기 직전 실행되는 이벤트

shown.bs.modal : 모달이 표시된 후 실행되는 이벤트

hide.bs.modal : 모달이 숨겨지기 직전 실행되는 이벤트

hidden.bs.modal : 모달이 숨겨진 후 실행되는 이벤트

 

3. 모달이 열릴때 실행되는 함수를 자성한다. 트리거 버튼을 선택하여, 데이터를 가져온 뒤, 수정 폼에 해당 데이터를 반영해야한다.

    // 1. 트리거 버튼 선택
    const triggerBtn = event.relatedTarget;
    // 2. 데이터 가져오기
    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");
    // 3. 수정 폼에 데이터 반영
    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;
    });

위 과정이 끝나면, 댓글 수정 버튼을 클릭하였을때, 모달이 실행되면서 댓글 수정 폼에 기존의 댓글 데이터가 뜨게 된다.

4. 이제 rest api를 호출한다. rest api는 수정 완료 버튼을 클릭하는 클릭 이벤트가 감지되었을때, 함수가 발생하도록 addEventListener() 메소드를 이용하여 작성한다.

 // 수정 완료 버튼 선택
    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
    };

5. 위 과정에서 수정 댓글 객체가 생성된다. 다음으로 rest api를 호출하여 수정 내용을 db에 반영한다.

// 수정 REST API 호출
    const url = "/api/comments/" + comment.id;
    fetch(url, {
        method: "PATCH",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(comment)
    })

6. rest api를 통해 db에 반영되고 난 후 사용자가 수정이 반영되었는지 확인하는 과정이 필요하다. 응답 객체의 상태가 ok면 "댓글이 수정됐습니다."를, 아니면 "댓글 수정 실패" 메시지 창이 출력되도록 응답 처리 구문을 사용하고, 그 이후 창을 새로고침하여 바뀐 db가 페이지에 뜨도록 한다

}).then(response => {
    // HTTP 응답 코드에 따른 메시지 출력
    const msg = (response.ok) ? "댓글이 수정됐습니다." : "댓글 수정 실패!";
    alert(msg);
    // 현재 페이지 새로고침
    window.location.reload();