스프링부트에서 rest(json) 시작하기

들어가며

• json을 사용하며 기존 자바를 다룰 때와 다른 점은 아무래도 body 엔티티 자체를 사용하는 것에 있지 않나 싶다. 물론 body의 생성과 값의 추출을 쉽게 할 수 있도록 자바는 많은 기능을 제공한다.

controller 에서 json

    @GetMapping(value = "/board/{bno}", produces = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<List<ReplyDTO>> getListByBoard(@PathVariable("bno")Long bno){
        log.info("bno : "+bno);
        return new ResponseEntity<>(replyService.getList(bno), HttpStatus.OK);
    }

• json을 다루는 객체는 다양하지만 보통 ResponseEntity를 많이 사용한다. 그 이유는 헤더를 사용할 수 있기 때문이다. 위의 예제는 HttpStatus.OK로 간단하게 처리하지만 Header 객체를 생성할 수 있다.
• 또한, 자바의 다양한 데이타 타입, 자료 구조에 대응한 바디를 자동 생성해준다. 위에서는 List를 값으로 한다.
• Mapping에 있어서도 GET, POST, PUT, DELETE, PUT 등 자유롭게 사용 가능하다.
• 컨트롤러가 자바의 데이타 타입이나 자료구조를 반환하는 경우 그 값은 view로 이동하고, view는 html로 렌더링한다. 그렇기 때문에 return을 String으로 할 경우 특정 view로 이동하고 void로 하면 Mapping한 값에 따라간다. 하지만 rest의 경우 바디 자체를 반환한다.

    @PostMapping("")
    public ResponseEntity<Long> register(@RequestBody ReplyDTO replyDTO){
        log.info(replyDTO);

        Long rno = replyService.register(replyDTO);

        return new ResponseEntity<>(rno, HttpStatus.OK);
    }

• 컨트롤러에서는 @RequestBody를 통해 json 파일을 받을 수 있으며, key 와 맴버만 일치한다면 해당 값을 자동으로 주입한다.

HTML, javascript와 ajax

function loadJSONData(){
    $.getJSON('/replies/board/'+bno, function(arr){
        console.log(arr);

        var str = "";

        $('.replyCount').html("Reply Count : "+arr.length)

        $.each(arr, function (idx, reply){
            console.log(reply);

            str+='<div class="card-body" data-rno="'+reply.rno+'"><b>'+reply.rno+'</b>'
            str+='<h5 class="card-title">'+reply.text+'</h5>'
            str+='<h6 class="card-subtitle mb-2 text-muted">'+reply.replyer+'</h6>'
            str+='<p class="card-text">'+formatTime(reply.regDate)+'</p>'
            str+='</div> '
        });
        listGroup.html(str);
    });
};

function formatTime(str){
    var date = new Date(str);

    return date.getFullYear() + '/' +
        (date.getMonth()+1)+ '/' +
        date.getDate() + ' ' +
        date.getHours() + ':' +
        date.getMinutes();
}

$('.replySave').click(function (){
    var reply = {
        bno: bno,
        text: $('input[name="replyText"]').val(),
        replyer: $('input[name="replyer"]').val()
    }
    console.log(reply);
    $.ajax({
        url : '/replies/',
        method : 'post',
        data : JSON.stringify(reply),
        contentType : 'application/json; charset=utf-8',
        dataType : 'json',
        success : function (data){
            console.log(data);

            var newRno = parseInt(data);

            alert(newRno + "번 댓글이 등록되었다. ")
            modal.modal('hide');
            loadJSONData();
        }
    });
});

• ajax를 활용하여 특정 json 값을 가져오거나(get) 특정 json 값을 입력한다(post)

body의 존재 유무에 따라

• 마지막으로 delete 통신 방식을 통해 body를 전달하려다 실패한 경험을 공유하고자 한다. delete를 body 형태로 컨트롤러에 보내했지만 계속 에러가 발생했다. 그런데 특이한 점은 바디는 컨트롤러에 옮겼고, 원하는 것이 작동하는 것을 확인했다. 하지만 ajax의 success가 작동하는 것이 아니라 error가 작동했다.

$.ajax({
    url: '/replies/',
    method:'delete',
    data: JSON.stringify(reply),
    contentType:'application/json; charset=utf-8',
    dataType:'json',
    success : function (data){
        alert(data);
    }, error : function (request,status,error) {
        alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
    }
});

( 메시지 코드 출처: https://shonm.tistory.com/454 [정윤재의 정리노트])

• 에러의 발생 이유를 찾아본 결과, delete 메서드 방식은 페이로드를 지원하지 않는다. 그러니까 json(body)을 지원하지 않는다. get과 같이 @PathVariable(url 매개변수)를 통해서는 가능하다. (페이로드 관련 내용 : https://blog.naver.com/lewisel/221829301069)
• 그래서 아래와 같이 수정했다.

$.ajax({
    url: '/replies/'+id,
    method:'delete',
    success : function (data){
        alert(data);
    }
});

• 위의 코드는 위험하다. 왜냐하면 url에 해당 값만 입력하면 누구나 삭제할 수 있기 때문이다.
• 그러므로 헤더에 authorization의 값으로 jwt를 입력하여 인증 인가를 한다.