jquery 를이용하여웹위젯 (Web Widget) 을만드는방법 원제 : How to build a web widget (using jquery) http://alexmarandon.com/articles/web_widget_jquery/ Published on 15 June 2010, updated on 23 May 2012 번역 : SYS4U 김형석 소개 (Introduction) London s Design Museum에관련된작업을진행하면서몇가지웹위젯을작성하였는데, 그과정에서몇몇유용한내용들을알게되었다. 또, 웹위젯에대한유용한정보들은대부분인터넷에서찾아볼수있지만, 아쉽게도 jquery를이용하여웹위젯을만드는상세한내용을접하지는못했었다. 그리고그것이이글을쓰기로결심한이유가되었다. 이글에서는순수하게웹위젯에대한기술만을다룰것이다. 그러므로 JavaScript와 JQuery, 그리고웹개발방식에대한이해가있어야이글을읽는데무리가없을것이다. 이글이다루고자하는내용은다음과같다. : - 위젯코드가위젯을사용하는상이한웹페이지들에서뜻하지않게엉망이되어버리지 않도록하는방법 - 외부 CSS 와 Javascript 파일을동적으로로딩하는방법 - JSONP 를이용하여브라우저의 single-origin policy( 도메인제한 ) 을회피하는방법 아직은위의내용이무슨말인지몰라도걱정할필요는없다. 앞으로웹위젯을만드는과정에서 어떤기술들이사용되게될지상세히다룰테니말이다. 웹위젯이란무엇인가? 웹위젯은웹페이지로전송되는데이터를화면에표시하는데에사용되는 웹페이지의한조각 (a chunk of web page) 이며컴포넌트이다. 일반적으로웹위젯은 HTML, CSS, Javascript 이섞여있는다소복잡한모양인경우가많다. 웹위젯제작자들은이러한복잡성을감추고, 그리하여웹위젯사용자들이가능한한손쉽게위젯을웹페이지내에추가할수있기를원한다.
위젯사용하기 (Widget Usage) 이글에서다룰웹위젯들은단두개의 HTML 태그를이용하여웹페이지에추가될수있도록 작성될것이다. 그것들은아래에서보듯하나의스크립트 (script) 태그와, 페이지내에서위젯을 추가할곳을명시할컨테이너태그 ( 일반적으로는 div 가될것이다 ) 들이다. <script src="http://example.com/widget/script.js" type="text/javascript"></script> <div id="example-widget-container"></div> 정말이두태그만으로웹페이지에웹위젯을추가할수있게된다. 스크립트태그에입력되어 있는코드는위젯을구성하는여러가지자산 (asset) 들을다운로드하고컨테이너안의내용을갱 신하게될것이다. 더단순해질수는없나? 기술적으로만본다면, 위젯코드내에서 document.write() 코드를이용하여위젯이담길컨테이너를명시하지않고사용할수도있다. 몇몇위젯들이이런방식을이용하고있고, 그래서스크립트태그만으로위젯을사용할수있도록코드의양을줄여주기는한다. 하지만, 그다지권장할만한방법이아니라고생각한다. 그이유는, - document.write() 는페이지가완전히로딩된다음에는호출될수가없다. 이이야기는브라우저가스크립트태그를인식하면곧바로위젯코드가실행되어야한다는것을의미한다. 보통위젯코드는서버로부터데이터를가져오는데에사용되는데, 이럴경우페이지로딩이위젯코드의데이터수신작업으로인해잠시중단되게되고, 이로인해사용자가페이지로딩시간이오래걸린다고생각할수도있다. - 페이지내에서위젯을담을컨테이너태그를따로사용하게되면, 스크립트태그를필요한아무곳에나입력하여도된다. 즉, 일반적인스크립트사용권고안처럼스크립트태그를페이지의맨아래에둘수도있다. 코드고립시키기 (Code Isolation) 어떤페이지에서어떤자바스크립트가사용될지예측할수없기때문에, 다른자바스크립트코드와동시에사용되어도충돌 (clash) 이발생하지않도록해야만한다. 이를위해, 모든위젯코드를익명펑션 (anonymous function) 내에입력한뒤에이익명펑션을호출하는방식을이용할것이다. 익명펑션내에작성된코드에서사용되는모든변수들은외부의변수와는아무런관계없이사용할수있게된다. 다음은이기법을이용한예제이다.
var foo = "Hello World!"; document.write("<p>before our anonymous function foo means '" + foo + '".</p>'); (function() { // The following code will be enclosed within an anonymous function var foo = "Goodbye World!"; document.write("<p>inside our anonymous function foo means '" + foo + '".</p>'); )(); // We call our anonymous function immediately document.write("<p>after our anonymous function foo means '" + foo + '".</p>'); 결과는다음과같다. Web Widget Tutorial Example 1 - Code isolation Before our anonymous function foo means 'Hello World!". Inside our anonymous function foo means 'Goodbye World!". After our anonymous function foo means 'Hello World!". 위에서볼수있듯이, 익명펑션내에서사용된 foo 변수는전역 (global) foo 변수와충돌없이 사용할수있다. 변수를선언할때는항상 var 를사용하라 외부 javascript 에의해위젯내의변수가간섭을받는것을막기위해, 변수를선언할때에는반드시 var 지시어를사용해야한다. 그렇지않고변수에값을할당하게되면, 위젯내의변수가아닌외부의변수를변경하게되는것이다. 변수를선언하고사용할때에는언제나 var 지시어를사용하는것이바람직한습관이다. 자바스크립트라이브러리로딩 (Loading Javascript Libraries) 위젯을작성하는데에많은양의자바스크립트코드가필요하게될것이라면, 보통 jquery 와같 은자바스크립트라이브러리를사용하게된다. 하지만, 위젯을사용하는페이지내에 jquery 가 로딩되어있다는보장이없기때문에, 필요한경우 jquery 를동적으로로딩하도록해야한다. (function() { // Localize jquery variable
var jquery; /******** jquery 가로딩되지않았다면동적으로로드한다. *********/ if (window.jquery === undefined) { var script_tag = document.createelement('script'); script_tag.setattribute("type","text/javascript"); script_tag.setattribute("src", "http://code.jquery.com/jquery-latest.min.js "); if (script_tag.readystate) { script_tag.onreadystatechange = function () { // 예전버전 IE 를위해 if (this.readystate == 'complete' this.readystate == 'loaded') { scriptloadhandler(); ; else { // Other browsers script_tag.onload = scriptloadhandler; (document.getelementsbytagname("head")[0] document.documentelement).appendchild(script_tag); else { // The jquery version on the window is the one we want to use jquery = window.jquery; main(); /******** Called once jquery has loaded ******/ function scriptloadhandler() { // Restore $ and window.jquery to their previous values and store the // new jquery in our local jquery variable jquery = window.jquery.noconflict(true); // Call our main function main(); /******** Our main function ********/ function main() { jquery(document).ready(function($) { // We can use jquery here ); )(); // We call our anonymous function immediately 먼저, jquery를담고있을지역변수하나를작성하였다. 그다음, jquery가페이지내에추가되어있는지확인하는데, 이는 jquery가페이지에이미추가되어있는경우또다시로딩하지않도록하기위함이다. jquery 라이브러리를로딩하기위해, jquery 최신소스를다운받을수있는 URL 을이용하는스크립트엘리먼트를작성한다. 그뒤, 헤드 (head) 태그가있다면헤드태그에, 없다면문서 (document) 의맨마지막에이스크립트엘리먼트를추가 (appendchild) 한다. 작성하는위젯코드에서 jquery 라이브러리를사용하려면, jquery 라이브러리가모두로딩되어있는지확인해야한다. 여기서는 scriptloadhandler라는펑션을이용하는데, 이펑션은스크립트
의로딩이완료되면딱 1회실행되도록되어있다. 대부분의브라우저 (Firefox, Safari, Opera, Chrome 등 ) 들에서는단순히 script 엘리먼트의 onload 속성에이펑션을할당하면된다. 인터넷익스플로러 9의경우에는약간다른방법을이용할때가있는데, 여기서는 onreadystatechange 핸들러를등록하여사용하고있다. 이 onreadystatechange 핸들러는 ready state가 complete나 loaded 상태가되면아래작성해둔 main 펑션을호출할것이다. 왜 IE 의 onreadystatechange 핸들러에서는두가지상태를확인하는가? 스크립트가로딩되면, 인터넷익스플로러는 readystate 를 complete 나 loaded 로변경하는데, 이것은페이지가어떤방식으로로딩되었는지에영향을받는다. 페이지가캐시 (Cache) 로부터로딩되는경우에는상태가 complete 로변경되고, 네트워크에서다운로드되는경우에는 loaded 로변경된다. 그러므로, 만약 loaded 상태에대해서만확인한다면, 링크를통해다른페이지로이동했다가 뒤로가기 버튼을이용하여원래의페이지로돌아오는경우에정상적으로동작하지않게된다. 작성된 scriptloadhandler 펑션내에서는 jquery 라이브러리가다른자바스크립트라이브러리나 다른버전의 jquery 와동시에사용될수있다는것을고려해야한다. 그러므로다음코드한줄 은주의를기울여볼만하다. jquery = window.jquery.noconflict(true); 이행이실행되기전이라면, window.jquery는이위젯코드내에서지정한 jquery를가리키게되고, 이로인해외부에서선언한예전버전의 jquery를덮어쓰게될수도있다. Window.jQuery.noConflict(true) 를호출함으로써 window.jquery를원래페이지가로딩될때지정된 jquery 객체로변경하게되고, 대신새로로딩한 jquery를리턴하여우리의익명펑션내의 jquery 변수에할당하게된다. 동시에 $ 변수도예전것으로되돌리는데, 이덕분에 Prototype과같은또다른라이브러리를아무문제없이사용할수있게된다. 마지막으로, scriptloadhandler가현재버전의 jquery를이용하는 main 펑션을호출하여위젯객체를생성하게된다. 이제기초공사를마쳤으니, 가장재미있는부분을다루기로하자. 데이터로딩하기 (Loading data from our site) 지금작성하고있는위젯은단순한 HTML을웹페이지에출력하는것이목적이기때문에, XML 이나 JSON과같은중계데이터형식이필요하지않다. 그저서버로부터 HTML 데이터를수신한뒤, 이 HTML을이용하여위젯의내용을갱신하도록할것이다. 지금작성하고있는위젯이뉴스의헤드라인목록을보여주는것이라고하자. 서버는다음과같
은 HTML 코드를출력할것이다. <ul> <li><a href="http://example.com/a-first news">a first news</a></li> <li><a href="http://example.com/another-news">another news</a></li> <li><a href="http://example.com/an-interesting-news">an interesting news</a></li> </ul> 만약위젯을포함하는페이지 ( 호스트페이지 ) 가동일한서버에서서비스된다면, 일반적인 AJAX 호출 ( 굳이따지자면이경우에는 AHAH - Asynchronous HTML And HTTP) 만으로 HTML 데이터를얻어 DOM을갱신한수있다. 하지만일반적으로웹위젯은웹위젯이사용되는페이지와데이터를얻어오는페이지가다를수있고, 이경우브라우저가다른도메인으로의 AJAX 요청을허용하지않게된다. 이러한보안규제를 Same Origin Policy라고한다. 다행히, 이규제를우회할방법이존재한다. 브라우저는스크립트태그가다른도메인의스크립트를포함 (include) 하는것을허용한다. 결국이방법을이용한 JSONP라는간단한기법으로데이터를얻어올수있다. JSONP의기본개념은, 펑션속에감싸져 (wrapped) 있는 JSON Data를가져오는 script 태그를생성하여사용하는것이다. 만약다음과같은 script 태그를작성하였다면 : <script type="text/javascript" src="http://example.com/widget/data.js"></script> http://example.com/widget/data.js 로부터전송되는내용은아래와같이보일것이다. our_callback( {"foo": 42, "bar": 23 ) 그러면아래와같이 our_callback 펑션을선언하고 JSON 데이터를파라미터로받도록한다. function our_callback(json_data) { // do stuff with json_data 다행인점은, jquery가 JSONP를내부적으로지원한다는것이다. jquery는우리를위해스크립트태그와콜백펑션 (Callback Function) 을생성하고, 이콜백펑션의이름을파라미터로전송하는일도해준다. 여기서우리가관심을갖는유일한데이터는위젯컨테이너에추가할 HTML 조각이고, 서버측에서는다음과같이콜백펑션과 JSON 데이터를이용하여데이터를전송하게될것이다. callback_name_generated_by_jquery( {"html": "<ul><li>(...)</li></ul>" )
Ruby on Rails 를이용하여서버에서 JSONP 를작성하는예제는다음과같다. # Store HTML in a variable rather than returning in to the browser html = render_to_string # Build a JSON object containing our HTML json = {"html" => html.to_json # Get the name of the JSONP callback created by jquery callback = params[:callback] # Wrap the JSON object with a call to the JSONP callback jsonp = callback + "(" + json + ")" # Send result to the browser render :text => jsonp, :content_type => "text/javascript" 클라이언트코드는일반적인 AJAX 호출을통해 JSON 데이터를받는것과유사하다. var widget_url = "http://example.com/wiget_data.js?callback=?" $.getjson(widget_url, function(data) { $('#example-widget-container').html(data.html); ); AJAX 요청을전송할때, 반드시 callback=? 과같은파라미터문자열을 URL 에포함하여야한다. 그렇지않으면서버가콜백펑션의이름을받을수없게된다. 이제서버에서 HTML 을수신할수있게되었고, 그것을웹페이지의위젯컨테이너에삽입할수 있게되었다. 이제남은마지막작업은지금까지만든위젯에스타일을추가하는것이될것이다. CSS 로드 (Loading CSS) 스타일시트를로딩하기위해다음과같이 javascript 를이용하여 link 태그를생성하면된다. var css_link = $("<link>", { rel: "stylesheet", type: "text/css", href: "style.css" ); css_link.appendto('head');
통합하기 (Putting things together) 지금까지웹위젯을작성하기위해조금씩다른내용들을보아왔다. 이제이것들을하나로합쳐 서간단한예제를만들차례이다. 이모든내용을통합한 Javascript 코드는다음과같다. (function() { // Localize jquery variable var jquery; /******** Load jquery if not present *********/ if (window.jquery === undefined window.jquery.fn.jquery!== '1.4.2') { var script_tag = document.createelement('script'); script_tag.setattribute("type","text/javascript"); script_tag.setattribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); if (script_tag.readystate) { script_tag.onreadystatechange = function () { // For old versions of IE if (this.readystate == 'complete' this.readystate == 'loaded') { scriptloadhandler(); ; else { script_tag.onload = scriptloadhandler; // Try to find the head, otherwise default to the documentelement (document.getelementsbytagname("head")[0] document.documentelement).appendchild(script_tag); else { // The jquery version on the window is the one we want to use jquery = window.jquery; main(); /******** Called once jquery has loaded ******/ function scriptloadhandler() { // Restore $ and window.jquery to their previous values and store the // new jquery in our local jquery variable jquery = window.jquery.noconflict(true); // Call our main function main(); /******** Our main function ********/ function main() { jquery(document).ready(function($) { /******* Load CSS *******/ var css_link = $("<link>", { rel: "stylesheet", type: "text/css",
href: "style.css" ); css_link.appendto('head'); /******* Load HTML *******/ var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?"; $.getjson(jsonp_url, function(data) { $('#example-widget-container').html("this data comes from another server: " + data.html); ); ); )(); // We call our anonymous function immediately 그리고이위젯과통신하기위한서버코드는다음과같다.(Python 을이용하여작성된 CGI 스크 립트이다.) #!/usr/bin/python import cgi params = cgi.fieldstorage() print "Content-Type: text/javascript\n" if not 'callback' in params: print "ERROR: you must pass a callback parameter" else: jsonp = "%s ( {'html': '<strong>hello World!</strong>' )" print jsonp % params['callback'].value 물론, 실제사용될웹위젯은, 클라이언트측과서버측모두에서, 훨씬더복잡할것이다. 하지 만, 웹위젯에대한기본적인내용들에대해서이해했으리라믿는다. 호스트페이지내의에러처리 (Dealing with errors on host pages) 지금까지작성한코드는보통정상적으로동작할것이지만, Shyam Subramanyan이보고한바대로, main 펑션내에서 jquery(document).ready를이용하는데에문제가발생할수도있다. 이것은호스트페이지에서 jquery를로딩한상태에서 jquery(document).ready 가로채 (hook) 호출한경우발생한다. 이렇게호스트페이지내의 jquery 가로채기 (jquery hook) 로인해오류가발생한경우에는위젯내의 main 펑션은실행되지않게된다.
Shyam이제시한해결책은, 호스트페이지가위젯을호출할준비가되어있는지를확인하는코드를추가하는것이다. 전체 document가준비가되기를기다리는대신에, 관련된 DOM 엘리먼트나위젯이사용하는자바스크립트오브젝트들이준비되었는지확인하는것인데, 이코드는다음과같다. (Listly라는사이트에서이용되고있는코드이다.) Listly.listlyReady = function () { // Check for presence of required DOM elements or other JS your widget depends on if (Listly.jQuery.listlybox && ListlyAuth) { window.clearinterval(listly._readyinterval); // Make stuff here ; // This our new main function function main () { Listly._readyInterval = window.setinterval(listly.listlyready, 500); Shyam 에의하면, 이코드는 Listly 사이트에서정상적으로동작했고, 호스트페이지가무겁거나 오류가있는경우에위젯이훨씬더빨리로딩된다고하였다. 결론 (Conclusion) 매우많은사람들이플러그인들 (plugins) 을로딩하는방법에대해물어보았지만, 아쉽게도나는그에대한완벽한대답을알고있지는못하다. 개인적으로는익명펑션내부에스크립트코드와함께작은플러그인소스코드를추가함으로써이문제를해결하긴했지만, 이런방법은 crossdomain에대한고려를하지않은플러그인 (plugin) 으로인해호스트페이지의처리가방해 (interfere) 받을수있음도고려해야한다. 자주질문되는또다른내용은, 위젯을설정가능하게 (configurable) 만드는방법에대한것이다. 코드내주석에서제안한것과같이, 마크업 (markup) 을최소화하기위해, 위젯을호출하는 URL 에쿼리스트링 (query string) 을추가하고, 스크립트태그에 ID를추가하면된다. 이렇게함으로써, 스크립트내에서자기자신의스크립트태그에접근할수있고, 스크립트태그의 URL에포함되어있는쿼리스트링의정보를분석하여자동으로설정할수있게된다. 혹은좀더직접적인방법으로, 작성된위젯의임베드 (embed) 코드에보이지않는마크업 (invisible markup) 을추가할수도있다. SNS에서제공하는공유버튼들이이방식을이용한다. ( 후략 )