JSON 이란?

데이터를 교환 & 저장을 쉽게 할 수 있도록 텍스트 기반의 데이터 교환 표준입니다.

 

1) Javascript에서 객체를 만들 때 사용하는 표현식입니다.

2) 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 XML을 대체해서 데이터 전송에 사용합니다.

3) 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법입니다.

 

JSON 특징

1) 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용됩니다.

2) javascript 를 이용하여 JSON 형식의 문서를 쉽게 javascript 객체로 변환할 수 있는 이점이 있습니다.

3) JSON 문서 형식은 javascript 객체의 형식을 기반으로 만들어졌습니다.

4) JSON은 텍스트 기반이기 때문에 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있습니다.

5) 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공합니다.

 

{ key1 : value, key2 : value2 }

JSON은 키(Key)와 값(value)의 쌍으로 구성되어 있습니다.

여러 개의 데이터를 나열할 때는 쉼표(,)를 사용합니다.

 

{ key1 : { inKey : inValue }, key2 : [arr1, arr2, arr3] }

{"학생정보" : {"이름" : "홍길동", "학과" : "도시공학과" }, "수강과목" : ["도시계획사", "도시디자인", "도시설계"]

객체(Object)는 중괄호( { } )로 묶어서 표현하고, 배열(Array)은 대괄호( [ ] )로 묶어서 표현합니다. 

 

다양한 데이터 타입

값	타입
1	숫자(number)
"str"	문자열(string)
true	불리언(boolean)
{inKey : value}	객체(object)
["일", "이"]	배열(array)
null	널(NULL)

 

JSON 사용

 

자바스크립트에서 JSON을 사용하기 위해 다음과 같은 메소드를 제공하고 있습니다.

 

1. JSON.stringify(arg)

2. JSON.parse(arg)

 

위 두개의 메소드는 객체>문자열, 문자열>객체로 변환하는 기능을  가지고 있습니다.

 

1. JSON.stringify(arg)는 객체를 문자열로 변환합니다.

var json = {"test" : "value"}
var incodingData = JSON.stringify(json);

 

2. JSON.parse(arg)는 문자열을 객체로 변환합니다.

var str = '{"test" : "value"}';
var parsingData = JSON.parse(str);

JSON.parse() 사용 시 주의할 점은 해당 문자열이 반드시 JSON형식이어야 된다는 점입니다.

 

예제)

 

이름	성별	나이
홍길동	남	20
유관순	여	17

위 테이블을 JSON객체로 표현해보도록 하겠습니다.

 

[이름, 성별, 나이] 이 3가지 항목으로 나열된 객체를 생성하면 될 것입니다.

var Characters = [
	{
     '이름' : '홍길동',
     '성별' : '남',
     '나이' : 20
    },
    
    {
     '이름' : '유관순',
     '성별' : '여',
     '나이' : 17,
    }
]

여기서 데이터를 추가하려면 어떻게 해야 할까요?

 

var Character = {
	'이름' : '이순신',
    	'성별' : '남',
    	'나이' : 30
}

Characters.push(Character);

 

여기서 '성인여부'라는 항목을 추가해야 한다면 어떻게 해야할까요?

 

첫 번째 방법

Character.성인여부 = true;

두 번째 방법

Character["성인여부"] = true;

두 번째 방법은 key를 동적으로 생성해야 할 경우에 씁니다.

 

첫 번째 방법을 사용한다면?

var key = "가족구성원수";

character.key = 0; // X
// {이름: '이순신', 성별: '남', '나이': '30', 'key : 0 }

이와 같은 방식으로 key를 추가한다면 '가족구성원수' 항목이 추가 될 것이라고 생각할 수 있지만

그렇지 않습니다. "key"가 그대로 삽입되어 버립니다.

 

하지만 아래의 두 번째 방식을 사용한다면?

var key = "가족구성원수";

Character[key] = 0; // O

// {이름: '이순신', 성별: '남', 나이: 30, 가족구성원수: 0 }

'가족구성원수' 항목이 제대로 추가된 것을 확인할 수 있습니다.

JSON의 key값을 동적으로 생성해야한다면 반드시 두 번째 방법을 사용해야 합니다.

 

다음은 추가했던 항목 '가족구성원수'를 삭제해보도록 하겠습니다.

delete Character.가족구성원수