JSON, @RequestBody , @ResponseBody

클라이언트에서 서버로 HTTP 요청(Request)메시지를 보내면, 서버는 클라이언트로 HTTP 응답(Response)메시지를 보낸다. 이러한 HTTP 메시지에는 본문(body)가 존재하며, 이 본문에는 데이터가 포함이 되어 있다.

스프링(Spring)에서 제공하는 @RequestBody와 @ResponseBody 어노테이션을 이용하면, 이 본문에 담긴 JSON 데이터를 손쉽게 주고받을 수 있으며 @RequestBody는 클라이언트가 보낸 JSON 데이터를 자동으로 Java 객체로 변환해주고, @ResponseBody는 서버의 Java 객체를 JSON 형식으로 응답 본문에 담아 클라이언트로 전달을 한다.

JSON( JavaSCript Object Notation )이란?

키-값 쌍으로 이루어져 데이터를 표현하는 형식으로, 비동기 통신 또는 API통신 등 다양한 분야에서 널리 사용되며 경량 데이터로써 가볍고 사람이 읽기 쉬운 형식이라 웹에서 데이터 교환에 많이 활용된다.

*** 문자열을 JSON 형식으로 사용하면 데이터를 쉽게 전달하거나 저장할 수 있다.

*** JSON은 다양한 프로그래밍 언어에서 데이터를 주고받는 표준 형식으로 자리 잡고 있어, 서버와 클라이언트 간의 원활한 데이터 교환이 가능하다.

 

 

위 이미지와 같이 `{ "키": "값" } 형식 으로 데이터가 표현된다.

• JavaScript에서의 JSON 파싱 및 생성

JSON.stringify : 자바스크립트 객체를 JSON 문자열로 변환하여 HTTP 요청의 본문에 담아 서버로 전송한다.

-> 전화번호(phone)를 JSON으로 변환해 서버로 전송 

$.ajax({
    type: "POST",
    url: "/sms/send",
    contentType: "application/json",
    data: JSON.stringify({ phoneNumber: phone }), // controller로 보낼 데이터 JSON 형태로 변환
    success: function(response) {
        console.log("SMS response:", response); // 응답 로그 추가
        alert("인증번호가 발송되었습니다.");
        document.getElementById("randomNum").value = response.certificationCode; // 인증번호를 hidden input에 저장
        startTimer(); // 인증번호 제한시간 시작
    },
    error: function(xhr, status, error) {
        alert("인증번호 발송에 실패했습니다. 다시 시도해주세요.");
    }
});

@RequestBody란

클라이언트가 서버로 보낸 HTTP 요청의 본문(Body)에 있는 JSON 데이터를 자바 객체로 변환하여 메서드의 파라미터로 전달해주는 역할을 한다.

이를 통해 서버는 클라이언트가 보낸 JSON 데이터를 자바에서 쉽게 사용할 수 있게 된다.

 

***Map<String, String> 을 사용하는 이유는 JSON의 키-값 쌍을 간단하게 표현하고 처리가 가능하기 때문이였다. 하지만

구조가 명확하거나 복잡한 경우에는 DTO클래스를 사용하는 것이 더 좋다고 한다.

// 휴대전화 인증
@PostMapping("/sms/send")
@ResponseBody
public Map<String, Object> sendSMS(@RequestBody Map<String, String> param) {
    // 응답을 담을 Map 객체 생성
    Map<String, Object> response = new HashMap<>();
    try {
        // param에서 userPhone 키의 값 추출, 휴대전화 번호 저장
         String phoneNumber = param.get("phoneNumber");

        // 인증번호 생성 요청
        String certificationCode = memberServiceImpl.generateCertificationCode();
        // 생성된 인증번호 -> sms 전송
        memberServiceImpl.sendSMSViaCoolSMS(phoneNumber, certificationCode);

        // 성공 응답
        response.put("success", true);
        response.put("certificationCode", certificationCode);
    } catch (Exception e) {
        // 실패 응답
        response.put("success", false);
        response.put("error", "인증번호 발송에 실패했습니다. 다시 시도해주세요.");
    }
    // 응답 결과 반환
    return response;
}

위 코드들로 예를 들어보면

• 클라이언트는 전화번호를 포함한 JSON 데이터를 서버로 전송
• @RequestBody를 사용하여 본문(Body)를 통해 전송된 JSON 데이터를 자동으로 Map이라는 객체로 변환
• 서버는 param.get("phoneNumber")로 휴대전화 번호를 추출하여 사용
• SMS 인증번호를 생성하고 전송한 후, 결과를 JSON 형태로 응답

@ResponseBody란

스프링 프레임워크에서 사용하는 어노테이션으로 HTTP 요청에 대한 응답 결과를 HTTP 응답 본문에 직접작성할 수 있도록 해준다. 즉, 컨트롤러 메소드가 반환하는 객체를 HTTP 응답 본문으로 변환해주는 역할 한다.

즉, 말그대로 본문(Body)에 JSON 데이터를 실어서 응답을 보내는 것이다.

 

위 코드를 다시보면 응답을 담을 Map<String, Object> 객체를 생성하고, response 변수에 성공여부와 인증번호를 담아서 반환을 한다.

• @ResponseBody를 사용하여 메서드가 반환하는  Map<String, Object> 객체는 스프링이 자동으로 JSON 형식으로 변환되어 HTTP 응답 본문에 포함 된다. (아래 이미지 참고)
• 클라이언트는 response 응답을 받아서 인증번호와 성공 여부를 확인 한다.

 

JSON, @ RequestBody, @ResponseBody에 대해 간단한 코드 예제를 통해 정리해 보았다.

JSON과 어노테이션들을 사용하여 클라이언트와 서버 간의 데이터 전송과 처리를 효율적으로 할 수 있었으며, 요청을 처리하기 전에 JSON 데이터를 어떻게 전달하고 받을지 고민하고 알맞게 활용 하는것이 중요한 것 같다.