Json 데이터 전송하기 (application/json)

2020. 1. 20. 01:26

Json 데이터 전송하기

(application/x-www-form-urlencoded, application/json)

클라이언트에서 서버로 데이터를 전송하려할 때, 데이터를 Json 포멧으로 만들어서 보내는 것이 일반적인 형태 중 하나입니다. 이 글에서는 Json 포멧으로 데이터를 송수신하는 부분을 개발할 때 헷갈릴 수 있는 부분에 대해서 설명하려고 합니다.

헷갈릴 수 있는 부분은 현재 개발 중인 서버에서 Json 포멧으로 데이터를 받도록 잘 개발한 것 같 같은데, 클라이언트에서 아무리 Json 포멧으로 데이터를 만들어서 보내도 안되는 경우가 있습니다. 그런데 어떻게 보내면 가끔은 다시 잘 되는 경우도 있습니다. 만약, 현재 그런 상황에 마주했다면, 그리고 그 이유가 Content-Type 설정값 때문이라면 이 글이 도움이 될 것입니다.

서버에서 Json 포멧으로 데이터를 받도록 개발된 상태에서 개발 중인 클라이언트에서 Http Request Message 안의 Content-Type으로 설정될 수 있을만한 값으로는 application/x-www-form-urlencoded와 application/json가 있습니다. 이 글에서는 두 경우를 나눠서 살펴보려고 합니다.

Content-Type을 application/x-www-form-urlencoded로 설정해서 보내는 경우
Content-Type을 application/json로 설정해서 보내는 경우

현재, Spring Framework를 사용해서 서버측 Rest API를 개발하고, 이 Rest API를 Web Page에서 Ajax를 통해 호출되거나 때로는 Android App에서 호출되어야하는 상황이라고 생각해보죠. 그리고 이 Rest API는 json포멧의 데이터만 받을 수 있도록 하려고 합니다. 이 때, 해당 Rest API가 클라이언트 요청에 대해 정상적으로 응답하는지 테스트하기 위해서, 클라이언트에서 Json 포멧의 데이터를 하나 만들어서 요청해보려고 합니다.

요청에 대해 서버가 정상적으로 응답을 주는지 두가지 방법으로 테스트하려고 합니다. 하나는 개발 중인 Web Page의 javascript(=JQuery)를 사용해서 json 포멧으로 데이터를 만들어서 요청하는 것입니다. 다른 하나는 Android App을 대신해서 클라이언트 툴 중 하나인 PostMan을 사용해서 json 포멧으로 데이터를 만들어서 요청하는 것입니다. 물론, Web Page나 Android App을 대신해서 둘다 PostMan으로 Json 데이터를 만들어서 테스트가 가능하지만, 이해를 돕기 위해 둘로 나누어서 생각해보려는 것입니다.

Content-Type을 application/x-www-form-urlencoded로 설정해서 보내는 경우

이 경우는, 보통 Web Page를 개발할 때, javascript(=JQuery)를 사용해서 Ajax로 서버에 데이터를 요청하는 경우(혹은 HTML Form을 사용해서 요청하는 경우)입니다. 만약에, Content-Type을 따로 기입하지 않으면, 클라이언트에서는 Http Request Header의 Content-Type을 Default값인 application/x-www-form-urlencoded으로 세팅되서 서버로 데이터가 전송됩니다. 이렇게 개발중이라면 현재 서버와 클라이언트 코드는 아래형태로 구성되어 있을 것입니다.

※ (참고) application/x-www-form-urlencoded로 보내는 경우, HTTP Request Message의 Body를 사용해서 데이터를 보내는 것으로, 이 경우 전송되는 데이터의 페이로드 값은 “key=value&key2=value2” 형태를 가질 것입니다. 그리고 서버로 들어온 데이터는 request.getParameterMap()으로 확인 가능합니다.

[Client-Side] PostMan

[ HTTP Request Body : x-www-form-urlencoded ]

(Method) POST
(Url) http://localhost/reg
(Header) Content-Type : application/x-www-form-urlencoded
(Body) x-www-form-urlencoded :
"id":1,
"title":"Harry Potter",
"description":"J. K. Rowling"

[Client-Side] javascript (using JQuery)

$.ajax({
	url: 'http://localhost/reg',
	// contentType을 명시하지 않으면 application/x-www-form-urlencoded; charset=UTF-8으로 세팅된다.
	method: 'POST',
	data: {
		id: 1,
		title: "Harry Potter",
		description: "J. K. Rowling"
	})
});

[Server-Side] Java (using Spring Framework)

@RestController
@RequestMapping("/info")
public class JokerController {
	@RequestMapping(value = {"/reg1"}, method = {RequestMethod.GET, RequestMethod.POST})
	public ResponseMsg reg1(JokerData data) {
		…
	}
}

Content-Type을 application/json로 설정해서 보내는 경우

이 경우는, 보통 Android나 iOS앱을 위한 Rest API를 개발하는 경우입니다. 해당 클라이언트 앱에서 서버에 데이터를 요청할 때, 보통 Http Request Header의 Content-Type을 application/json으로 세팅되서 서버로 데이터가 전송시킵니다. 만약 이렇게 개발중이라면 현재 서버와 클라이언트 코드는 아래형태로 구성되어 있을 것입니다.

※ (참고) application/json으로 보내는 경우, HTTP Request Message의 Payload를 보내는 것으로, 이 경우 전송되는 데이터의 페이로드 값은 예를 들어, {“key”:”value”, “key2”:”value2”} 형태로 대체로 복잡한 오브젝트 형태를 가지는 JSON 객체가 될 수 있습니다. 그리고, 서버로 들어온 데이터는 request.getReader().lines().collect(Collectors.joining())으로 확인 가능합니다.

[Client-Side] PostMan

[ HTTP Request Body : json/application ]

(Method) POST
(Url) http://localhost/reg
(Header) Content-Type : application/json
(Body) raw :
{
	"id":1,
	"title":"Harry Potter",
	"description":"J. K. Rowling"
}

[Client-Side] javascript (using JQuery)

주의 : contentType을 application/json으로 세팅

주의 : JSON.stringify() 메소드를 사용해서 Json 데이터 세팅

$.ajax({
	url: 'http://localhost/reg',
	contentType: 'application/json',
	method: 'POST',
	data: JSON.stringify({
		id: 1,
		title: "Harry Potter",
		description: "J. K. Rowling"
	})
});

[Server-Side] Java (using Spring Framework)

주의 : @RequestBody 어노테이션을 사용 (=HTTP Request Body 부분을 그대로 읽어서 객채로 변환)

@RestController
@RequestMapping("/info")
public class JokerController {
	@RequestMapping(value = {"/reg2"}, method = {RequestMethod.GET, RequestMethod.POST})
	public ResponseMsg reg2(@RequestBody JokerData data) {
		…
	}
}

정리하면, 클라이언트에서 Content-Type을 application/json로 세팅해서 데이터를 송신하고, 서버에서는 @RequestBody를 사용해서 데이터를 받도록 코드를 작성하면 Json 데이터를 송수신할 수 있는 상태가 된다.

저작자표시 비영리 변경금지

Joker