JSON 사용법

JSON 사용법 – 자바스크립트 10

by

JSON 사용법

JSON은 javascript object notation 의 약자로 자바스크립트에서 객체 인스턴스를 생성하는 또 다른 방식입니다. 객체안에는 매개변수와 값이 들어있으므로 이 자체로 데이터의 교환을 하기에 용이합니다. 네트워크와 앱 등 서로간 데이터 교환을 위해 과거에는 xml 을 사용했다면 json은 xml 이후에 등장하여 널리 사용되고 있는 형식입니다.

json이 현대 프로그래밍에서 많이 사용되는 것은 여러가지 장점이 있어서 입니다. 우선 사람이 읽기도 편하고 기계가 처리하기에도 적당합니다. 무엇보다 자바스크립트의 문법을 따르므로 클라이언트와 서버에서 바로 사용할 수 있다는 장점이 있습니다. json 파일을 받은 후 parse 후 바로 객체의 형태로 사용할 수 있습니다.

json 객체 생성

json 객체는 매개변수와 값의 한 쌍 단위로 데이터를 입력하여 생성합니다. 아래에서 “param” : “value1″의 관계는 매개변수: 값의 관계입니다. 이것은 자바스크립트에서 생성한 json 객체입니다.

var myJson = {
    "param1" : "value1",
    "param2" : "value2"
};

eval 의 문제

json 데이터를 시리얼화 (serialization)해서 주고 받을 때 문자열(string)로 변환하여 사용합니다. 자바스크립트에는 문자열 표현식을 실행하는 eval(evlauation) 함수가 있습니다만 이것은 사용하지 않을 것을 권합니다. eval에 어떤 코드를 넣어도 실행이 되기 때문에 보안상 허점이 있습니다. json 데이터에 해킹 코드가 들어있다고 해도 실행될 가능성이 있습니다. eval 대신에 JSON parser를 사용하도록 합니다. eval은 모든 javascript코드를 실행할 수 있지만 JSON은 JSON 텍스트만 인식하도록 제한이 걸려 있습니다. (더 안전하다)

파싱(Parsing)

json 정보가 문자열로 넘어올 때 사용하는 메소드는 JSON.parse() 입니다. 문자열을 파싱하기 전에는 json 객체는 그냥 문자열로 있습니다. parsing 후에는 인스턴스가 생성되고 자바스크립트 객체로써 조작할 수 있습니다.

아래는 문자열 json 데이터를 파싱해서 사용하는 것을 보여줍니다.

var jsonData = '{"name":"Soomthie","age":2}';
var myJsonObject = JSON.parse(jsonData);
var out = ""
for (i in myJsonObject){
    out += i + " = " + myJsonObject[i] + "<br>";
}
document.write('<br>' + out);

*결과:

name = Soomthie
age = 2

객체생성과 문자열화(stringfy), 다시 파싱(parsing) 하는 과정의 예는 아래와 같습니다.

// 객체 생성
var jsObject = new Object();
jsObject.param1 = "value1";
jsObject.param2 = "value2";

//문자열 화
var serialData = JSON.stringify(jsObject);
document.write('<br>' + serialData);

// 다시 파싱한다
var recover = JSON.parse(serialData);
document.write('<br>' + recover.param1);
document.write('<br>' + recover.param2);

*결과:

{"param1":"value1","param2":"value2"}
value1
value2

데이타 타입(data type)

json의 데이타 타입은 자바스크립트의 데이터 타입을 포함할 수 있습니다.

  • Number (숫자형)
  • String (문자열)
  • Boolean (불린)
  • Array (배열)
  • Object (객체)
  • null (널)

조금 복잡한 json 객체를 보겠습니다. 객체 안에 배열 타입이 들어간 객체 배열입니다. 다양한 데이터 타입을 포함할 수 있기 때문에 확장성이 좋습니다.

var bookListObject = {
    "booklist" : [{"title":"삼국지", "author":"나관중"}, {"title":"다빈치코드", "author":"댄브라운"}]
}

document.write('<br>' + bookListObject.booklist[1].title);

아래 처럼 json 파일을 만들어서 사용합니다

myJsonData = {
    "storeName": "sky computer",
    "computerParts": [
        {
            "type": "CPU",
            "price": 300
        },
        {
            "type": "GPU",
            "price": 400
        },
        {
            "type": "Ram",
            "price": 200
        }
    ]
}

요약

JSON 파일의 기초적인 사용법을 알아봤습니다. 직접 실생활적인 데이터를 만들어 보는 실습을 하는 것을 권합니다. 예를 들어 지역별 평균 기온이라던가 시험성적 데이터 들을 json 파일로 작성해보면 좀 더 빨리 익숙해질 수 있습니다.

홈으로

참고링크

JSON으로 작업하기 – Web 개발 학습하기 | MDN (mozilla.org)

Leave a Comment