[JavaScript] JSON 만들기, 파싱하기

JSON의 간단한 설명

JSON 이란?

JSON은 JavaScript Object Notation 의 약자에서 알 수 있듯이

Javascript 객체를 구조화된 데이터로 주고받기 위한 포맷입니다.

 

현재는 가장 대중적인 HTTP Content-Type 데이터유형으로 사용되고 있습니다.

 

아래 내용을 보기전에

JavaScript는 스크립트형 언어이기 때문에 Java나 C++ 과 같은 컴파일이 필요하지 않습니다.

즉, 예제를 바로바로 확인 하실 수 있으므로

• 크롬을 켜고
• F12를 눌러 개발자도구창을 여신 뒤
• [Console] 탭으로 이동하여 소스를 붙여넣기 하신다음
• [Enter] 키를 누르시면 바로바로 확인이 가능하십니다!

 

JSON으로 만들 데이터 준비하기

• JavaScript에서 구조화 된 객체를 만들어 보겠습니다.
• 아래와 같이 만들어진 객체를 JSON 객체를 통해 stringify 메소드로 Server 통신이 가능한 JSON 구조체로 만들어보겠습니다.

생성자를 통한 객체 생성

JavaScript에서 제공하는 Object와 Array 객체를 통해 구조화 된 데이터를 만들어봅시다.

// Object 에 담을 데이터를 정의합니다. var memberData = new Object(); memberData.name = "Derveljun"; memberData.activeFlg = true; memberData.age = 20; // Array에 담을 Item 객체를 만들어줍니다. var pointHistoryItem1 = new Object(); pointHistoryItem1.useDate = 20200101; pointHistoryItem1.usePoint = 1000; pointHistoryItem1.accuralPoint = 100; pointHistoryItem1.channel = "강남주점"; var pointHistoryItem2 = new Object(); pointHistoryItem2.useDate = 20200102; pointHistoryItem2.usePoint = 0; pointHistoryItem2.accuralPoint = 100; pointHistoryItem2.channel = "강서마트"; // Item 객체를 Array에 담아줍니다. var arrPointHistory = new Array(); arrPointHistory.push(pointHistoryItem1); arrPointHistory.push(pointHistoryItem2); // Array를 Object에 담아줍니다. memberData.pointHistory = arrPointHistory; console.log(memberData);

객체를 생성하고 key 에 해당하는 개별 값을 선언해주면, 바로 사용할 수 있습니다.

대개의 경우는 위에 방법보다는 다음에 볼 데이터형태를 바로 선언하는 방식으로 정의합니다.
객체를 선언하는 것보다 직관적이고, JavaScript에서는 중괄호 또는 대괄호를 통한 객체 생성을 권장하고 있습니다.

자세한 JavaScript 객체 사용방법은 아래 링크를 통해 확인하실 수 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

객체 초기자

 

중괄호 객체선언으로 JS 객체 생성하기

var memberData = { // 문자형 정의 방법 name : "Derveljun", // boolean 형 정의 방법 activeFlg : true, // 숫자형 정의 방법 age : 20, // 배열은 아래와 같이 구조화 할 수 있습니다. pointHistory : [ { useDate : 20200101, usePoint : 1000, accuralPoint : 100, channel : "강남주점" }, { useDate : 20200102, usePoint : 0, accuralPoint : 1000, purchaseChannel : "강서마트" } ] }; console.log(memberData);

생성자를 통해 만들어진 객체를 완전히 동일하지만, 다른 방식으로 생성해 보았습니다.

 

JSON 객체 만들기

위와 같이 만든 방법을 객체 리터럴 표기법 이라 하며, 위와 같이 만들어진 데이터는 언뜻보기엔 JSON과 비슷해보이지만, 아직은 완전한 JSON이 아닙니다.

객체 리터럴 표기법으로 만들어지는 객체는 Object / Array 유형의 객체 이외에도 다양한 Format의 객체를 사용하여 만들어질 수 있기 때문입니다.

HTTP 통신으로 서버와 송수신하기 위해서는 아래처럼 JSON 객체를 통해 직렬화 과정을 해주어야 비로소 가능합니다. 반대로 직렬화 된 데이터를 풀어 JavaScript 데이터로 만들 수도 있습니다.

JSON 객체 함수

JSON 객체는 JavaScript에서 지원하는 객체입니다.

객체가 제공하는 stringify()와 parse() 함수를 가지고 JSON 문자열을 만들 수도, 파싱할 수도 있습니다.

JSON 데이터 유형

JSON은 5가지의 데이터유형으로 정의할 수 있습니다.

• 객체: 객체형은 중괄호{}로 정의
• 배열 : 배열형 객체는 대괄호[] 로 정의
• 문자형 : 큰 따옴표""
• 숫자형 : 문자가 포함되지 않은 숫자형 데이터
• 불리언 : true 또는 false 값

보시다시피 JavaScript에서 사용하는 문법과 크게 다르지 않습니다.

데이터유형은 null로도 초기화가 가능합니다.

JSON 문자열 만들기

위에서 만들었던 memberData를 JSON 문자열로 만드는 방법입니다.

var jsonData = JSON.stringify(memberData); console.log(jsonData);

console log로 데이터를 출력하면 아래와 같이 나옵니다.

{"name":"Derveljun","activeFlg":true,"age":20,"pointHistory":[{"useDate":20200101,"usePoint":1000,"accuralPoint":100,"channel":"강남주점"},{"useDate":20200102,"usePoint":0,"accuralPoint":1000,"purchaseChannel":"강서마트"}]}

이걸 좀더 보기 쉽게 바꾸어 봅시다.

{ // 문자형 정의 방법 "name" : "Derveljun", // boolean 형 정의 방법 "activeFlg" : true, // 숫자형 정의 방법 "age" : 20, // 배열은 아래와 같이 구조화 할 수 있습니다. "pointHistory" : [ { "useDate" : 20200101, "usePoint" : 1000, "accuralPoint" : 100, "channel" : "강남주점" }, { "useDate" : 20200102, "usePoint" : 0, "accuralPoint" : 1000, "purchaseChannel" : "강서마트" } ] };

위에서 선언했던 JavaScript 객체와 다른점은 속성값을 큰 따옴표 ""로 감쌌다는 점입니다.

이렇게 만들어진 데이터를 JSON 문자열이라고 합니다.

서버와 통신할 때에는 JSON 문자열로 만든 값을 requestbody에 넣어주셔야 보내실 수 있습니다.

JSON 문자열을 JavaScript 객체로 바꾸기

이제 JSON 문자열을 서버에서 받아왔다고 가정하고 다시 JavaScript 데이터로 바꿔봅시다.

memberData2 = JSON.parse(jsonData); console.log(memberData2);

console.log() 출력된 값은 아래처럼 보일 겁니다!

{ name : "Derveljun", activeFlg : true, age : 20, pointHistory : [ { useDate : 20200101, usePoint : 1000, accuralPoint : 100, channel : "강남주점" }, { useDate : 20200102, usePoint : 0, accuralPoint : 1000, purchaseChannel : "강서마트" } ] }

 

마무리

자 이렇게

• JavaScript 데이터 객체를 만들고,
• JSON 문자열로 바꾸었다가
• 다시 JavaScript 데이터 객체로 만들어 보았습니다.

혹시나 이해가 안되시는 부분이나 잘못된 부분이 있다면 댓글 부탁드리고,

도움이 되셨다면 하트 한번 부탁드립니다 :D

출처: https://derveljunit.tistory.com/214 [Derveljun's Programming Log]