클라이언트에서 서버로 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 데이터를 어떻게 전달하고 받을지 고민하고 알맞게 활용 하는것이 중요한 것 같다.