IntelliJ @RequestBody @ResponseBody

1. 사용처

Spring에서 비동기 처리를 하는 경우 @RequestBody와 @ResponseBody를 사용한다.

 

2. 클라이언트와 서버의 비동기 통신처리

웹에서 이루어지는 데이터 통신은 클라이언트(Client)와 서버(Server)간에서 이루어지는데 , 

예를 들어 로그인 버튼을 누르면 입력한 아이디와 비밀번호 값이 서버로 넘어가 판단을 요청(Request)한다.

그러면 서버에서 이를 판단해 로그인을 허용할 것인지 결정을 한 후 클라이언트에 응답(Response)을 해준다.

즉 , 클라이언트에서 서버로 통신하는 메시지를 요청 메시지라고 하고 ,

서버에서 클라이언트로 통신하는 메시지를 응답 메시지라고 한다.

 

비동기 통신이란 화면전환 ( F5 , Refresh 등 ) 없이 이루어지는 동작을 말하는데 , 

비동기 통신을 사용하지 않는다면 회원가입을 할 때 이름 , 아이디 , 비밀번호 , 전화번호 , 주소 등을 입력하고

아이디 중복 버튼을 누를때 서버에서 응답하면 Refresh되어 입력한 값들이 모두 사라질 것이다.

이럴 때 비동기 통신을 사용해 요청과 응답을 받는다.

 

비동기 통신을 하기 위해선 요청메시지와 응답메시지를 본문(Body)에 담아 보내야 하는데

여기서 요청 본문(RequestBody) , 응답본문(ResponseBody)라는 단어가 만들어졌다.

 

3. 본문에 담겨야 하는 데이터 형식

가장 많이 사용하는 것은 JSON ( Javascript Object Notation ) 이다.

 

JSON ( Javascript Object Notation ) 은 속성-값-쌍 ( Attribute - value pair and array data types ( or any other serializable value )) 또는 키- 값 쌍 으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 ( AJAX ) 을 위해 , 넓게는 XML ( AJAX가 사용 ) 을 대체하는 주요 데이터 포맷이다. 특히 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다.

자료의 종류에는 큰 제한이 없으며 , 특히 컴퓨터 프로그램의 변수값을 표현하는데 적합하다.

즉 , 비동기 클라이언트 서버 통신을 위해서 데이터를 전송하는데 JSON이라는 형식의 데이터를 서버와 클라이언트 서로서로에게 전송하는 것이다.

 

@RequestBody 어노테이션을 이용해 요청 본문에 담긴 값을 자바 객체로 Conversion 한다 . 일반적으로는 HttpServletRequest를 이용해 데이터를 가지고 오면 굳이 @RequestBody 어노테이션을 사용하지 않아도 된다.

하지만 VO 나 DTO 를 사용해 데이터를 받으려면 @RequestBody 어노테이션을 사용해 데이터를 Conversion 해주어야 한다.

이후 Java Object를 JSON 데이터로 응답해주는 @ResponseBody를 사용해 응답을 해준다.

<script>
  const ajax10 = () => {
    const member = {
      "memberEmail": "aaa@aaa.com",
      "memberPassword": "abcdef1234!#$%",
      "memberName": "회원1"
    }
    $.ajax({
      type: "post",
      url: "/ajax_10",
      // js object를 JSON으로 변환
      data: JSON.stringify(member),
      // 서버에게 보내는 데이터의 타입을 지정
      contentType: "application/json",
      success: function (res) {
        console.log("요청성공",res);
        // member에 담긴 이름 접근
        console.log("name",res.member.memberName);
        for ( let i in res.member.memberList) {
          console.log(res.memberList[i]);
        }
      },
      error: function () {
        console.log("요청실패");
      }
    });
  }
</script>

결론으로는 클라이언트에서 서버로 데이터를 전송할 때에 JSON형태로 데이터를 만들어 요청하면 서버에서는 @RequestBody 어노테이션을 이용해 HTTP 요청 본문에 담긴 값들을 자바 객체로 변환시켜 , 객체로 저장시킨다.

서버에서 클라이언트로 데이터를 전송할 때에는 자바 객체를 JSON 형태의 데이터로 변경해 응답을 한다.

즉 , @ResponseBody를 이용해 자바 객체를 HTTP 응답 본문의 객체로 변환하여 클라이언트로 전송시킨다.