dojo by example(1) - 유틸리티 함수

dojo를 알고 있는 ajax 개발자들 조차도 dojo하면 먼저 뽀대는 나지만 용량이 크기, 느리고, 무거운 위젯 시스템(일명 dijit)을 떠올린다. dijit도 많이 가벼워졌고, 더 가볍게 쓸 수 있는 방법들 많이 있지만, 일단 무시하고...

dojo의 기본 시스템(일명 dojo core), 그 중에서도 유틸리티 함수들에 대해서 알아보기로 하자.

서버에서 ajax로 다음과 같은 json 데이터를 받아 왔다고 치자:

items: [
  { link: 'http://www.googledocs.com/', title: 'Google Docs' },
  { link: 'http://www.zoho.com/', title: 'Zoho' },
  { link: 'http://www.thinkfree.com/', title: 'ThinkFree Online' }
]

(데이터의 의미가 뭔지 알려고 하지 말자... 다친다 -.-;;;)

이걸 일반적인 자바스크립트로 처리한다고 치면:

for(var i = 0; i < items.length; i++) {
  str += '<a href="' + items[i].link + '">' + items[i].title + '</a>';
}
document.getElementById('resultDiv').innerHTML = str;

dojo 없이도 개선해야 할 여지가 많이 있지만, 그건 이 글을 범위를 벗어나니 스킵~

백문이 불여일견! dojo로 바꿔보자.

dojo.forEach(result, function(item) {
  str += '<a href="' + item.link + '">' + item.title + '</a>';
});
dojo.byId('resultDiv').innerHTML = str;

뭐가 달라졌을까...
1. 맨 아랫줄을 보면 document.getElementById() 대신 dojo.byId()가 사용된 것을 볼 수 있는데, 이건 프로토타입의 $() 와 비슷하다. 그냥 타이핑을 줄여주는 것 뿐이다.
2. 고전적인 for 루프 대신 dojo.forEach() 가 사용되었다.
for (var item in items) { } 도 있으므로 별 필요가 없다고 생각할 수 있지만, 자바스크립트의 for...in...은 유명한 evil 중의 하나다. 믿어라. 크록포드옹께서 그리 말씀하셨다.
다음에 보게 되겠지만 dojo.forEach()는 dojo의 배열 지원 함수 중의 하나에 불과하다. 모두 합체하면 게키강가3가 나온다. 믿거나 말거나... -.-;;; 루리루리짱께서 그리 말씀하셨다.

아무튼 다시 원래 길로 돌아와서...
별로 편한거 같지 않다는 분들이 계시다. 한가지만 더 해보자.

dojo.forEach(result, function(item) {
  str += dojo.string.substitute('<a href="${link}">${title}</a>', item);
});
dojo.byId('resultDiv').innerHTML = str;

dojo.string.substitute()라는 이름은 길지만, 의미가 명확한 함수를 사용했다.
멋지다! 결과는 달라지지 않았지만, 코드가 아름다워졌다! 자바스크립트와 HTML의 따옴표 사이에서 방황했던 개발자라면... 감동! 그 자체다.

그래도 별로 편한거 같지 않다는 분들이 계시다.
하지만... 너무 덥다. -.-;;;; 오늘은 그만 하자.
아쉬운 분들을 위해 선물 하나 준비했다. 클릭하면 크게 보이겠지만, 그냥 작게 보고 만족하자.=3=333