게시판 프로젝트 - 댓글 수정 기능 구현

REST API, JSON 설명)

 

REST API : Representational StateTransfer Application Program interface

자원을 이름으로 구분해서 표현해놓고, 그 자원들을 주고 받도록 만들어 놓은 시스템의 창구

응용 프로그램이 시스템에 있는 자원 (데이터 ) 을 쉽게 사용하기 위해 시스템이 각 자원에 이름을 붙여서 정리해 놓은 것

 

REST API 를 어디에 쓰나?

프론트엔드와 백엔드가 데이터를 주고받을 때. 

 

프론트엔트가 응용 프로그램에 매칭되고 백엔드가 시스템에 매칭된다 백엔드는 데이터를 저장, 보관 처리하고, 프론트엔드는 백엔드의 데이터를 필요로 한다. 

프론트엔드에서 만들어질 응용 프로그램이 백엔드 시스템의 데이터에 접근을 원할 때,  그러한 요청에 대해 쉽게 데이터를 제공하도록하는 기능

 

 

JSON : JavaScript Object Natation 

데이터 교환 포맷. 데이터를 주고 받을 때 지켜야하는 양식. 사람이 읽을 수 있는 텍스트를 사용하여 데이터를 저장하고 전송하는 데이터 공유를 위한 개방형 표준 파일 형석

{key : value }  키key 값value 으로 이루어져있다. 키와 값 사이에는 콜론 : 이 들어간다. 

-------------------------------------------------------------------------------

 

 

 

- CommentApiController 에 기능 추가

// 댓글 상세정보 조회
@GetMapping("/posts/{postId}/comments/{id}")
public CommentResponse findCommentById(@PathVariable final Long postId, @PathVariable final Long id) {
    return commentService.findCommentById(id);
}


// 기존 댓글 수정
@PatchMapping("/posts/{postId}/comments/{id}")
public CommentResponse updateComment(@PathVariable final Long postId, @PathVariable final Long id, @RequestBody final CommentRequest params) {
    commentService.updateComment(params);
    return commentService.findCommentById(id);
}

 

findCommentById : REST API  설계 규칙에서 다큐먼트에 해당하는 기능. 특정 게시글postId에 등록된 모든 댓글 중 PK (id) 에 해당하는 댓글을 조회한다. 댓글 수정시 사용자에게 기존 댓글 정보를 보여주는 용도로 활용

 

updateComment: REST API 설계 규칙 중 다큐먼트에 해당되는 기능, 특정 게시글 postId에 등록된 모든 댓글 중 PK(id) 에 해당하는 댓글을 수정한다. 댓글 수정이 완료되면 수정된 댓글 정보 (객체 ) 를 리턴해준다. saveComment()와 마찬가지로 @RequestBody 를 이용해 제이슨 문자열로 넘어오는 댓글 정보를 CommentRequest 객체의 각 멤버 변수에 매핑 한다. 

 

 

- 레이어 팝업 HTML 추가하기 , + view.html

<!--/* 댓글 수정 popup */-->
<div id="commentUpdatePopup" class="popLayer">
    <h3>댓글 수정</h3>
    <div class="pop_container">
        <table class="tb tb_row tl">
            <colgroup>
                <col style="width:30%;" /><col style="width:70%;" />
            </colgroup>
            <tbody>
            <tr>
                <th scope="row">작성자<span class="es">필수 입력</span></th>
                <td><input type="text" id="modalWriter" name="modalWriter" placeholder="작성자를 입력해 주세요." /></td>
            </tr>
            <tr>
                <th scope="row">내용<span class="es">필수 입력</span></th>
                <td><textarea id="modalContent" name="modalContent" cols="90" rows="10" placeholder="수정할 내용을 입력해 주세요."></textarea></td>
            </tr>
            </tbody>
        </table>
        <p class="btn_set">
            <button type="button" id="commentUpdateBtn" class="btns btn_st2">수정</button>
            <button type="button" class="btns btn_bdr2" onclick="closeCommentUpdatePopup();">취소</button>
        </p>
    </div>
    <button type="button" class="btn_close" onclick="closeCommentUpdatePopup();"><span><i class="far fa-times-circle"></i></span></button>
</div>

댓글 수정은 레이어 팝업 또는 모달로 불리는 팝업으로 처리한다.

 

 

- 레이어 팝업 관련 js 함수 작성

// 댓글 수정 팝업 open
function openCommentUpdatePopup(id) {

    const postId = [[ ${post.id} ]];
    const uri = `/posts/${postId}/comments/${id}`;
    const response = getJson(uri);
    document.getElementById('modalWriter').value = response.writer;
    document.getElementById('modalContent').value = response.content;
    document.getElementById('commentUpdateBtn').setAttribute('onclick', `updateComment(${id})`);
    layerPop('commentUpdatePopup');
}


// 댓글 수정 팝업 close
function closeCommentUpdatePopup() {
    document.querySelectorAll('#modalContent, #modalWriter').forEach(element => element.value = '');
    document.getElementById('commentUpdateBtn').removeAttribute('onclick');
    layerPopClose('commentUpdatePopup');
}

 

OpenCommentUpdatePopup: CommentController와 findCommentById()를 호츨해 댓글 상세정보를 조회한다. success()함수의 response는 URI의 id에 해당하는 단일 댓글 객체이다.

레이어 팝업의 작성자와 내용에 기존 댓글 정보를 보여주고, 수정 버튼에 updateComment()함수를 클릭 이벤트로 바인딩하는데, 모든 댓글은 PK(id) 기준으로 업데이트 되기 때문에, 팝업이 열리는 시점에 수정 버튼에 댓긋의 id를 전달해주어야 한다. 

layerPop()함수는 기존에 common.js에 선언되어 있던 함수로, 화면에 레이어 팝업을 띄워주는 기능을 한다.

 

closeCommentUpdataPopup() : 레이어 팝업의 작성자와 내용을 초기화, 수정 버튼에 바인딩된 클릭 이벤트를 제거한 후 팝업을 닫습니다.

layerPopClose() 함수도 마찬가지로 기존에 common.js에 선언되어 있던 함수로, 화면에서 레이어 팝업을 닫는 기능을 한다.

 

 

 -findAllComment() 함수 수정하기

각 댓글의 수정 버튼을 클릭했을 때 레이어 팝업이 오픈될 수 있도록 수정 버튼에 클릭 이벤트를 선언해주어야 한다.

view.html의 findAllComment()에서 commentHtml에 그리는 버튼을 아래와 같이 수정한다.

<p class="func_btns">
    <button type="button" onclick="openCommentUpdatePopup(${row.id});" class="btns"><span class="icons icon_modify">수정</span></button>
    <button type="button" onclick="deleteComment(${row.id});" class="btns"><span class="icons icon_del">삭제</span></button>
</p>

 

 

-updateComment() 함수 작성하기

view.html에 레이어 팝업의 수정 버튼을 클릭했을 때 실행되는 updateComment()함수를 작성한다.

   // 댓글 수정
function updateComment(id) {

    const writer = document.getElementById('modalWriter');
    const content = document.getElementById('modalContent');
    isValid(writer, '작성자');
    isValid(content, '수정할 내용');

    const postId = [[ ${post.id} ]];
    const params = {
        id : id,
        postId : postId,
        content : content.value,
        writer : writer.value
    }

    $.ajax({
        url : `/posts/${postId}/comments/${id}`,
        type : 'patch',
        contentType : 'application/json; charset=utf-8',
        dataType : 'json',
        data : JSON.stringify(params),
        async : false,
        success : function (response) {
            alert('수정되었습니다.');
            closeCommentUpdatePopup();
            findAllComment();
        },
        error : function (request, status, error) {
            console.log(error)
        }
    })
}

saveComment() 와 유사한 기능을 하는 함수이다. 해당 함수는 파라미터로 댓글의 id를 전달받아 서버로 함께 전송한다. 댓글 수정이 완료되면 레이어 팝업을 닫은 후 댓글을 다시 조회한다.