게시판 프로젝트 - REST API 방식으로 댓글 등록 기능 구현

 

댓글 컨트롤러 클래스 생성

rest controller는 화면이 아닌 데이터 자체를 리턴한다. 댓글 데이터의 CRUD는 전부 게시글 상세 페이지에서 이루어지기 때문에 화면을 따로 구성할 필요 없이 데이터만 주고 받으면 된다.

 

package com.study.domain.comment;

import com.study.common.paging.PagingResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

@RestController
@RequiredArgsConstructor
public class CommentApiController {

    private final CommentService commentService;

    // 신규 댓글 생성
    @PostMapping("/posts/{postId}/comments")
    public CommentResponse saveComment(@PathVariable final Long postId, @RequestBody final CommentRequest params) {
         Long id = commentService.saveComment(params);
         return commentService.findCommentById(id);

    }
    // 댓글 리스트 조회
    @GetMapping("/posts/{postId}/comments")
    public PagingResponse<CommentResponse> findAllComment(@PathVariable final Long postId, final CommentSearchDto params) {
        return commentService.findAllComment(params);
    }


    // 댓글 상세정보 조회
    @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);
    }


    // 댓글 삭제
    @DeleteMapping("/posts/{postId}/comments/{id}")
    public Long deleteComment(@PathVariable final Long postId, @PathVariable final Long id) {
        return commentService.deleteComment(id);
    }

}

 

@RestController : 컨트롤러의 모든 메서드에  @ResponseBody 가 적용되며 응답으로 페이지html가 아닌 이턴 타입에 해당하는 데이터(객체) 자체를 리턴한다

 

@PathVariable: REST API 에서 리소스를 표현하는 데 사용ㅎ안다. 해당 어노테이션을 이용하면 uri에서 탬플랫 형태로 파라미터 (변수)를 전달받을 수있는데 saveComment()는 URI 에서 게시글 번호postId를 수집하게 되며 postId는 @PathVariable 로 선언한 long 타입의 postId에 매핑 된다.

 

@RequestBody: 일반적으로 데이터를 생성POST 또는 수정PUT or PATCH 하는 경우에 사용

저장할 데이터를 제이슨 포맷으로 해서 서버에 요청을 보내면 키 - 값 구조로 이루어진 각각의 데이터가 자바 객체와 매핑 된다

 

@saveComment() : 새로운 댓글을 생성한 후 생성된 댓글의 상세정보(응답객체) 를 리턴한다. 

 

 

상세페이지- 댓글 작성 영역 추가

댓글 CRUD 는 모두 상세 페이지에서 처리되기 때문에 view.html댓글 영역을 추가해야함.

<!--/* 댓글 작성 */-->
<div class="cm_write">
    <fieldset>
        <legend class="skipinfo">댓글 입력</legend>
        <div class="cm_input">
            <p><textarea id="content" name="content" onkeyup="countingLength(this);" cols="90" rows="4" placeholder="댓글을 입력해 주세요."></textarea></p>
            <span><button type="button" class="btns" onclick="saveComment();">등 록</button> <i id="counter">0/300자</i></span>
        </div>
    </fieldset>
</div>

 

상세페이지 -js 함수 작성

// 댓글 길이 카운팅
function countingLength(content) {
    if (content.value.length > 300) {
        alert('댓글을 300자 이하로 입력해 주세요.');
        content.value = content.value.substring(0, 300);
        content.focus();
    }
    document.getElementById('counter').innerText = content.value.length + '/300자';
}


// 댓글 저장
function saveComment() {
    const content = document.getElementById('content');
    isValid(content, '댓글');

    const postId = [[ ${post.id} ]];

    const uri = `/posts/${postId}/comments`;
    const params = {
        postId : postId,
        content : content.value,
        writer : 'user' // 여기에 로그인한 사용자의 id,loginId
    }

    callApi(uri, 'post', params);
    alert('저장되었습니다.');
    content.value = '';
    document.getElementById('counter').innerText = '0/300자';
    findAllComment(1);
}

 

countLength() : 댓글에 입력된 글자 수를 카운팅한다. 글자 수가 300자를 초과하는 경우, 입력된 전체 내용에서 1~300번째까지의 문자열을 추출해서 댓글 내용을 다시 세팅한다.

saveComment() : DB에 댓글을 저장한다. 댓글 내용의 유효성을 검사한 후 게시글 번호 (id) , 댓글 내용(comment), 작성자(writer) 정보를 서버로 전달한다.

 

url: http 요청 uri를 의미한다.

type : http 요청 method를 의미한다.

contentType: 서버로 전송할 데이터의 형식

datatype: 서버에서 응답으로 내려받을 데이터의 형식 text,html,xml, json

data: 서버로 전송할 데이터를 의미한다. 

async: true 인 경우에는 서버에서 응답이 내려오지 않아도 다음 로직이 실행되고, false인 경우에는 서버에서 응답이 내려온 후에 다음 로직이 실행된다

success: ajax 요청에 성공했을 때 실행되는 콜백 함수. 댓글 생성이 완료되면 생성된 댓글 정보를 콘솔에 출력

error: 요청 실패시 실행되는 콜백 함수, 서버에서 에러가 발생하면 해당 함수 안의 로직이 실행 된