JSON(JavaScript Object Notation)사용법에 대해

요즘 N,D포털을 비롯해서 거의 모든 사이트에서 Front-end 구현 기술에 빠지지 않고 포함되는 기술로 AJAX가 사용되는

것 같습니다. 사실 AJAX자체는 신기술이라 할 수는 없지만 jQuery같은 훌륭한 자바스크립트 라이브러리가 나오기 전에는

뷰페이지를 표현하는데 있어서 AJAX가 많이 사용됐던것 같진 않습니다. 물론 이전에 prototype.js와 같은 라이브러리가

있긴 했으나 지금처럼 어느곳에서나 눈에 띌정도로 많이 사용됐던 것 같진 않네요. 저 같은 경우에도 AJAX를 깊이있게

사용해본적은 그다지 없고 request중에 비동기적 기능호출이 필요한 경우에만 종종 사용해왔던 것 같습니다.

하지만 대세를 따르다 보니 이젠 AJAX, JSON사용은 필요보다는 필수가 되가고 있네요. JSON이 두루 사용되기 전에는

AJAX를 통해 XML데이터나 Text데이터를 호출해서 사용하는 방식이 주였으나 최근에는 JSON 방식이 주로 사용되는

것 같습니다. JSON표기를 어떻게 사용하는지 확인해 보겠습니다.

- JSON (JavaScript Object Notation)

 이름과 같이 자바스크립트 객체 표기법을 JSON이라고 합니다. 예를 들어 다음과 같은 데이터를 JSON객체로 표현한다고

보겠습니다.

ex) 데이터

            친구
                -학교
                   - 김친구(성격:더러움), 이친구(성격:안착함)
                -회사
                   - 오대리(성격:좋음), 이대리(성격:다혈질)

친구는 학교친구도 있고 회사 친구도 있습니다. 학교친구,회사친구들은 각각 집합으로 볼수 있으니 배열로 표현 할수 있겠죠.

JSON에서는 객체나 배열 안에 또다른 객체나 배열을 표기 할수 있습니다. 그래서 학교친구와 회사친구를 배열로 만들고

학교와, 회사라는 객체에 각각 넣어준뒤 학교친구,회사친구 배열이 들어간 학교,회사 객체를 친구 객체에 추가 한다고 생각

하시면 되겠습니다. 이를 JSON으로 다음과 같이 표현할 수 있습니다.

ex) JSON

  var friend =

              {
                  "school" : {
                      "person" : [{"name":"김친구","personallity":"더러움"},

                                      {"name":"이친구","personallity":"안착함"}]
                  },
                  "company" : {
                      "person" : [{"name":"오대리","personallity":"더러움"},{"name":"이대리","personallity":"다혈질"}]
                  }
              };

JSON에서는 표기시 {"key" : "value"} 형식으로 키이름과 키이름에 따른 데이터가 함께 있어야 합니다. 위에서 보시면

person 배열에는 또다른 학교,회사 친구들의 이름과, 성격이 객체로 들어가 있습니다. 여기에 또 다시 배열이나 객체가

들어가는것도 가능합니다. 아래 예를 보시죠.

ex) 데이터

            친구
                -학교
                   - 김친구(성격:더러움)(핸드폰:010-2222-3333,010-3333-4444), 이친구(성격:안착함)
                -회사
                   - 오대리(성격:좋음), 이대리(성격:다혈질)

ex) JSON

  var friend =

              {
                  "school" : {
                      "person" : [{"name":"김친구","personallity":"더러움",

                                       "mobiles":["010-2222-3333","010-3333-4444"]},

                                       {"name":"이친구","personallity":"안착함"}]
                  },
                  "company" : {
                      "person" : [{"name":"오대리","personallity":"좋음"},

                                      {"name":"이대리","personallity":"다혈질"}]
                  }
              };

김친구는 핸드폰이 두개가 있습니다. JSON데이터는 다시 XML로 표현하는것도 가능하며 김친구의 핸드폰과 같은 텍스트

노드들의 집합은 배열로 지정합니다. JSON데이터는 아래 예와 같이 XML이나 JavaScript로도 다시 표현 할 수 있습니다.

ex)XML

<friend>

<school>

<person>

<name>김친구</name>

<personallity>더러움</personallity>

<mobiles>

<mobile>010-2222-3333</mobile>

<mobile>010-3333-4444</mobile>

</mobiles>

</person>

<person>

<name>이친구</name>

<personallity>안착함</personallity>

</person>

</school>

<company>

<person>

<name>오대리</name>

<personallity>좋음</personallity>

</person>

<person>

<name>이대리</name>

<personallity>다혈질</personallity>

</person>

</company>

</friend>

ex) Java Script

    var friend = new Object();
    friend.school = new Object();
    friend.company= new Object();
   
    friend.school.person = new Array();
    friend.school.person[0] = new Object();
    friend.school.person[0].name="김친구";
    friend.school.person[0].personallity="더러움";
    friend.school.person[0].mobiles = new Array();
    friend.school.person[0].mobiles[0] = "010-2222-3333";
    friend.school.person[0].mobiles[1] = "010-3333-4444";
    friend.school.person[1] = new Object();
    friend.school.person[1].name="이친구";
    friend.school.person[1].personallity="안착함";
   
    friend.company.person = new Array();
    friend.company.person[0] = new Object();
    friend.company.person[0].name="오대리";
    friend.company.person[0].personallity="좋음";
    friend.company.person[1] = new Object();
    friend.company.person[1].name="이대리";
    friend.company.person[1].personallity="다혈질";   

그렇다면 JSON은 뭐하러 사용할까요? 파싱과정을 거쳐야 하는 불편함이 있을때가 있지만 일단 가독성이 좋기 때문이죠.

하지만 XML의 경우 파싱하여 사용할때 DOM Parser를 사용하는데 DOM(Document Object Model)은  XML 구조를

트리형태로 구성하여 메모리 상에 구조를 만들면서 작은양의 데이터가 오갈때는 큰 무리가 없지만 큰 데이터가 오갈때는

사용자의 PC가 느려질수 있기도 합니다. JSON의 경우 경량 데이터 교환 포맷으로 XML에 비해 가볍다라고 하긴 하지만..

체감상으로 느껴본적은 없는 것 같습니다. 아마도 요즘엔 PC사양이 대부분 듀얼코어 이상의 웹서핑등에 사용될때는

고사양이라 그런 듯 싶습니다. 어쨋든 JSON 표기법은 처음엔 어색하지만 위의 예와 같이 우선 문자열 자체가 줄어들어

코딩량이 줄어들어드는 장점이 있습니다. 하지만 단점으로는 위와 같은 예제에서는 줄을 나눠서 가독성이 좋지만 한줄로

표현하게 되면 가독성이 좋지 않고 데이터 가공까지는 그렇다 쳐도 출력시킬때는 꽤 헷갈릴때가 많습니다.

실제로 개발을 하다보면 위와같이 데이터를 표현하는 경우는 드물고 한줄로 쫙 뿌리는 경우가 많습니다.

ex)JSON 데이터를 한줄로 표현

  var friend = {"school" : {"person" : [{"name":"김친구","personallity":"더러움","mobiles":                     ["010-2222-3333","010-3333-4444"]},{"name":"이친구","personallity":"안착함"}]},
                     "company" : {"person" : [{"name":"오대리","personallity":"좋음"},{"name":"이대                      리","personallity":"다혈질"}]}};

ex)XML 데이터를 한줄로 표현

<friend><school><person><name>김친구</name><personallity>더러움</personallity>

<mobiles><mobile>010-2222-3333</mobile><mobile>010-3333-4444</mobile></mobiles>

</person><person><name>이친구</name><personallity>안착함</personallity></person>

</school><company><person><name>오대리</name><personallity>좋음</personallity>

</person><person><name>이대리</name><personallity>다혈질</personallity></person>

</company></friend>

보통 이와 같은 형태로 DB에 데이터를 일정형식으로 그대로 넣었다가 가져오는 경우도 있고 DB의 데이터를 JSON이나

XML형태로 가공하여 사용하기도 합니다. 그냥 얼핏 봐도 JSON 표기법의 경우 한줄로 표현할 경우 어디까지가 객체의 끝인지

배열의 끝인지를 알수가 없습니다. 물론 XML도 한줄로 표현하면 보기 힘든점은 마찬가지긴 합니다만 그래도 JSON표기에

비해서는 좀더 쉽게 구분이 갑니다. 예제에서야 간단한 데이터로 표현했지만 데이터량이 많아질수록 가독성이 떨어지는

것은 어쩔 수 없는 부분인것 같습니다. 그래도 우선 저의 경우는 XML의 경우 DOM Parser를 거쳐 파싱해야 하는 과정이

복잡하고 버겁게 느껴질때가 많아서 JSON사용이 주류가 되는것에 대해 환영하는 입장입니다. 그렇다고 XML이 JSON보다

나쁘다라고 할수는 없고 개발할때 느끼지만 항상 상황에 적당한 기술 사용이 더 중요한 것 같습니다.

※예제는 실제로 실행해 보지 않아서 확실히 맞는지는 모르겠습니다. JSON표기법을 어떻게 사용하는지 객체,배열의 매핑

방법이 이렇다 하는것만 알아보시고 실제로 브라우저로 테스트 해보시기 바랍니다.