JSON¹은 데이터교환 포맷으로 XML보다 가볍기 때문에 자바스크립트 쪽에서는 자주 쓰이고 있다. 여러 라이브러리 등에서 JSON의 형태를 자주 쓰고 있기 때문에 나도 몇번 써봤는데 자바스크립트의 특성과 맞물려서 유연하기 때문에 유용하게 써먹을 수 있을듯 하다.

JSON의 공식사이트에는 JSON의 표기방식을 다음과 같이 정의하고 있다.


학생때 몇번 써본 표기방식이다. 저걸 모라고 부르더라.... 기본적으로

{ 키 : 값 } 의 형태로 이루어지고 { 키 : 값, 키 : 값, 키 : 값, 키 : 값 } 형태로 계속 이어 붙힐 수 있다는 뜻이다. 이 형태만 유지한다면 넘길때(예를 들어 Server Side에서..) 스트링으로 만들어서 넘기더라도 자바스크립트에서는 열었을대 JSON 오브젝트로 만들 수 있다.(오래된 글에서 내용이 애매하게 작성된 부분이 있어서 내용을 추가합니다. 이하부분에서 JSON 오브젝트라고 부른 정확히는 자바스크립트 객체 리터럴을 의미합니다. 그래서 function이 value에 포함되는 등의 내용은 JSON이 아니라 객체리터럴에만 해당되는 부분입니다.)

더욱이 편한 점은 여기서 value에 값만 넘어오는 것이 아니라 function자체도 넘어올 수 있다는 것이다. 넘겨받아서 function을 실행해 버릴수 있기 때문에 활용하기에 따라서 무척 편하게 할 수 있다. 난 이번 프로젝트에서 input값을 받으면서 validation 체크를 해야했는데 갯수가 너무 많아서 보기에도 않좋고 관리도 어려워서 JSON형태로 만들었었다. 쓰다보면 더 활용할 수 있겠지... ㅎㅎㅎㅎ

간단한 예제이다. JSON형태로 받아서 alert를 4번해주는 간단한 형태이다. 그냥 스크립트 실행자체를 JSON으로 받아서 할 수 있다는 걸 보여주기 위해서......

// javascript in Example
function printString(cnt) {
    alert(cnt);
}

window.onload = function() {
    var temp = "printString('First')";

    var printList = {
        "1": "printString('hi JSON')",   
        "2": temp,
        "3": "alert('second')",
        "4": "printString('Third')"
    }                        

    for (i = 1; i < 5; i++) {
        eval(printList[i]);
    }
}

위 소스가 예제에서 사용된 스크립트의 전부이다. printString(cnt)는 단순이 파라미터를 받아서 alert를 찍어주는 역할만 하고 printList라는 변수에 JSON형태로 담았다. 기본적으로 String이 들어가지만 변수도 들어간다는걸 보여주기 위해서 다양하게 넣어보였다. (하는 짓은 똑같다.)

다 받은 후에 for문을 돌려서 JSON객체를 eval로 감싸주면 그부분이 바로 실행이 된다. 예제를 돌려보면 alert창이 제대로 뜨는것을 볼 수 있다.

여기서는 for문을 돌리기 위해서 key부문에 숫자로 했지만 보통은 key이름을 주는 것이 더 일반적이다.

var Person = {
    "name": "Outsider",  
    "age": "29",
    "sex": "male",
    "fnc": "alert('second')"
}

이럴 경우는 당연히 Person.name하면 값을 가져올 수 있고 eval(Person.fnc)를 하면 alert메세지를 띄울수 있다.


덧) JSON의 마지막 엘리먼트 뒤에 콤마(,)를 넣지 않도록 주의하자. 마지막에 콤마가 들어가도 파이어폭스에서는 잘 돌아가지만 IE 7에서는 제대로 돌아가지 않으면서 에러메시지도 나오지 않는다. 콤마 하나때문에 눈빠지게 디버깅 하는 일은 없기를....

덧2) JSON을 솔직히 머라고 읽어야 하는지 모르겠다. 처음 들었을 때 "제이손"이라고 들어서 계속 그렇게 읽었는데 얼마전에 마이스페이스 API관련 영상을 보다보니 "지~손"이라고 읽는것 같던데... 흠....