유부중년 개발자의 우울

사진작가들이 쓰는 Lightbox 얘기가 아니다. 웹개발자나 디자이너에게 Lightbox는 웹 페이지 상에서 이미지들을 뽀대나게 보여주는 일종의 Modal Dialog 형태의 UI 컴포넌트다. 대표적인 Lightbox 라이브러리로는 (유행이 좀 지난 느낌이 있지만) prototype / script.aculo.us 를 사용하여 만든 Lightbox2를 보면 어떤 것인지 쉽게 이해 된다. 요즘 유행하는 jQuery용 플러그인은 넘쳐난다. 하지만, 개인적으로 prototype이나 jQuery 보다는 dojo를 선호하기 때문에(대부분의 경우엔 별 차이가 없지만, 마이너리티 체질의 똥고집이랄까...) dojo로 Lightbox를 만들기로 했는데... 웬걸 -.-; dojox.image.Lightbox라는 녀석이..

원문: http://www.ibm.com/developerworks/library/wa-aj-doh/ 번역: http://www.ibm.com/developerworks/kr/library/wa-aj-doh/ Dojo Objective Harness라니... 참 이름도 잘 짓는다. 원래는 그냥 Dojo Helper의 약자였는데... -.-; 아무튼 자바스크립트 단위테스트로 고민하고 있는 분들이라면 한번 쯤 읽어봐도 좋을 튜토리얼이다. dojo와 무관하게 함수들을 동기/비동기로 테스트할 수 있다. 어느 정도 자동화도 가능하지만, 이 경우엔 rhino를 사용하기 때문에 실제 브라우져에서와 다른 결과가 나올 수 있으므로 그다지 유용하다고 할 수 없다. 대부분의 경우엔 수시로 브라우져를 통해서 테스트를 한번씩 ..

한국 developerWorks에 기고한 번역문 원문: Develop AJAX applications like the pros, Part 3: Use DWR, Java, and the Dojo Toolkit to integrate Java and JavaScript 번역: 전문가다운 Ajax 애플리케이션 개발, Part 3: DWR, 자바, Dojo 툴킷을 사용하여 자바와 자바스크립트 통합하기 전형적인 디벨로퍼웍스 스타일의 제목... 원츄! -.-)b~ 제목과는 달리 dojo 얘기는 없다. 대신, 자바 개발자들을 위한 거져 먹는 Ajax! DWR이 있다. 정말~ 쉽고! 정말~ 편하다! 장담하건데... 기존에 자바로 구축된 웹 사이트에 간단한 Ajax를 추가하는 거라면 이 보다 더 좋은 솔루션은 없다. 百..

아싸~ 아기다리고기다러던~~ (이런 개그하지 말랬지~ +-.-)==@ (*..*) 퍼퍽!) *경* Dojo Toolkit 1.2 정식 버전 릴리즈~~ *축* Alex Russell의 뒤를 이어 Pete Higgins가 메인테이너를 맡은 뒤 첫 릴리즈다. 아무튼, 뭐가 달라졌나 볼까나~.~ 새로운 데이터스토어들 dojox.data.JsonRestStore dojox.data.CouchDBRestStore dojox.data.GoogleFeedStor dojox.data.GoogleSearchStore dojox.data.PersevereStore - Perservere... 쓰는 사람이 있구나... -.-; dojox.data.S3Store JsonRestStore는 어디에나 써먹을 수 있을 정도고, 나머..

여름 휴가도 있고... 밥먹고 사는 일도 있고 해서... 한참 쉬었으니 다시 시작해보자. dojo의 객체 시스템의 핵심은 dojo.declare다: dojo.declare(className, superClass, { members... }) : 주어진 이름을 가진 클래스를 정의한다. 클래스 이름은 문자열로, 수퍼클래스는 클래스 객체로 지정해야 한다. 수퍼클래스가 없으면 null 또는 [ ] (빈 배열)을 지정하면 된다. 하나 이상의 수퍼클래스(정확히는 하나의 수퍼클래스와 여러 개의 믹스인을 배열로 지정할 수도 있다.먼저, 단순한 클래스를 정의하는 예를 보면: dojo.declare('Point', null, { x: 0, y: 0, constructor: function(x, y) { this.x = x..

자바스크립트로 코딩 좀 했다는 분들도 IE(참고자료)와 불여우, 그리고 W3C의 표준 DOM 이벤트 모델간의 차이에 대해서 제대로 이해하기보다는 까이꺼~ 대충~ 통밥으로~ 처리하는 경우를 많이 본다. 누가 좋으냐 나쁘냐는 논쟁은 끝이 없으니... 넘어가기로 하고... 골치아픈 브라우져간의 차이점을 신경쓰지 않고 개발할 수 있는 dojo의 이벤트 시스템을 알아보자. dojo.connect(이벤트객체, 이벤트이름, 이벤트핸들러함수) : 지정한 객체에서 지정한 이름의 이벤트가 발생하면 이벤트 핸들러 함수를 호출하도록 "연결"한다. 핸들을 리턴한다.dojo.disconnect(핸들) : dojo.connect()함수의 리턴값으로 받은 핸들을 사용하여 이벤트와 이벤트 핸들러 함수의 연결을 끊는다.뭔 얘긴지 더 헷..

이번에 알아볼 내용은 애니메이션/효과를 위한 기능이다. 기본 효과 간단한 효과들이지만 dojo base에 포함되어 있어서 dojo.js 파일 하나만 있으면 편하게 쓸 수 있다. dojo.fadeIn(args) : 지정한 노드를 서서히 불투명하게 만든다. args는 여러가지 파라메터를 묶은 해시다. dojo에서는 이런 식의 파라메터를 즐겨쓴다. dojo.fadeOut(args) : 지정한 노드를 서서히 투명하게 만든다.dojo.animateProperty(args) : 지정한 노드의 (CSS) 속성을 연속적으로 변화시킨다. 이 함수만 활용하면 대부분의 효과를 만들 수 있다.간단한 예를 들어 보면: dojo.fadeOut( node: 'title', duration: 1000, delay: 250 }).pl..

할 수 있는데 까지 해보자. DOM 노드 위치/좌표 관련 함수들 CSS만으로 모든 레이아웃을 정확하게 계산하기란 쉽지 않다. 디자이너의 현란한 디자인이 IE의 더블마진 버그와 만나는 순간... 때문에 레이아웃 잡는게 여간 골치아픈게 아니다. 그래서 이런게 필요하다: dojo.marginBox(domNode) : 지정한 DOM 노드의 margin box를 얻는다.dojo.marginBox(domNode, {l:가로좌표, t:세로좌표, w:너비, h:높이}) : 지정한 DOM 노드의 위치/크기를 margin box로 설정한다. 위치는 부모 노드의 위치에 대한 상대좌표다(즉, CSS의 position:absolute 다). margin/padding/border는 바뀌지 않지만, content box의 크기는..

남아 있는 유틸리티 함수들 중에서 정말 자주 쓰이는 몇가지만 더 알아보자. dojo.byId(id) document.getElementById(id)와 동일하며 프로토타입의 $(id)와 동일하다. 지정한 id를 가진 DOM 노드를 찾는다. 참고로 dijit.byId(id)와는 전혀 다른 녀석이니 헷갈리지 않기를... 그리고 다른 window(frame/iframe)의 노드를 찾고 싶을 때는 dojo.withGlobal(window,'byId',dojo,[id]) 처럼 하면 된다(뭐가 이렇게 복잡하냐고? 그래도 없는 것 보다는 낫다). $()보다 길어서 타이핑하기 귀찮겠지만... 덕분에 프로토타입이나 jQuery와 섞어서 사용해도 아무런 문제를 읽으키지 않는다. 굳이 $()를 쓰고 싶으면 예전에 쓴 블로그..

자바스크립트에는 두 가지 타입 검사 연산자가 있다: instanceof와 typeof 그런데 이게 미묘하다. 예를 들어: var hello = "hello"; alert(typeof hello); // string var world = new String("world"); alert(typeof world); // object -,.-;; dojo를 사용해보면 어떨까? alert(dojo.isObject(hello)); // false alert(dojo.isObject(world)); // true alert(dojo.isString(hello)); // true alert(dojo.isString(world)); // true 말나온 김에 한 가지만 더 예를 들어보면: function test2() ..

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..

500+개의 버그를 고쳤다는데... 그럼 도대체 버그가 몇개였다는 얘기? 3월 1일 정식이 나오고, 4월 1일 첫번째 마이너 업데이트(1.1.1)가 나올 예정이니까, 실무에 적용하는건 4월 이후에나 가능하겠다. 바뀐 내용을 좀 살펴보면: dijit 테마를 수정CSS 최적화 옵션등 빌드 스크립트 개선BorderContainer 와 ExpandoPane 레이아웃 컨테이너 추가dojo.gfx에 애니메이션 추가dojox.fx에 지우기 기능 추가dojox.highlight에 문법 강조 기능 추가dojox.dt에 Django 문법 추가 및 dojo.data와 grid/tree간의 연동 개선, dojox.data에 JsonPath, SnapLogic 등의 구현 추가. Firefox3의 WAI-ARIA 지원을 포함한 ..

요렇게 해주면: $ = dojo = dojo.mixin(function(){ return dojo.query.apply(dojo, arguments); }, dojo); 요런 식으로 쓸 수 있게 된다: $.addOnLoad(function(){ console.debug($("div")); }); $("div").onclick(function() { alert("div clicked."); }); $.xhrPost({form: $("#myFormId")[0]}); 흠... 너무 prototype스럽군... -.-; 위의 방법 말고도 다양한 변형들이 있다. 요는 prototype의 $가 그렇게 대단한 무언가가 아니라는 거다.

제 4 장 이벤트 javascript로 심각한 코딩을 해본 사람이라면 누구나 사소한 브라우져들간의 차이에 좌절한 경험이 있을 것이다. 문제는 prototype이나 dojo같은 멋진 넘들이 넘쳐나는 세상에도 여전히 과거의 코드에 매여있는 사람들이 있다는 것이다. 일단, 이런 HTML이 있다고 생각하자: ... OK! ... * 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);..

제 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.XM..

제 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()보다는 짧지않은가! 거기다 나는 $..

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 파일을 다운 받..

http://sitepen.com/pressReleases.php?item=20070917 dojo 0.9에서 가장 황당한 이슈 중의 하나가... grid위젯(dojo 0.4의 SortableTable/FilteringTable의 대체품)이 없다는 것이었는데... 결국, 모질라 재단, SitePen, Nexaweb, Redfin, SnapLogin 등이 공동으로 TurboAjax의 Grid를 사들여서 dojo 재단에 기증하기로 했다는 소식. TurboAjax는 dojo초창기부터 잘 다듬어서 상용으로 팔아먹던 회사였는데... 버틴 보람이 있군. 대충 훑어보면: General Features Browser support matching Dojo 1.0: IE6/7, Firefox 2/3, and Safari..

블로그라인에서 새 버전을 dojo만들고 있다고 해서... 후다닥 들어가 봤는데... 이게 생각보다 꽤 쓸만~ @..@ 구글 리더를 버리기로 결정~ P.S. C+U를 눌렀더니(직업병?)... 요런게 보인다~ Welcome to _ _ _ _ | |__ | | ___ __ _| (_)_ __ ___ ___ | '_ \| |/ _ \ / _` | | | '_ \ / _ \/ __| | |_) | | (_) | (_| | | | | | | __/\__ \ |_.__/|_|\___/ \__, |_|_|_| |_|\___||___/ |___/ v3.0 (beta) Proudly Made On Earth! 나도 따라해봐야쥐~