POST 요청 JSON과 x-www-form-urlencoded 동시 처리

댓글 작성 방식을 중간에 Ajax로 바꿔보느라

현재. 클라이언트에서 전송하는 데이터의 형태가 2가지가 존재했다.

일반 댓글 작성은 Ajax로 JSON 형태 데이터를 보내 처리하는 방식이고

현재 연구중인 답글은 form으로 보내는 형태이다.

이 form, JSON 두 방법이 모두 댓글 작성 가능하게 하는 방법이 궁금해서 연구해봤다.

 

현재 구현된 댓글 작성에는 아래와 같이 JSON 데이터를 받아 저장하는 방식이다.

    @PostMapping(value = "/comment/write")
    @ResponseBody
    public Comment commentWrite(@RequestBody Comment comment) {
        posterService.incrementCommentCnt(comment.getPno());
        commentService.write(comment);
        return comment;
    }

 

 

여기서 @RequestBody와 @ResponseBody가 뭔지 간단히 알자.

1.  @RequestBody

HTTP 요청 body에 있는 데이터를 자바 객체로 매핑하는데 사용한다.

웹 클라이언트가 전송하는 데이터는 다양한 형태가 있지만,

보통 JSON 형태로 서버로 데이터를 전송하는데. 이때 객체로 변환하는데 쓰인다.

Content-Type: application/json - JSON 요청

 

2.  @ResponseBody

HTTP 응답 body에 직접 데이터를 쓸 수 있다.

자바 객체를 body에 변환하여 JSON 형식으로 반환할 수 있음. Restful API에 쓰임.

JSON 응답

 

동시 처리

   @PostMapping(value = "/comment/write", consumes = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public Comment commentWrite(@RequestBody Comment comment) {
        posterService.incrementCommentCnt(comment.getPno());
        commentService.write(comment);
        return comment;
    }

    @PostMapping(value = "/comment/write", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
    public String commentWrite2(@ModelAttribute Comment comment) {
        posterService.incrementCommentCnt(comment.getPno());
        commentService.write(comment);
        return "redirect:/poster/read?id="+comment.getPno();
    }

동일한 URL로 매핑할 수 있다.

 

consumes 속성

HTTP 통신에서 클라이언트는 서버에 요청으로 보낼때 데이터 형식을 지정한다.

폼 데이터는 Content-Type 필드에 application/x-www-form-urlencoded를 사용한다.

consumes 속성을 통해 특정 타입의 데이터만 처리하게 할 수 있다.

JSON : MediaType.APPLICATION_JSON_VALUE

폼 데이터 : MediaType.APPLICATION_FORM_URLENCODED_VALUE

 

@ModelAttribute ?

HTTP 요청 body 내용을 setter나 생성자로 주입하기위해 사용한다.

주로 폼 데이터를 자바 객체로 바인딩하기위해 사용한다.

보통 commentWrite2(Comment comment)라고 작성할때

사실 @ModelAttriute가 생략된 것이다. 기본값이 @ModelAttribute이라는 뜻이다.

 

원시 타입(int, String)에 대해 객체를 생성할 수 없으므로

No primary or single unique constructor found 에러가 뜬다.