JSON(JavaScript Object Notaion)

JSON란?

 

자바스크립트 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 데이터 표준 포맷입니다.

서버에서 클라이언트로 데이터를 전송하여 표현하거나 클라이언트에서 서버로 데이터를 전송하거나 표현할 때 사용합니다. 즉, 네트워크를 통해 전송할 때 아주 유용합니다.

 

JSON 구조

JSON은 자바스크립트의 기본 데이터 타입인 문자열, 숫자, 배열, boolean, 객체를 포함할 수 있으며 다음과 같은 방식으로 데이터 계층을 구축할 수 있습니다.

 

아래 코드는 제가 주토피아의 영화정보를 서버에서 가져온다는 가정으로 제가 임의로 만들어 보았습니다.

{
	"개봉" :2016,
	"등급" : "전체 관람가",
	"장르" : : ["애니메이션", "액션", "모험", "코미디", "가족"],
	"국가" : "미국",
	"러닝타임" :108,
	"배급": ["월트 디즈니", "컴퍼니 코리아"],
	"캐스트" : [
		{
			"Ginnifer Goodwin" : "Judy Hopps (voice)",
			"Jason Bateman"	: "Nick Wilde (voice)",
			"Idris Elba" :	"Chief Bogo (voice)",
			"Jenny Slate" :	"Bellwether (voice)",
		},
	],
}

 

 

JSON 사용 시 주의 해야 할 점 및 객체(Object)와의 차이점

• 객체(Object)는 작은 따옴표도 사용 가능하지만 JSON은 작은 따옴표를 사용할 수 없으며 오직 큰 따옴표만 사용이 가능합니다.
• 객체(Object)의 키(key)에는 따옴표을 붙이지 않아도 사용가능했지만 JSON은  따옴표로 묶어지 않으면 사용이 불가능합니다.(number는 큰 따옴표가 없어도 가능합니다.)
• 객체(Object) 안에 메소드가 들어가는 것이 가능하지만 JSON 안에는 메소드를 사용하면 작동이 안됩니다.  즉,  프로퍼티(property)만 담을 수 있습니다.

JSON <-> Object

JSON과 Object의 차이점을 알아보았습니다.

 

이제 서버에서 주토피아 데이터(JSON)를 가져온다고 가정해봅시다.

서버에서 가져 온 데이터는 바로 사용하지 못합니다.

그 이유는 서버에서 가져온 주토피아 데이터(JSON) key에 큰 따옴표가 있기 때문입니다.

서버에 가져온 데이터는 문자열이기 때문에 이를 자바스크립트 값이나 object로 변환해주어야합니다.

이 때 사용하는 메서드가 JSON.parse()입니다.

 

그 반대(클라이언트에서 서버로 데이터를 보내는) 경우를 살펴봅시다.

사용자가 주토피아의 평점을 입력하면 이를 서버에 보낸다고 가정해봅시다.

이 경우에도 사용자가 입력한 평점은 자바스크립트 값이나 object이기 때문에

문자열로 바꿔주어야 합니다.

이때 사용하는 메서드가 JSON.stringify()입니다.

 

JSON.parse()나 JSON.stringify()에 대해 더 알고 싶으시면 아래에 정리해놓았습니다.

 

JSON.parse(), JSON.stringify() 살펴보기

 

 

이상 JSON에 대해 살펴보았습니다. 감사힙니다.

 

참고

developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON