[스터디] Ajax 마스터하기, Part 10: 데이터 전송에 JSON 사용하기

출처 : http://www.ibm.com/developerworks/kr/series/web/index.html
아래 내용은 위 출처의 기사의 일부를 복사 후 편집/수정한 것입니다.
단순히 개인적으로 알고자하는 내용만을 남긴 것이니, 자세한 정보는 위의 출처를 참조하세요.

선택할 수 있는 권한
여러분에게 선택권이 많이 주어지고 문제에 대한 옵션들이 많아질수록, 단 하나의 솔루션 보다는 문제에 대한 최상의 솔루션을 찾을 수 있는 더 좋은 기회들이 생기기 때문이다.

name/value 쌍과 XML
본 시리즈에서는 name/value 쌍이 적합한 상황과 XML을 사용하기에 적합한 상황에 대해 이미 다루었다. 거듭 말하지만, 여러분은 우선 name/value 쌍을 사용하는 것을 늘 생각해야 한다. 이것은 대부분의 비동기식 애플리케이션에서 생기는 문제들에 대한 가장 간단한 솔루션이고, JavaScript에 대한 기본적인 지식만 있어도 간단히 해결된다.

여러분은 XML로 전향하는데 제약이 없다면 대안 데이터 포맷을 사용하는 것에 관해 걱정할 필요가 없다. 확실히, XML 포맷의 입력을 요하는 서버 측 프로그램으로 데이터를 보낸다면, 데이터 포맷으로 XML을 사용해야 한다. 대부분의 경우, XML은 애플리케이션에 여러 정보 조각들을 보내야 하는 서버용으로 적합하다. 다시 말해서, XML은 Ajax 애플리케이션으로부터의 요청 보다는, Ajax 애플리케이션으로의 응답으로 더 일반적으로 사용된다.

JSON 기초
JSON으로는 JavaScript 객체로 표현된 데이터를 한 함수에서 다른 함수로, 또는 비동기식 애플리케이션의 경우, 웹 클라이언트에서 서버 측 프로그램으로 쉽게 전달할 수 있는 스트링으로 변형할 수 있다. 문자열이 약간 이상해 보이지만 JavaScript에 의해 쉽게 인터프리팅 되고, JSON은 name/value 쌍 보다 복잡한 구조도 표현한다. 예를 들어, 단순한 키와 값 리스트 대신, 배열과 복합 객체들을 나타낼 수 있다.

JSON 예제
JSON에서는 name/value 쌍이 다음과 같이 표현된다.

{ "firstName": "Brett" }

JSON은 여러 name/value 쌍들을 하나로 연결할 때 진가를 발휘한다. 우선, 다음과 같이, 여러 name/value 쌍으로 데이터 레코드를 생성할 수 있다.

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

신택스의 관점에서 보면 name/value 쌍 보다 나은 점이 없어 보이지만, 이 경우, JSON은 훨씬 더 사용하기 쉬우며, 가독성도 놀랍다. 예를 들어, 위 세 개의 값들은 같은 레코드의 일부이다. 중괄호는 그 값이 같은 커넥션을 갖고 있다는 것을 표시하고 있다.

값들의 배열
JSON에서는 다음과 같이 괄호를 사용하여 레코드를 그룹핑 할 수 있다.

{ "people": [   { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },   { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },   { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ]}

이해하기도 어렵지 않다. 이 경우, people이라는 하나의 변수가 있고, 값은 세 개의 아이템을 포함하고 있는 배열이며, 각각의 레코드에는 이름, 성, 이메일 주소가 있다. 위 예제는 레코드들을 모두 투입하는 방법과, 아이템을 괄호가 있는 싱글 값으로 그룹핑 하는 방법을 설명하고 있다.

{ "programmers": [   { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },   { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },   { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }  ], "authors": [   { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },   { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },   { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }  ], "musicians": [   { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },   { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }  ] }

여기에서 주목해야 할 점은 각각이 다수의 값을 내포하고 있는 많은 값들을 표현할 수 있는 당신의 능력이다. 또 하나 주목해야 할 점은 레코드의 name/value 쌍들은 다른 메인 항목(programmers, authors, musicians)에 따라 변한다는 것이다. JSON은 완전히 동적이고, JSON 구조 안에서 데이터를 표현하는 방식을 바꿀 수 있다.

또 한 가지 알아두어야 할 것은 JSON 포맷 데이터로 작업할 때 제약 조건이 없다는 점이다. 따라서, 어떤 것을 표현하는 방식을 바꿀 수 있고, 심지어는 같은 데이터 구조 내에서 같은 것을 다른 방식으로 나타낼 수도 있다

JavaScript에서 JSON 사용하기
JSON 포맷을 다룬 후라면, JavaScript에서 이것을 사용하는 것은 간단하다. JSON은 네이티브 JavaScript 포맷이고, JavaScript 내에서 JSON 데이터와 작업하기 위해 특별한 API나 툴킷이 필요 없다.

JSON 데이터를 변수에 할당하기
예를 들어, 새로운 JavaScript 변수를 만들고, JSON 포맷 데이터 스트링을 여기에 직접 할당한다고 해보자.

var people =   { "programmers": [     { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },     { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },     { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }    ],   "authors": [     { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },     { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },     { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }    ],   "musicians": [     { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },     { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }    ]   }

데이터에 액세스 하기
programmers 리스트의 첫 번째 엔트리의 성(last name)에 액세스 하려면, JavaScript에서 다음과 같은 코드를 사용해야 한다.

people.programmers[0].lastName;

인덱싱은 '0' 부터 시작한다. 따라서, 이것은 people 변수에 있는 데이터로 시작한다. 그리고 나서, programmers라고 하는 아이템으로 이동하고, 첫 번째 레코드([0])에 액세스 한다. 마지막으로, lastName 키의 값에 액세스 한다. 결과는 "McLaughlin"이라는 스트링 값이다.

people.authors[1].genre            // Value is "fantasy" people.musicians[3].lastName        // Undefined. This refers to the fourth entry, and there isn't one people.programmers.[2].firstName    // Value is "Elliotte"

JSON 데이터 수정하기
위에 나타난 점과 괄호 표기법을 사용하여 데이터에 액세스 하듯, 같은 방식으로 데이터를 쉽게 수정할 수 있다.

people.musicians[1].lastName = "Rachmaninov";

문자열로 변환하기
물론, 모든 데이터 수정은 텍스트 포맷으로 쉽게 변환할 수 없다면 가치가 없다. 이것 역시 JavaScript에서는 간단하다.

String newJSONtext = people.toJSONString();

이것이 다이다. 원하는 곳 어디에서나 사용할 수 있는 텍스트 문자열이 생겼으니, 이것을 Ajax 애플리케이션에서 요청 스트링으로 사용할 수 있다.

훨씬 더 중요한 것은, 어떤 JavaScript 객체라도 JSON 텍스트로 변환할 수 있다. 원래 JSON 포맷 스트링으로 할당된 변수로만 작업할 필요가 없다. myObject라는 객체를 변형하려면, 같은 종류의 명령어를 실행하면 된다.

String myObjectInJSON = myObject.toJSONString();