hacking/web2008/08/06 14:08

전문가다운 Ajax 응용 프로그램 개발, Part 1: Prototype 자바스크립트 라이브러리와 script.aculo.us 사용하기

크리에이티브 커먼즈 라이선스
Creative Commons License
한국 developerWorks에 기고한 번역문

원문: Develop Ajax applications like the pros, Part 1: Using the Prototype JavaScript library and script.aculo.us
번역: 전문가다운 Ajax 응용 프로그램 개발, Part 1: Prototype 자바스크립트 라이브러리와 script.aculo.us 사용하기

developerWorks 특유의 장황한 제목이 인상적이다.
장황한 제목은 무시하고... 내 맘대로 제목을 붙여본다면...
프로토타입과 스크립타큘러스로 배우는 AJAX 프로그래밍 입문.



'hacking > web' 카테고리의 다른 글

씽크프리 노트를 원격 블로깅 도구로 활용하기  (2) 2008/08/13
dojo by example(6) - 이벤트 시스템  (2) 2008/08/10
전문가다운 Ajax 응용 프로그램 개발, Part 1: Prototype 자바스크립트 라이브러리와 script.aculo.us 사용하기  (0) 2008/08/06
dojo by example(5) - 애니메이션/효과  (0) 2008/08/02
Ajax 성능 도구  (0) 2008/07/30
dojo by example(4) - 유틸리티 함수  (0) 2008/07/29
Posted by iolo
TAG Ajax, DeveloperWorks, JavaScript, Prototype, scriptaculous
Trackback 0 Comment 0
hacking/web2008/04/12 16:03

Ajax와 XML: Ajax로 table 다루기

크리에이티브 커먼즈 라이선스
Creative Commons License
한국 developerWorks에 기고한 번역문

원문: Ajax and XML: Ajax for tables
번역: Ajax와 XML: 테이블을 위한 Ajax

흠... 급하게 번역한 티가 팍팍 난다-.-;;; 테이블을 위한 Ajax라니...-.-;;;;
제목은 "Ajax로 table 다루기 정도"로 바꾸면 좋겠다.

아무튼 prototype.js를 사용해서 tab, table, glider(slide-in effect)  등의 자주 쓰이는 기법을 (미주알 고주알) 정말 알기 쉽게 설명하고 있다.(내가 그랬다는 얘기가 아니고 원저자가 그랬다는 얘기다)

AJAX라는 말만 들어봤지 실제로 써본적은 없는... 개발자라면...(이런 분들 꽤 많다) 이 기회에 한 번 맛이라도 봐두자. AJAX를 나름 좀 써봤다는 분들에게도 되새겨서 나쁠 것이 없는 "패턴"들이다.

'hacking > web' 카테고리의 다른 글

자바스크립트의 encodeURI와 친구들~  (3) 2008/05/13
Ajax 오버홀, Part 1: Ajax와 jQuery로 기존 사이트 개선하기  (0) 2008/04/12
Ajax와 XML: Ajax로 table 다루기  (1) 2008/04/12
IE8에 대처하는 우리의 자세...  (2) 2008/03/15
dojo 1.1 beta 릴리즈!  (0) 2008/02/19
dojo에서 $ 쓰기  (0) 2007/12/04
Posted by iolo
TAG Ajax, DeveloperWorks, Prototype
Trackback 0 Comment 1
hacking/web2007/11/16 00:16

prototype사용자를 위한 dojo 입문 (4)

크리에이티브 커먼즈 라이선스
Creative Commons License
제 4 장 이벤트

javascript로 심각한 코딩을 해본 사람이라면 누구나 사소한 브라우져들간의 차이에 좌절한 경험이 있을 것이다. 문제는 prototype이나 dojo같은 멋진 넘들이 넘쳐나는 세상에도 여전히 과거의 코드에 매여있는 사람들이 있다는 것이다.
 
일단, 이런 HTML이 있다고 생각하자:

...
<button id='okBtn'>OK!</button>
...

* DOM
var okBtn = document.getElementById('okBtn');
if (okBtn.addEventListener) {
  okBtn.addEventListener('click', ok_onclick, true);
} else {
  okBtn.attachEvent('onclick', ok_onclick);
  okBtn.captureEvents(Event.CLICK);
}
function ok_onclick(e) {
  if (!e) e = window.event;
  if (e.keyCode) code = e.keyCode;
  else if (e.which) code = e.which;
  ...
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}

* prototype
Event.observe($('okBtn'), 'click', function(event) { ... } )

* dojo
dojo.connect(dojo.byId('okBtn'), 'onclick', function(event) { ... } )

결정적인 차이는(?!) prototype과 달리 dojo는 'on'을 항상 붙여야 한다(예: onclick, onchange)는 것이다. dojo의 위젯(dijit)들은 이벤트 이름을 대소문자를 섞어서 사용해서(예: onClick, onChange) 표준 이벤트들과 구별한다.

사실 dojo.connect()는 이벤트 핸들러 연결보다 더 많은 일을 한다. 실제 구현은 AOP의 before advice에 가깝다고 볼 수 있다. 즉, 일반적인 함수에 대해서도 적용 가능하다.

dojo는 페이지 load/unload 이벤트를 다른 이벤트와는 조금 다르게 취급한다:

* BOM
window.onload = function() { ... }
window.onunload = function() { ... }

* prototype
Event.observe(window, 'load', function() { ... });
Event.observe(window, 'unload', function() { ... });

* dojo
dojo.addOnLoad(function() { ... });
dojo.addOnUnload(function() { ... });

엄밀하게 따지면, dojo.addOnLoad()는 DOMContentLoaded 이벤트 핸들러를 연결한다. 이게 뭔지 아시는 분이라면 따로 설명이 필요 없을테고, 그게 뭐냐고 하시는 분이라면 몰라도 되는 분일테니... 여기서 이러쿵 저러쿵 설명 안하겠다.

dojo.connect(window, 'onload', function() { ... }); 라고 해도 비슷한 결과를 얻겠지만... 미묘~~한 부분이 있다.

마지막으로 dojo에는 Topic 이벤트 시스템이라는 특이한 녀석이 하나 더 있다:
dojo.publish('/some/topic', value1, value2);
dojo.subscribe('/some/topic', function(arg1, arg2) { ... } );

"익명/공용/전역 메시지 큐" 비슷한 것인데, AJAX의 첫번째 A(Asynchronous) 때문에(덕분에?) 꽤 유용하게 써먹을 수 있다. 자세한 내용을 늘 그랬듯이 온라인 문서를 참고하시길...

다음에는 OOP 지원 기능에 대해서 알아보기로 하고... 오늘은 요기까지~.~/

'hacking > web' 카테고리의 다른 글

dojo에서 $ 쓰기  (0) 2007/12/04
prototype사용자를 위한 dojo 입문 (5)  (0) 2007/11/24
prototype사용자를 위한 dojo 입문 (4)  (1) 2007/11/16
prototype사용자를 위한 dojo 입문 (3)  (0) 2007/11/15
prototype사용자를 위한 dojo 입문 (2)  (0) 2007/11/13
prototype사용자를 위한 dojo 입문 (1)  (0) 2007/11/13
Posted by iolo
TAG Dojo, JavaScript, Prototype
Trackback 0 Comment 1
hacking/web2007/11/15 23:34

prototype사용자를 위한 dojo 입문 (3)

크리에이티브 커먼즈 라이선스
Creative Commons License
제 3 장 XMLHttpRequest

계속해서, XMLHttpRequest 관련 함수들을 살펴 보자.
 
BOM(Browser Object Model) 코드는... 열라 길다. -.-; 생략할려다가... prototype이나 dojo가 얼마나 많은 노가다를 줄여주는지 확인하는 차원에서 주욱 적어봤다. prototype과 dojo 코드는 얼추 비슷해 보이지만, 가만히 살펴보면 자질구레한 부분에서 조금씩 다르다:

* BOM
var xhr;
try {
  xhr = new XMLHttpRequest();
} catch (e) {
  try {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      // ... Orz
    }
  }
}
xhr.onstatechange = function() {
  select (xhr.readyState) {
  case 4: // loaded
    select (xhr.statusCode) {
    case 200: // ok
      break;
    case ...
    }
  case ...
  }
}
xhr.open('GET','your/url', true);
xhr.send('paramName1=' + encodeURIComponent(paramValue1) + '&paramName2=' + encodeURIComponent(paramValue));
...

* prototype
new Ajax.Request('/your/url', {
  method: 'GET', /* POST, PUT, DELETE ... */
  asynchronous: true,
  parameters: {
    paramName1: paramValue1,
    paramName2: paramValue2,
    ...
  }
  onComplete: function(xhr) { },
  onFailure: function(xhr) { }
});

* dojo
dojo.xhrGet({ /* xhrPost, xhrPut, xhrRawPost, xhrRawPut ... */
  url: '/your/url',
  sync: false,
  handleAs: 'xml',  /* xml, json, text */
  content: {
    paramName1: paramValue1,
    paramName2: paramValue2,
    ...
  },
  load: function(response, xhr) { },
  error: function(response, xhr) { }
});

차이점을 요약하면:
  • new 연산자를 쓰지 않는다(그냥 함수 호출이다).
  • 요청 메소드를 파라메터로 처리하지 않고, 요청 메소드별로 함수가 따로 있다(코멘트 부분 참조).
  • 요청 url을 별도의 파라메터가 아니라 다른 옵션들과 똑같이 취급한다.
  • 동기/비동기 모드를 지정하는 파라메터가 거꾸로다(당연히 이름도 asynchronous가 아니고 sync다).
  • 응답 형식을 지정할 수 있으며, 응답이 바로 콜백함수로 전달된다.(즉, json 응답의 처리 방법이 다르다.)
prototype처럼 성공/실패 여부에 따라 콜백 함수를 지정할 수도 있지만, 내 경우에는 dojo.Deferred(twisted의 deferred와 유사한데...)를 선호한다. 여기서는 많은 옵션들을 생략했는데, 자세한 것은 각각의 온라인 문서를 찾아보시라.

Ajax.Updater / Ajax.PeriodicalUpdater에 해당하는 녀석은 없다. 그냥 window.setInterval()과 domNode.innerHTML을 쓰면 되니까 그다지 아쉽지 않다. 그리고, dojo의 위젯(dijit) 중에 ContentPane이라는 녀석을 쓰면 이 모든걸 한 줄로 끝낼 수 있다.

dojo에는 XHMLHttpRequest 대신 <script>태그와 <iframe>태그를 사용하는 dojo.io.script와 dojo.io.iframe이라는 두개의 특별한 녀석들이 있다. AJAX의 Cross Domain 제한을 경험해본 개발자라면 귀가 솔깃할 만한 녀석들이다. 자세한 것은 역시 온라인 문서를 찾아보시라.

다음에는 이벤트 핸들링에 대해서 알아보기로 하고... 요기까지~

'hacking > web' 카테고리의 다른 글

prototype사용자를 위한 dojo 입문 (5)  (0) 2007/11/24
prototype사용자를 위한 dojo 입문 (4)  (1) 2007/11/16
prototype사용자를 위한 dojo 입문 (3)  (0) 2007/11/15
prototype사용자를 위한 dojo 입문 (2)  (0) 2007/11/13
prototype사용자를 위한 dojo 입문 (1)  (0) 2007/11/13
2007 Ajaxian.com Reader Survey 결과  (0) 2007/10/15
Posted by iolo
TAG Dojo, JavaScript, Prototype
Trackback 0 Comment 0
hacking/web2007/11/13 00:52

prototype사용자를 위한 dojo 입문 (2)

크리에이티브 커먼즈 라이선스
Creative Commons License
제 2 장 utility functions

유틸리티 함수들을 살펴보자. dojo에는 아쉽게도(?) prototype사용자들이 제일 좋아하는 함수 $()가 없다. 대신 dojo.byId()가 있다. 이게 귀찮다고 생각하시는 분이 계시겠지만 dojo 개발팀에서도 꽤 오랜 고민과 토론 끝에 내린 결론이다. 관심있는 분은 메일링을 뒤져보시라.

* 지정한 id를 가진 DOM node를 검색

* dom
var node = document.getElementById('abc');

* prototype
var node = $('abc');

* dojo
var node = dojo.byId('abc');

너무 길다고? 익숙해지면 별 차이없다. document.getElementById()보다는 짧지않은가! 거기다 나는 $ 기호에 알르레기반응이 있다. per~~~~~l 씨러=3=3=3=33

* 지정한 노드 이름(태그 이름) / CSS 셀렉터를 가진 DOM node들(배열)을 검색

* dom
var nodes = document.getElementsByTagName('div');

* prototype
var nodes = $$('div');
var nodes = $$('.item');
var nodes = $$('#title);
var nodes = $$('div.item');
...

* dojo

var nodes = dojo.query('div');
var nodes = dojo.query('.item');
var nodes = dojo.query('#title');
var nodes = dojo.query('div.item');
...

dojo.query()도 prototype이나 jquery와 비슷한 CSS 2.1 셀렉터를 지원한다. 더 자세한 내용은 온라인 문서를 찾아보시라.

나중에 얘기하겠지만 prototype에서 $$와 each()의 결합을 많이 쓰는 것처럼, dojo.query()도forEach()와 함께 쓰면 편리하다.

일단 자자~ -,.-;;;;

'hacking > web' 카테고리의 다른 글

prototype사용자를 위한 dojo 입문 (4)  (1) 2007/11/16
prototype사용자를 위한 dojo 입문 (3)  (0) 2007/11/15
prototype사용자를 위한 dojo 입문 (2)  (0) 2007/11/13
prototype사용자를 위한 dojo 입문 (1)  (0) 2007/11/13
2007 Ajaxian.com Reader Survey 결과  (0) 2007/10/15
DOMContentLoaded revisited  (0) 2007/09/27
Posted by iolo
TAG Dojo, JavaScript, Prototype
Trackback 0 Comment 0
hacking/web2007/11/13 00:48

prototype사용자를 위한 dojo 입문 (1)

크리에이티브 커먼즈 라이선스
Creative Commons License

dojo 1.0 릴리즈 기념으로 몇 번에 걸쳐 잡담을 좀 하려고 한다.

제목은 거창하게 "prototype 사용자를 위한 dojo 입문"이지만... 글쎄... 그냥... dojo 0.4 이전 버전의 dojo에서 실망하거나 좌절하고, 두번 다시는 dojo를 거들떠 보지 않는 분들에게... dojo도 꽤 쓸만하다는(쓸만해졌다는?) 얘기를 하고 싶었다.

제대로 될지는 모르겠지만, 일단 시작해보자!


제 1 장 getting dojo

prototype은 홈페이지에서 prototype.js를 받아서 로컬 웹서버에 올려놓고 참조했다. dojo도 마찬가지다.

dojo도 홈페이지에서 http://download.dojotoolkit.org/release-1.0.0/dojo-release-1.0.0.zip 파일을 다운 받아서 웹 디렉토리에 적당히 풀고, (그 디렉토리를 js라고 하면) 다음과 같이 쓰면 된다:

<script type="text/javascript" src="js/dojo/dojo.js></script>

주의: 할 점은 dojo가 두 번 들어간다는 것이다. 내 경우엔 js/dojo에 dojo를 풀었더니 무려 js/dojo/dojo/dojo.js가 되었다. -.-;;;

그러나 120k짜리 js파일(1.6은 120K)만 받으면 되는 prototype에 익숙한 개발자들에게 3M를 훌쩍 넘는 dojo의 zip파일(1.0은 3.9M)은 압박(!) 그 자체이다. 내가 알고 있는 많은 개발자들이 여기에서 좌절하고... prototype으로 돌아간다.

그런 분들을 위해 미리 말해두면 prototype 대체용의 dojo라면 잡다한 다른 파일 필요없이 아래의 파일 중에 하나만 받아서 쓰면 된다:

http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.js.uncompressed.js (압축안된 버전; 224K)
http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.js (압축된 버전; 71K)

이것도 귀찮은 개발자를 위해서 한가지 방법을 더 제공한다. 다운로드고 나발이고 필요없다. 그냥 다음과 같이 하면 된다:

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>

이렇게 하는 또하나의 장점은 AOL의 CDN이 엄청나게 빠르다는 것이다. 개발하는 동안에는 로컬에 있는 웹서버보다 빠르지 않겠지만, 최종적으로는 웹을 통해서 서비스할텐데, 그때도 AOL의 CDN보다 빠를까?

저렇게 하면 AJAX로 내 웹서버에도 접속 못하는 거 아니냐고 걱정하는 분이 계시다면(오! 고수!), 걱정 붙들어매도 되시겠다. dojo가 알아서 한다. 열라 신기하다. 정말! 정말! 정말! 궁금할때만 소스를 보시라. -.-;;;;

흠냐... 1시 다 됐네-.-; 자자~

'hacking > web' 카테고리의 다른 글

prototype사용자를 위한 dojo 입문 (3)  (0) 2007/11/15
prototype사용자를 위한 dojo 입문 (2)  (0) 2007/11/13
prototype사용자를 위한 dojo 입문 (1)  (0) 2007/11/13
2007 Ajaxian.com Reader Survey 결과  (0) 2007/10/15
DOMContentLoaded revisited  (0) 2007/09/27
RIA 전성 시대? AJAX 독주 체제!  (2) 2007/09/22
Posted by iolo
TAG Dojo, JavaScript, Prototype
Trackback 0 Comment 0