[JavaScript] JSON 기본 개념

JSON은 쉽게 데이터를 주고받을 수 있도록 설계된 경량 데이터 포맷이다.

JSON 데이터는 순수 문자로만 구성되어 있다. 

 

JSON 데이터는 key-value 쌍으로 작성되고, 큰따옴표("")로 감싸서 표현한다. 그리고 key-value 사이에 콜론(:)을 삽입해서 구분한다. 

 

"key" : "value"

 

JSON 데이터 구성에서 key는 반드시 문자열 형태로 작성한다.

value에는 다양한 데이터 타입이 올 수 있다. 만약 value 값으로 문자열이 사용될 시 반드시 큰따옴표("")를 사용해서 표현한다.

 

만약 value를 숫자로 표현하고 싶다면 정수(Integer) 또는 부동소수점(float) 형태만 가능하다.

 

<JSON value가 될 수 있는 데이터 형식>
- a string
- a number
- an object
- an array
- a boolean
- null

<JSON value가 될 수 없는 데이터 형식>
- a function
- a date
- undefined

 

JSON 데이터를 포함하는 파일의 확장자는 .json이다.

 

.json

 

JSON 문자의 MIME type은 applicatin/json 이다.

* MIME type이란, 웹에서 전달되는 데이터를 식별하기 위해 사용되는 데이터 표기 형식을 말한다.

applicatin/json

 

JavaScript는 JSON 데이터 처리를 위한 내장 함수를 가지고 있다.

 

JSON.parse() 
- JSON 문자열을 JavaScript 객체로 변환

JSON.stringify()
- JavaScript 객체를 JSON 문자열로 변환

 

일반적으로 JavaScript 환경에서 Ajax 통신을 구현할 때 요청 구문에 JSON.stringify() 내장 함수를 자주 사용한다.

 

Ajax 구현 시 발생하는 에러 관련해서 구글링을 하다 보면 JSON.stringify() 함수를 통해 JavaScript 객체를 JSON 데이터로 변환하지 않고 요청 값을 웹 서버에 전달해서 에러가 발생했다는 내용의 글을 많이 볼 수 있다. 본인도 그런 실수를 계속 반복했다. 실수가 반복되면 우연이 아니라 필연이라고 했다. Ajax 통신에 대한 간단한 '사용법'만 알고 구현에 뛰어들었기 때문에 '왜' 이렇게 해야 한다는 개념이 없었다. 결정적으로, 부족한 지식을 보완하지 않은 게으름 때문에 실수가 계속 반복되었다. 이 글을 통해 지난날을 반성하게 되었다. 

 

다시 본론으로 돌아가서, JSON.stringify() 함수에 대한 구체적인 예시는 다음과 같다. w3school의 예제를 참고했다.

 

// JavaScript 객체
const obj = {name: "Kim", age: 30, city: "Honolulu"};

// JSON.stringify()
const jsonStr = JSON.stringify(obj);

// The jsonStr will be like.. 
{"name":"Kim","age":30,"city":"Honolulu"}

 

참고

https://www.w3schools.com/js/default.asp

JavaScript Tutorial