유부중년 개발자의 우울

한국 developerWorks에 기고한 번역문 원문: Ajax overhaul, Part 3: Retrofit existing sites with jQuery, Ajax tabs, and photo carousels 번역: Ajax로 사이트 전면 개편, Part 3: jQuery, Ajax 탭, 회전식 슬라이드쇼로 기존 사이트 개선하기 Ajax 오버홀, Part 1: Ajax와 jQuery로 기존 사이트 개선하기와 Ajax 오버홀, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기로 마무리된 줄 알았던 오버홀 시리즈... 열화와같은 독자들의 성원에 힘입어 연장~~?! 하긴.. 그렇게 끝나면 열라 허무했을 거다. 지금 4부까지 번역했는데... 분위기로 봐선 5부도 조만간 나..

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

웹2.0의 열기가 안정되면서 한 때 잘 나가던 몇몇 회사의 서비스들이 조용해졌다. 씽크프리도 그 중의 하나일지도... 그러나 버뜨! 쓸모도 없는 데모만 보여주고(지금은 뜨지도 않지만)... 스샷만 남발하고... 연기에 연기를 거듭하던 씽크프리 노트가 최근 업데이트에서 모습을 드러냈다. 데모 때 보다 한결 깔끔해진 모습으로~ 고화질(1024x768) 동영상(30M)은 용량 문제로 따로 올렸다. 흠... 솔직히... 아직 제대로된 원격 블로깅 도구라고 하기엔 한~참 멀었지만... 다음 업데이트를 기약하면... 이번엔 요기까지~ 덧. 블로그 포스팅에 촛점을 맞춰서 만들었는데... 관심있는 분들... 더 삼빡하게 하나 만들어 주세요.~.~/

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

한국 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 프로그래밍 입문.

이번에 알아볼 내용은 애니메이션/효과를 위한 기능이다. 기본 효과 간단한 효과들이지만 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..

한국 developerWorks에 기고한 번역문 원문: Performance Ajax tools 번역: Ajax 성능 도구 Apache Bench, Tsung, Bonnie++, Wireshark(Ethereal), 그리고 Cometd, Lightstreamer, KnowNow, lighttpd 등의 Comet 구현체들, LiveHttpHeaders 등의 파이어폭스 확장들을 소개한다. 말그대로... 소개만 할 뿐... 너무 기대하지 말자. -.-;;; 그래도 이렇게 모아서 소개해주는 것만으로 큰 도움이 된다.

할 수 있는데 까지 해보자. 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와 섞어서 사용해도 아무런 문제를 읽으키지 않는다. 굳이 $()를 쓰고 싶으면 예전에 쓴 블로그..

웹 프로젝트에서 자바스크립트의 비중이 점점 커지면서, JSLint 같은 검증 도구의 필요성이 날로 높아지고 있다 이걸 매번 소스코드를 클립보드로 복사(copy)해서 jslint.com의 웹 폼에 붙여넣고(paste) 돌리는 짓을 하다가 귀찮아서 몇가지 방법을 찾아 보았다. 먼저, maven: pom.xml에 이런거 대충 추가하자. 그러면 mvn site 돌릴때 같이 실행되서 target/site/jslint/index.html에 보고서가 만들어진다. 중간에 sourceDirectory는 잘 고쳐 주시길... 안고쳐주면 src/main/javascript 가 기본값이다. ... ... org.codehaus.mojo.javascript javascript-report-maven-plugin src/main..

자바스크립트에는 두 가지 타입 검사 연산자가 있다: 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..

한국 developerWorks에 기고한 번역문 원문: Debug and tune applications on the fly with Firebug 번역: 파이어버그를 이용한 신속한 웹 애플리케이션 디버깅과 튜닝 파이어폭스를 최강의 웹브라우져로 만든 주역 Firebug에 대한 소개 기사다. 아주 기본적인 내용들을 스크린샷 위주로 쉽게 설명하고 있다. 잘 알고 있는 사람들에겐 따분하고 쓸모없어 보이겠지만, 이 마저도 모르는 사람들이 수두룩하다.

씽크프리에서 새 서비스를 슬쩍~ 오픈했다. "ThinkFree Online for iPhone"이라는 길고 장황한 이름의 이 서비스를 사용하면 이름 그대로 씽크프리 온라인에 저장되어 있는 문서들을 아이폰이나 아이팟 터치에서 볼 수 있다. 흠... 지금은 볼 수만 있다. 씽크프리 매니저를 사용하면 데스크탑의 문서가 온라인과 싱크가 되니까... 최종적으로는... 흠... 데스크탑의 문서를 어디서나 볼 수 있다는 말씀? 이것이 Boundless?? TODO에 보니까 이것저것 된다고 하니, 일단 맛만 보고 좀 더 기다려보자. 아이폰이나 아이팟 터치를 갖고 계신 씽크프리 사용자라면 지금 바로 눌러보시라~ http://demo.thinkfree.com/guu/ 덧1. (광고) 아직 계정이 없으면, 이 기회에 하나 ..

한국 developerWorks에 기고한 번역문 원문: Ajax overhaul, Part 2: Retrofit existing sites with jQuery, Ajax, tooltips, and lightboxes 번역: Ajax 오버홀, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기 Ajax 오버홀, Part 1: Ajax와 jQuery로 기존 사이트 개선하기에 이은 오버홀 완결편. 그 시작은 창대하였으나 끝은 미미하리라...

한국 developerWorks에 기고한 번역문 원문: Ajax performance analysis 번역: Ajax 성능 분석 모처럼 유용한 번역 기사다. 뭐 그렇다고 그동안 번역했던게 백해무익했다는 얘기까진 아니고... -.-; 원 제목을 그대로 번역하다보니... 짧게 "Ajax 성능 분석"이 되버렸는데... 제대로 된 제목은 "Firebug와 YSlow!를 이용한 Ajax 성능 분석"이 되겠다. Firebug는 이제 웹 개발자, 특히 AJAX 개발자들에겐 없어선 안될 친구다. 그러나, 대부분의 개발자들은 Inspector와 Script 디버거 외에는 별로 활용을 하지 않는 것 같다. 하지만 Firebug는 우리가 기대하는 그 이상의 도구다. 이 기사는 Firebug의 Net탭을 통한 성능 측정 방법..

자바스크립트에는 URL 인코딩과 관련해서 4가지 함수가 있다. encodeURI(), encodeURIComponent(), escape()/unescape() 이 그것인데... 구글신께 여쭈었더니... 이렇게 다르다고 말씀해 주셨다. 정말? 일단, 실험을 해보기로 했다. 저 사이트에 나온 파일을 UTF-8과 EUC-KR로 각각 저장했다. test-utf8.html, test-euckr.html 그리고 각각의 파일의 헤더 영역에 다음의 메타 태그들을 끼워넣은 파일을 두개 더 만들었다. test-utf8-meta.html test-euckr-meta.html 그리고, 이 페이지들을 한글 IE7, 영문 IE6, 영문 IE7, FF 2.0 으로 브라우져로 테스트 했다. 혹시나 싶어서 IE의 경우엔 항상 "UT..

한국 developerWorks에 기고한 번역문 원문: Ajax overhaul, Part 1: Retrofit existing sites with Ajax and jQuery 번역: Ajax 오버홀(overhaul), Part 1: Ajax와 jQuery로 기존 사이트 개선하기 developerWorks 기사답게... 제목이 장황하다. 덩달아서 번역도 장황하다. 급하게 번역한 티가 너무 팍팍 난다. jQuery의 철학적 근간?!이라고 할 수 있는 "조신한 자바스크립트(Unobtrusive JavaScript)" -- 누군가는 "나대지않는 자바스크립트"라고 번역했더라 --에 "점진적 향상(Progressive Enhancement)"이라는 뜬금없는 개똥 철학까지 들먹이며... 기존 사이트의 최대한 손대지..

한국 developerWorks에 기고한 번역문 원문: Ajax and XML: Ajax for tables 번역: Ajax와 XML: 테이블을 위한 Ajax 흠... 급하게 번역한 티가 팍팍 난다-.-;;; 테이블을 위한 Ajax라니...-.-;;;; 제목은 "Ajax로 table 다루기 정도"로 바꾸면 좋겠다. 아무튼 prototype.js를 사용해서 tab, table, glider(slide-in effect) 등의 자주 쓰이는 기법을 (미주알 고주알) 정말 알기 쉽게 설명하고 있다.(내가 그랬다는 얘기가 아니고 원저자가 그랬다는 얘기다) AJAX라는 말만 들어봤지 실제로 써본적은 없는... 개발자라면...(이런 분들 꽤 많다) 이 기회에 한 번 맛이라도 봐두자. AJAX를 나름 좀 써봤다는 분들..

IE8의 첫번째 공개 베타 버전이 나왔다. 뭐가 얼마나 달라졌길래... 마이너 업데이트 한번없이 바로 8.0인가? 자세한 내용은 MS의 공식 홈페이지를 참조하면 될 것이고... 가장 기대가 되는 것은 역시 표준 지원과 성능이다. 나만 그런 것이 아닌듯... 벌써 벤치마킹 결과가 나오기 시작했다. 시대가 시대이니 만큼 브라우져의 성능은 결국 네트웍, 자바스크립트, DOM의 성능으로 귀결되는데... 자바스크립트 쪽 성능을 비교한 그림을 보면: IE8... IE7과 별차이가 없구려... 완전 실망입니다요~ 사파리가 괜히 뜨는게 아니었다. 파이어폭스 3의 엄청난 향상도 눈에 띈다. 의외인것은 성능빼면 남는게 없는 오페라가 캐안습한 결과를 보인것인데... 테스트에 포함된 코드가 이벤트 프로퍼게이션 모델의 영향을 ..

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의 $가 그렇게 대단한 무언가가 아니라는 거다.

제 5 장 OOP 지원 javascript는 prototype 기반 언어이다. 가장 널리 쓰이고 있는(제목에도 포함된) prototype 라이브러리의 이름이 여기에서 유래된 것이다. 문제는 이 prototype 기반 언어가 대부분의 개발자가 익숙한 클래스 기반 언어와 미묘하게(?) 다르다는 것인데... 그래서 대부분의 자바스크립트 라이브러리들이 이 차이점을 완화하기 위한 도구들을 제공하고 있다. 모질라 홈페이지의 문서에 prototype과 dojo의 예를 추가해보자. 설명은 없고 영양가없는 소스만 길게 늘어놓았는데... 중간 중간 색깔과 코멘트를 넣어두었다. 만들려는 녀석은 대충 이런 식이다: * java public class Employee { public String name; public Stri..

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

ajaxian.com에서 실시한 설문조사의 결과를 조금 뜯어보자: 사용을 검토하고 있는 브라우져 플러그인 Flash 71.9%Silverlight 12.2%기타 28.9%예상했던 결과다. 기타에 뭐가 있는지 더 봤으면 좋겠는데... 확실한건 자바도 기타에 속한다는 것이고, 12.2%보다는 적다는 것이다. 사용하고 있거나/검토하고 있는 AJAX 프레임웍/라이브러리 Prototype 68.4%Scriptaculous 58.7%jQuery 47.5%Yahoo UI 40.3%Dojo 38.3%Ext JS 33.8%Google Gears 22.0%Google Web Toolkit (GWT) 17.2%DWR 12.7%Symfony 4.6%Qooxdoo 3.2%Tibco GI 2.9%jMaki 1.5%ICEfaces..

DOMContentLoaded가 뭔지 모르신다면 신경끄셔도 무방한 아이템 되겠다. 그게 뭔지 아신다면... 그로 인한 고통도 자알 알고 계실터... 어처구니없는 해결책 하나 보시겠다: (출처: http://javascript.nwbox.com/IEContentLoaded/ ) (function (){ //check IE's proprietary DOM members if(!document.uniqueID && document.expando) return; //you can create any tagName, even customTag like var tempNode = document.createElement('document:ready'); try { //see if it throws errors un..

출처: http://blogs.zdnet.com/Stewart/?p=540 같은 그래프지만, 이해는 (AJAX 개발자인)내 맘대로~ 일단 RIA쪽에서 잘 나갈 것 같은 녀석들의 구인 기록을 분석해보자: 역시나, 예상대로 FLEX의 압승! OpenLaszlo는 FLEX덕분에 반사이익을 좀 보는 것 같고... JavaFX는 뭐야? 그런게 있기나 한거야? Silverlight가 너무 쳐지는 것 같아서 WPF도 추가해 봤는데: 어랏?! 이게 뭐야~ 거의 FLEX랑 막상막하네. Silverlight랑 합치면... -.-;;; 역전~ 호기심으로 AJAX도 추가해 봤다: 헉!! @..@ 뭐가 잘못된 거야? 원래 그런거야? 게임이 안되자나! 그럼 플래시는 어떨까: 흠냐-.-;;; 이게 뭔 시츄에이숀-.-;;; 차분히 ..