한빛출판네트워크

제공 : 한빛 네트워크
저자 : Jack Herrington
역자 : 김탁용
원문 : Building Mashup-Friendly Sites in Rails

동적 Script 태그 사용하기

해결책은script 태그 ‘src’에 서비스 URL을 넣어 이를 동적으로 DOM에 추가하는 것이다. 바뀌어야 하는 것은 단지 ‘load’ 코드뿐이다. [리스트 10]에 나와있다.

[리스트 10] Ajax 대신 script 태그 사용하기

function load() {
 if (GBrowserIsCompatible()) {
 map = new  GMap2(document.getElementById("map"));

    var elScript =  document.createElement("script");
   elScript.src =  "http://0.0.0.0:3000/photos/jscallback";
   document.body.appendChild( elScript );
   }
   }

여기엔 트릭이 있는데, Ajax는 오직 같은 도메인에 있는 서버에만 접근할 수 있다. 하지만 ‘script’ 태그는 어디든 가리킬 수가 있다. 그래서 이 코드에 어떤 도메인이나 페이지를 넣어도 (0.0.0.0.:3000 이 아닌, 어떤 것을 가져올 수 있는URL이라면) 이것은 여전히 작동할 것이다.
하지만 나는 사용자들이 script 태그를 만드는 모든 부분에 대해 알기를 원하지 않기 때문에 계속 진행해 나아가서, 코드를 사용하는 사람들이 더 쉽게 쓸 수 있도록 구글처럼 모든 코드를 라이브러리로 숨길 것이다. 간단한 라이브러리가 [리스트 11]에 있다.

[리스트 11] photo 라이브러리

var g_photos_cb = [];

function  photos_callback( photos ) {
   while( g_photos_cb.length > 0 ) {
   var cb = g_photos_cb.pop();
   cb( photos );
   }
   }
   function photos_get( cb  ) {
   g_photos_cb.push( cb );
   var elScript =  document.createElement("script");
   elScript.src =  "http://0.0.0.0:3000/photos/jscallback";
   document.body.appendChild( elScript );
   }

라이브러리 사용자들은 photos_get을 호출하는데 이 때 photos 데이터를 가져오고, 이를 가지고 무언가 처리를 할 함수를 같이 전달한다. 동작은 매우 단순하다. 그것은 단지 콜백을 받아서 이를 배열에 넣고 앞에서 한 것처럼 script 태그를 똑같이 만든다. 콜백으로는 photos 데이터에 대해 다르게 사용자-정의된 콜백함수들이 호출될 것이다.

이것을 사용해보기 위해 마지막으로 한번 더 load 메소드를 바꾸고, 원래의 photos_callback 함수는 코드에서 삭제한다. 수정된 코드가 [리스트 12]에 있다.

[리스트 12] photo 라이브러리 이용

function load() {
 if (GBrowserIsCompatible()) {
 map = new GMap2(document.getElementById("map"));
 
 photos_get( function( photos ) {
 for( var b = 0; b < photos.length; b++  ) {

       if ( b == 0 )
   map.setCenter(new GLatLng(  photos[b].attributes.latitude,
   photos[b].attributes.longitude ),  13);

       map.addOverlay( buildMarker(  photos[b].attributes.title, 
   photos[b].attributes.url,  photos[b].attributes.description,
   photos[b].attributes.latitude,  photos[b].attributes.longitude ) );
   }
   } );
   }
   }

여기에 라이브러리의 한 가지 문제점이 있는데, Internet Explorer는 페이지가 완전히 로드되어지기 전에 body 태그에 여러분이 태그들을 추가한 곳을 페이지에서 날려버리는 이상한 취미가 있다. 이걸 피하기 위해 IE에도 견고해지도록 코드를 살짝 수정할 것이다. 매쉬업하기 편한 photos 라이브러리 최종 버전이 [리스트 13]이다.

[리스트 13] 견고해진 photos 라이브러리

var g_photos_cb = [];
 var g_photos_loaded =  false;

window.addEventListener(  "load", photos_onload );

function photos_onload()  {
   photos_process_requests();
   g_photos_loaded = true;
   }

function  photos_process_requests() {
   if ( g_photos_cb.length > 0 )
   {
   var elScript =  document.createElement("script");
   elScript.src =  "http://0.0.0.0:3000/photos/jscallback?d="+(new Date().valueOf());
   document.body.appendChild( elScript );
   }
   }

function  photos_callback( photos ) {
   while( g_photos_cb.length > 0 ) {
   var cb = g_photos_cb.pop();
   cb( photos );
   }
   }

function photos_get( cb  ) {
   g_photos_cb.push( cb );
   if ( g_photos_loaded ) photos_process_requests();
   }

코드는 윈도우에서 ‘onload’ 메시지에 latch를 걸어둔다. 그렇게 하면, script 태그들은 onload 메시지가 보내지는 단 한번만 추가된다. onload 메시지가 이미 보내졌다면, 서버에 바로 request만 보낸다.

이렇게 완성된 photos 라이브러리는 매우 매쉬업하기 좋은 웹 서비스 인터페이스이다. 누구든 메모장과 브라우저만 있다면 세계 어디에 있는 레일즈 서버에서든 데이터를 가져올 수 있는 자바스크립트를 작성할 수 있을 것이다.

몇 가지 팁과 제안

나는 이와 같은 인터페이스들을 작성하면서, 여러분에게 몇 가지 수고를 아낄 수 있는 몇 가지를 추천해주고 싶다. 첫 번째는, 기본적인 Dynamic HTML로 인터페이스를 작성하라는 것이다. Prototype, Dojo, Yahoo! UI, 또는 다른 어떤 것들 없이. 이런 라이브러리들은 서로에 대해 양립할 수가 없는데 여러분은 여러분의 인터페이스가 누군가로부터 배제되기는 원하지 않을 것이다. 다른 중요한 것은 이런 종류의 인터페이스가 여러분에게 진정 필요한 것인지 아닌지 결정하라는 것이다. 이런 종류의 인터베이스는 여러분의 대상 고객이 블로거나, HTML/JavaScript 코더, 서버환경을 제어할 수 없는 사람들에게는 이상적이다. 그러나 전통적인 SOAP, XML/RPC, REST, JSON APIs를 범용성 API로 대체하는 게 항상 좋은 것은 아니며, 고객이 서버 코드를 작성하는 경우엔 전통적 API들이 더 좋을 것이다.

한 가지 더 되새겨야 할 것은 이런 인터페이스는 read-only API로 만드는 게 좋다는 것이다. script 태그는 단지 GET방식만 되고, POST 방식이 되지 않으니 쓰기용 API를 만드는 것은 특히나 쉬운 일이 아니다. 비록 그것이 가능할 지라도 script 태그를 사용해 권한을 처리하는 것은 직관적 이지가 않다.

결론

부디 여러분과 다루어본 여기 예제가 어떻게 API를 페이지-레빌의 코더들이 매쉬업하기 좋도록 만들 수 있는가를 보여주었기를 바란다. 매쉬업하기 좋은 API를 만드는 것에 대해 영감이 떠오른다면 이 아티클 끝에 있는 코멘트를 통하면 이야기할 수 있다. 여러분의 제안과 여러분의 API를 사용하는 좀더 많은 사람들로부터 얻은 것에 대해 들을 수 있기를 기대한다.

---

저자 Jack Herrington은 20년이 넘는 경력을 지닌 중견 소프트웨어 엔지니어이며, 세 권의 책을 썼다: Code Generation in Action, Podcasting Hacks, PHP Hacks . Jack은 또한 다양한 범위의 기술을 다루는 30여편의 아티클의 저자이다.

---

역자 김탁용님은 연세대학교 컴퓨터과학과를 졸업하고 현재 대한항공 정보시스템실에서 근무하고 있습니다. 무엇인가 새로운 것을 만드는 일, 그로 인해 다른 사람들에게 도움이 되는 일에 관심이 많아 소프트웨어 개발을 계속 하고 있습니다.