어떤 스택을 사용하든지 간에 서로 연동하는 과정에서 데이터 타입의 일치에 대한 문제는 늘 발생한다. 프론트에서 서버에 요청을 보내면 서버는 알맞은 형식으로 데이터를 반환해주어야 한다. 이 과정에서 늘 문제가 발생하곤 한다.
스프링에서 RESTful한 웹을 만들 때, 간단하게 확인해보기위해서 포스트맨을 사용할 때 자주 발생할 만한 문제 중 하나가 바로 데이터 타입 문제다. 간단하게 Form-Data와 JSON의 차이점, 그리고 스프링에서 이를 어떻게 처리할 수 있는지 알아보자!
form-data와 JSON?
form-data
Ajax로 폼 전송을 가능하게 해주는 자바스크립트의 객체이며 주로 HTML 폼을 통해 전송되는 데이터 형식이다.
- 전송 방식 :
application/x-www-form-urlencoded또는multipart/form-data - 사용 사례 : 사용자 로그인, 파일 업로드 등
- 장점 : 파일 업로드와 같은 바이너리 데이터 전송이 가능함. 폼 데이터를 쉽게 처리할 수 있음
JSON (JavaScript Object Notation)
사람이 읽고 쓰기 쉬우면서도 기계가 쉽게 분석하고 생성할 수 있는 경량의 데이터 교환 형식이다.
- 전송 방식 :
application/json - 사용 사례: 서버와 클라이언트 간의 데이터 교환에서 주로 사용되며, RESTful API에서 데이터를 주고받을 때 가장 널리 사용되는 형식이다.
- 장점: 구조화된 데이터 표현에 적합함. 파싱이 비교적으로 쉬움. 특히, 객체 형태의 데이터를 주고받을 때 유용함.
스프링에서의 데이터 수신 방식
@ModelAttribute:Form-Data를 수신할 때 사용된다. HTML 폼에서 전송된 데이터를 객체에 매핑해준다.@RequestBody: JSON 데이터를 수신할 때 사용된다. 클라이언트에서 전송된 JSON 형식의 데이터를 객체에 매핑해준다.
포스트맨으로 API 테스트 시 발생할 수 있는 문제
포스트맨을 사용하여 API를 테스트할 때, 클라이언트에서 서버로 데이터를 전송하는 형식이 맞지 않을 경우 흔히 415 Unsupported Media Type 오류나 400 Bad Request 오류가 발생할 수 있다.
-
JSON 형식의 데이터 전송:
Content-Type을application/json으로 설정하지 않으면 서버는 데이터를 파싱할 수 없어 오류가 발생한다. -
form-data 전송: 폼 데이터를 전송할 때
@RequestBody대신@ModelAttribute를 사용해야 한다. 그렇지 않으면 415 오류가 발생할 수 있다.
예시
예를 들어, 클라이언트가 form-data로 데이터를 전송했는데 서버에서 @RequestBody로 이를 수신하려 하면 서버는 415 오류를 반환한다.
- Form-Data의 경우:
- 클라이언트에서
application/x-www-form-urlencoded형식으로 데이터를 전송할 경우, 서버는 이 데이터를 수신하기 위해@ModelAttribute를 사용해야 한다.
- 클라이언트에서
@PostMapping("/member/insert")
public ResponseEntity<HashMap<String, Object>> member_insert(@ModelAttribute MemberDto memberDto) {
// 회원가입 로직 처리
}- JSON의 경우
- 클라이언트가
application/json형식으로 데이터를 전송할 경우, 서버는@RequestBody를 사용하여 데이터를 받아야 한다.
- 클라이언트가
@PostMapping("/member/insert")
public ResponseEntity<HashMap<String, Object>> member_insert(@RequestBody MemberDto memberDto) {
// 회원가입 로직 처리
}한줄요약 : ModelAttribute는 폼데이터, RequestBody는 JSON으로 받자
분명 맞는데 어? 하면서 발생하기 쉬운 오류인 것 같다. 둘의 차이는 늘 가물가물하달까 😅
