유부중년 개발자의 우울

지난 포스트에서는 CORS에 대해서 (아직 지원하지 않는 브라우져가 많다고 지레 짐작하고) 용어만 언급하고 넘어갔다. 최근에 올라온 "Methods of communication"이라는 글에 걸린 링크를 통해 지금 당장이라도 쓸 수 있음을 확인하고, 몇 자 적어보려고 한다. Ajax에는 Same Origin Policy라는 원칙이 있다. 말 그대로, 현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청을 보낼 수 있다. MS가 XMLHttpRequest를 처음 만들 때만 해도 이런 제약은 당연한 것처럼 보였지만, 지금에 와서는 OpenAPI를 통한 매시업(Mashup)이 활성화되는 데 가장 큰 장애물이 되었다. 매시업이 아니더라도 여러 개의 도메인을 사용해야 하는 대규..

내 스스로와의 약속(하루에 한개씩 블로그를 쓰겠다는)을 지키면서, 또 다른 약속(지난 번 dW Live!의 페차쿠차 발표에 대한 보충 수업을 하겠다는)을 지키기 위해 여러 번에 나눠 쓰기로 했다 :p 천덕꾸러기 취급 받던 자바스크립트가 다시 각광을 받게된 것은 웹2.0 열풍에 실려 날아온 AJAX 때문이다. AJAX의 A가 Asynchronous라는 것은 자바스크립트 개발자라면 누구나 아는 사실임에 종종 이를 망각하는 경우가 있다. 가장 쉬운 예를 보자: function get_result() { var result1, result2; $.ajax({ ..., success: function(data) { result1 = data; }); $.ajax({ ..., success: function(dat..

한국 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는 어디에나 써먹을 수 있을 정도고, 나머..

한국 developerWorks에 기고한 번역문 원문: Ajax overhaul, Part 4: Retrofit existing sites with jQuery and Ajax forms 번역: Ajax로 사이트 전면 개편, Part 4: 기존 사이트를 jQuery와 Ajax forms를 사용하여 개선하기 열화와같은 독자들의 성원에 힘입어 연장 방영 중인 Ajax 오버홀 시리즈~ 4부에서는 앞에서 한번 써 먹었던 jQuery Tabs UI와 jQuery Forms를 사용하여, 예제 애플리케이션인 Customize Me Now의 구매 과정을 마법사 스타일의 UI로 개선한다. 百問而不如一見~

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

자바스크립트로 코딩 좀 했다는 분들도 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와 섞어서 사용해도 아무런 문제를 읽으키지 않는다. 굳이 $()를 쓰고 싶으면 예전에 쓴 블로그..

자바스크립트에는 두 가지 타입 검사 연산자가 있다: 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에 대한 소개 기사다. 아주 기본적인 내용들을 스크린샷 위주로 쉽게 설명하고 있다. 잘 알고 있는 사람들에겐 따분하고 쓸모없어 보이겠지만, 이 마저도 모르는 사람들이 수두룩하다.

한국 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탭을 통한 성능 측정 방법..

한국 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를 나름 좀 써봤다는 분들..

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

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

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

웹에서 개발 좀 해봤다는 사람들이라면 히든 프레임 삽질은 다 알고 있을 것이다. 오늘 좀 더 삽스러운 것을 보았다. 간단히 요약하면, html쪽에 이런게 있다: document.write(""); var result = 0; for (var i = 0; i < values.length; i++) { result = result + values[i]; } alert(result); 문제는 test.php다: