visualhhk My Blogqa: SON을 활용한 HTTPService 개발

http://www.json.org/json-ko.html

JSON을 활용한 HTTPService 개발

FLEX 어플리케이션을 개발할 때 FLEX 2 SDK나 Flex Builder 2를 사용하면 HTTPService와 WebService 방식으로 서버와 통신을 할 수 있다. 두 통신 방법의 공통점은 HTTP 프로토콜을 사용하는 것과 XML 포맷으로 통신을 한다는 것이다. 하지만 XML은 가독성이 좋은 반면, XML을 생성하는 서버와 생성된 XML을 사용하는 클라이언트에 많은 부하를 준다는 단점이 있다.
보통 XML을 파싱하여 사용할 때 DOM(Document Object Model) Parser를 이용한다. 이 DOM 파서는 메모리에 XML 구조를 트리 형태로 구성하여 자료를 찾아는 방법을 사용한다. 그렇기 때문에 검색을 위해 많은 양의 데이터 구조가 메모리를 차지하게 된다.
특히 Flash Player는 XML을 메모리에 올린 후 사용이 완료되어도 잘 지워주지 않기 때문에 작은 양은 별 문제가 없지만 많은 양의 데이터를 XML 포맷으로 받는다면 사용자의 메모리를 많이 차지하게 되어서 컴퓨터가 느려지는 요인이 되고 있다.
실제 다수의 프로젝트를 보면 XML을 이용한 대용량 전송에서 Flash Player가 메모리를 효율적으로 관리하지 못해 브라우저가 자동으로 같은 페이지를 로딩하게 해 Flash Player를 초기화 하는 방식으로 문제를 해결하는 것을 본적이 있다. 물론 XML 포맷이 나쁘다는 것은 아니다. 하지만 효율적인 사용을 위해 더 좋은 방법을 찾아보자는 것이다.
필자가 해결 방법으로 추천하는 것은 JSON(JavaScript Object Notation) 포맷을 이용하여 통신하는 것이다. 이제부터 JSON이 무엇이며 어떻게 Flex에서 사용할 수 있는지에 대하여 알아보고 Yahoo에서 제공하는 Open API를 연동하는 예제를 만들어 보도록 하겠다.

JSON은 무엇인가?
JSON은 경량의 데이터 교환용 포맷이다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부분을 기반으로 만들어 졌다. 보통 JavaScript나 ActionScript에서 객체나 배열을 선언할 때와 같은 방식으로 데이터를 포맷화 한다.
그리고 2006년 7월에 공식적으로 RFC 4627로 표준으로 승인되었다. JSON은 언어에 종속되지 않기 때문에 많은 언어들의 JSON Parser가 존재한다.
JSON은 두가지 구조를 기본으로 하고 있다.
1. name/value 형태 [Collection 타입]
대부분의 언어에서 object, record, struct, dictionary, hash table 등의 형태로 사용한다.
2. 값의 배열 형태 [Array 타입]
대부분의 언어에서 array, vector, list 등의 형태로 사용한다.

JSON에서 사용되는 타입에 대해 하나씩 알아보도록 하자.
Object
Object는 name/value 형태로 정의한다. 정의 방법은 “{“ 시작하고 “}”로 끝내어 표현한다. 그리고 각 name 뒤에 “:”을 붙이고 value을 입력하고 “,”로 값의 쌍을 구분한다.

{ name:”홍길동”, age:30, address:”서울시”}

object 구조도

Array
Array는 값들의 순서화된 배열이다. 정의 방법은 “[“ 시작하고 “]”로 끝내어 표현한다. 그리고 “,”로 값들을 구분한다.

[1,2,3,4,5,6,7,8,9]

array 구조도

Value
Value는 큰 따옴표 안에 string, number, true, false, null, object, array 등이 올 수 있다.

value 구조도

String
String은 큰 따옴표 안에 둘러 싸인 유니코드 문자들의 조합이며 (역슬러시) 문자도 지원한다.

string 구조도

Number
Number는 10진수만 사용한다. 8진수, 16진수는 사용되지 않는다.

number 구조도

JSON의 장점
1. 가독성이 좋다.
2. 데이터 크기가 작다.
3. 파싱이 빠르다.
4. 메모리 사용량이 적다.
5. RFC 표준으로 승인되었다.
6. 객체 구조를 쉽게 표현 할 수 있다.
7. 많은 언어가 지원하고 있다.

JSON을 사용하기 위한 Core Library 사용 방법
FLEX 2에서 JSON을 사용하려면 JSON을 파싱해 주는 관련 라이브러리가 필요하다. Adobe Labs에서 Core Library 안에 JOSN Parser를 제공해주고 있다. Adobe Labs에서 라이브러리를 다운 받고 프로젝트에 Library Path에 잡아주면 JSON 포맷을 사용할 수 있게 된다. 서버와 데이터 통신하기 앞서 기본 API와 간단한 예제를 살펴보도록 하겠다.

JSON API 사용법
1. JSON 클래스를 임포트한다.
- import com.adobe.serialization.json.JSON;

2. 객체를 JSON을 이용하여 작업한다.
- 객체를 JOSN 포맷으로 변경
var json:String = JSON.encode(obj);
- JSON 포맷을 객체로 변경
var obj:Object = JSON.decode(json);

<코드 1> JSON Example

http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="initApp()">

<코드 1>의 내용은 간단히 사람 이름과 나이를 객체에 저장하고 JSON 포맷으로 바꾸고 바꾼 내용을 출력하고 바꾼 내용을 다시 객체로 만들어 이름과 나이를 출력하는 예제이다.
<결과 1> JSON 간단 에제

{"name":"홍길동","age":30}
홍길동
30
<결과 1>는 <코드 1>의 결과 출력이다. 첫번째 줄이 JSON 포맷 형태이고, 나머지는 객체로 만든 후 이름과 나이를 출력한 결과이다.

JSON을 사용하여 Yahoo Open API 연동하기
간단히 JSON Parser를 사용하는 것을 해보았으니 실제 서버에 데이터를 JSON 포맷 형식으로 가져와서 객체화 시켜서 데이터 그리드에 출력하는 예제를 만들어 보도록 하겠다.

JSON으로 Yahoo API 연동 예제 [ 메모리 측정 추가 ]

서 버 프로그램을 배우는 것이 아니기 때문에 Open API를 사용하겠다. Open API는 웹 사이트에서 자신들의 서비스를 개발자가 사용할 수 있게 열어주는 서비스이다. 국내에는 Naver Open API가 있고 국외에는 Google, Yahoo, Amazon 등이 있다.
우리는 Yahoo의 이미지 검색 Open API에서 검색을 하여 검색된 결과를 데이터 그리드에 출력해보도록 하자.
우선 해야할 것은 Yahoo 웹사이트에 가서 Application ID를 발급 받아야 한다. <참고 사이트>에서 “Yahoo Application ID 발급 페이지”로 가서 Application ID를 발급 받는다.
그리고 Flex 어플리케이션에서 HTTPService로 서버에서 JSON 포맷으로 데이터를 가져 온다. HTTP Service의 url은 이미지 검색이기 때문에 다음과 같이 설정한다.

http://api.search.yahoo.com/ImageSearchService/V1/imageSearch
<참고 사이트>에서 “Yahoo 이미지 검색 매뉴얼”을 참고하면서 파라미터를 입력해주고 서버로 데이터를 요청한다.
서버로부터 JSON 포맷 형식의 데이터를 받으면 JSON Parser로 객체를 만들고 데이터 그리드의 데이터 프로바이더에 객체를 넣는다.
private function onJSONLoad(event:ResultEvent):void
{
//서버로 받아온 JSON 결과를 파싱한다..
var obj:Object = JSON.decode(event.result as String);
//JSON을 파싱한 결과를 Grid에 적용시킨다.
grid.dataProvider = obj.ResultSet.Result;

//Flash 사용 메모리를 측정한다.
memory.text = System.totalMemory + "Byte";
}
실제 구동 예제는 첨부된 파일을 실행해보면 될 것이다. 첨부된 파일을 실행하기 전에 Yahoo에서 발급 받은 Application ID는 수정해 주어야 한다.
이제까지 XML 포맷의 단점을 보완하는 JSON 포맷에서 대해 알아보고 실제 예제를 만들어 보았다. 실제 작동시켜 보면 XML 포맷과 속도와 성능 그리고 메모리 사용량의 차이를 알 수 있을 것이다. 현재 Ajax에서도 XML 포맷보다는 JSON 포맷을 선호하고 있고 필자 개인적으로도 통신 포맷은 JSON이 최적이라고 생각한다. Flex로 구현하였는데 데이터가 많다거나 성능을 높여야 한다면 JSON 포맷을 머리 속에서 한번 떠올려보는 것도 괜찮을 것이다.