[JSON] JSON 이란 무엇인가? 간단 정리 및 예제를 통한 사용 방법

 

---

 

JSON 이란?

 

JSON은 JavaScript Object Notation 의 약자입니다.

직역하면 '자바 스크립트 객체 표기법'으로

데이터를 쉽게 ' 교 환 ' 하고 ' 저 장 ' 하기 위한 텍스트 기반의 데이터 교환 표준 입니다.

 

JSON은 텍스트 기반이기 때문에 다양한 프로그래밍 언어에서 데이터를 읽고 사용할 수 있습니다.

 

 

 

JSON의 기본적인 형태는 아래와 같습니다. 

 

 

1.

{ key : value }

 

JSON의 형태는 키(Key)와 값(value)의 쌍으로 이루어져 있는 구조입니다.

그리고 Key와 Value사이에는 콜론(:)이 들어가게 됩니다.

 

 

 

2.

{key1 : value, key2 : value2}

 

여러 데이터를 나열할 경우 쉼표( , )를 사용합니다.

 

 

 

 

3.

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

{"판매자정보" : { "이름" : "남도일", "지역" : "서울" } , "판매품목" : ['사과','배','딸기']  }

 

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

 

 

 

4.

[   1,    "str",    true,    {inKey : "value"},    ["일", "이"],    null    ]


// 숫자 (number)
{  k  :  1  }


//문자열 (string)
{  k  :  "str"  }


//불리언(boolean)
{  k  :  true  }


//객체(object)
{  k  :  {inKey : "value" }  }


//배열(array)
{  k  :  ["일", "이"]  }


//널(NULL)
{  k  :  null  }

 

데이터의 값으로 다양한 타입을 사용할 수 있습니다.

 

 

값	타입
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);

//console.log(incodingData);

 

 

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

 

 

객체   < ------------    문자열

 

var str = '{"test" : "value"}';

var parsingData = JSON.parse(str);

//console.log(parsingData);

 

작은따옴표(' ')로 묶은 문자열 str 을 JSON.parse(str)로 문자열에서 객체로 변환한 것이 보이시죠?

 

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

 

가령 아래와 같은 경우 JSON.parse() 사용 시 오류를 발생시키게 됩니다.

 

 

var str = "k : v"

JSON.parse(str);

 

 

 

---

 

 

이제 예제를 통해 JSON 사용법을 조금 더 알아봅시다~!

 

 

 

1.

이름	성별	나이
남도일	남	18
유미란	여	17

 

 

위의 테이블을 JSON객체로 표현한다면 어떻게 표현할 수 있을까요?

 

 

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

 

var Characters = [

    {
     '이름' : '남도일', 
    
     '성별' : '남', 
     
     '나이' : 18
    },
    
    {
     '이름' : '유미란', 
    
     '성별' : '여', 
     
     '나이' : 17
    }
    
]

 

 

 

여기서 데이터를 추가하려면 아래와 같이 해주면 되겠죠?

 

 

var Character = {

    '이름' : '유명한',
    
    '성별' : '남',
    
    '나이' : '38'
}


Characters.push(Character);

 

 

그렇다면 '성인여부'라는 항목을 추가해야 한다면 될까요?

 

1.

Character.성인여부 = true;

 

혹은

 

 

2. 

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

 

와 같은 2가지 방법으로 가능합니다.

 

평소에는 편한 방법으로 사용하시면 되지만 2번과 같은 방법이 필요할 때가 있습니다.

 

바로 key를 동적으로 생성해야 할 경우입니다.

 

 

먼저 아래 1번을 볼까요? 

 

1.

var key = "직접잡은범인";

Character.key = 0; // X

// { 이름: "유명한", 성별: "남", 나이: "38",  key: 0 }

 

이와 같은 방식으로 key를 추가한다면 '직접잡은범인' 항목이 추가 될 것이라고 생각하실 수도 있지만,

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

 

하지만 아래에 2번과 같은 방식을 사용한다면

 

 

2.

var key = "직접잡은범인";

Character[key] = 0; // X

// { 이름: "유명한", 성별: "남", 나이: "38", 직접잡은범인: 0 }

 

WOW~ key값이 '직접잡은범인'으로 올바르게 추가되었습니다~!

 

JSON의 key값을 동적으로 생성해야한다면 반드시 2번과 같은 방법을 활용해주세요~!

 

 

 

 

마지막으로 방금 전 추가했던 '직접잡은범인' 항목을 삭제해보는 걸로 마무리 짓겠습니다.

 

delete Character.직접잡은범인

// { 이름: "유명한", 성별: "남", 나이: "38" }

 

 

 

 

JSON 기초 정리 끝.