Ratel 2021. 7. 5. 22:52

JSON은 JavaScript Object Naotation의 약어로 말 그대로 번역해 보면 자바스크립트에서의 객체 표기법으로 작성된 텍스트이다.

이러한 JSON은 데이터 저장 및 교환을 위한 개방형 표준 포맷으로 사용되고도 하고 넓은 범위로는 AJAX를 위해 XML을 대체하는 데이터 포맷으로 사용되기도 한다.

 

자바스크립트 개게 표기법 구문에서 파생된 JSON의 구문은 다음과 같다.

- 데이터는 이름/값(속성-값 쌍 또는 키-값쌍)이다.

- 데이터는 쉼표로 구분되다.

- 중골호는 객체를 유지한다.

- 대괄호는 배열을 유지한다.

 

JSON에서의 값(value)은 문자열, 숫자, 객체(JSON 객체), 배열, Boolean, null 중 하나이여한다.

JSON 안에 있는 값(value)에 접근하기 위해서는 도트(.) 표기법과 대괄호([ ]) 표기법을 사용하면 된다.

<script>
    var Json, x, y;
    Json = {"name":"Ratel", "age":null, "city":"jungle"};
    
    x = Json.name; 
    // 결과: Ratel
    
    y = Json["name"];
    // 결과: Ratel
</script>

도트(.) 표기법과 대괄호([ ]) 표기법을 사용하면 JSON의 값(value)를 수정할 수도 있다.

<script>
    var Json, x, y;
    // JSON의 값으로 문자열뿐만 아니라 새로운 객체, 배열도 가능.
    Json = {"name":"Ratel", "age":null, "cars":["Genesis", "kia", "BMW"],
            "cities":{"city1":"Seoul", "city2":"Suwon"}
    };
    
    Json.name = "blog"; 
    // 결과:  Json = {"name":"blog",...};
    
    Json[cars][0] = "Benz";
    // Json = {..., "cars":["Benz", "kia", "BMW"], ...};
    
    Json.cities["city1"] = "Jeonju";
    // Json = {..., "cities":{"city1":"Jeonju", "city2":"Suwon"}};
</script>

 

 

JSON의 장점은 복잡한 파싱 및 번역 작업없이 데이터를 자바스크립트 객체로 처리할 수 있다는 것이다.

브라우저와 서버 간에 데이터를 교환할 때 데이터는 텍스트뿐이다.

JSON은 이러한 텍스트의 일종이며 모든 자바스크립트 객체를 JSON으로 변환하여 서버로 보낼 수 있다.

또한, 서버에서 받은 JSON을 자바스크립트 객체로 변환할 수도 있다.

 

자바스크립트 객체를 JSON으로 변환하여 서버로 보내는 코드를 봐보자.

<script>
    var Obj = {"name":"Ratel", "hobby":"basketball", "city":"jungle"};
    var Json = JSON.stringify(Obj);
    window.location = "demo_json.php?x="+Json;
    
</script>

이런식으로 JSON.stringify()함수를 통해 자바스크립트 객체를 텍스트(JSON)으로 변환하여 데이터를 보낼 수 있다.

만약, 서버로부터 JSON 형시의 데이터를 받았다면 JSON.parse()를 통해 손쉽게 자바스크립트 객체로 변환하여 데이터를 이용할 수 있다.

 

 

JSON의 또 다른 장점은 JSON 형식이 텍스트 전용이라는 것이다.

이것이 왜 장점일까?

텍스트는 모든 프로그래밍 언어에서 데이터 형식으로 읽고 사용할 수 있기 때문에 언어에 독립적일 수 있다.

즉, JSON이 자바스크립트 이외에 어떠한 언어에서도 읽고 쓰는데 문제가 발생하지 않는다.