2006년 5월 31일 수요일

Prototype에서 PeriodicalExecuter 클래스를 이용한 Timer 설정

요약
PeriodicalExecuter의 목적은 특정 시간마다 반복적인 동작을 수행하기 위해서 사용됩니다.

문법
var executer = new PeriodicalExecuter(callback function, interval time);
파라미터
callback function - 일정간격마다 호출될 function을 인자로 받습니다.
interval time - 반복적인 동작을 수행할 시간 간격을 초단위로 받습니다.
코드

var PeriodicalExecuter = Class.create();
PeriodicalExecuter.prototype = {
   initialize: function(callback, frequency) {
       this.callback = callback;
       this.frequency = frequency;
       this.currentlyExecuting = false;
       this.registerCallback();
   },

   //setInterval 메소드를 사용하여 특정 시간마다 onTimerEvent 메소드가
   //호출되도록 합니다.
   registerCallback: function() {
       setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
   },

   //currentlyExecuting가 true인 경우 callback 메소드를 수행합니다.
   onTimerEvent: function() {
       if (!this.currentlyExecuting) {
           try {
               this.currentlyExecuting = true;
               this.callback();
           } finally {
               this.currentlyExecuting = false;
           }
       }
   }
}

동작원리
동작 자체는 단순합니다. setInterval메소드에 자기 자신의 onTimerEvent가 호출되도록 설정한 후  PeriodicalExecuter로 감싼 후, 특정 시간마다 onTimerEvent가 호출될 때 PeriodicalExecuter에 등록되어 있는 callback을 실행합니다. 내부에 실행여부를 결정하는 flag(currentlyExecuting)을 가지고 있습니다.


Function.apply() 와 Function.call()

출처 : Function:apply, Function:call

Function.apply() 또는 Function.call()을 사용하면 Fucntion 자신을 나타내는 this를 변경할 수 있습니다.
※ mozilla에서 공개해 놓은 예제에서는 apply()를 호출할 때 arguments 배열을 인자로 주어서 배열로 들어온 값들이 apply()가 적용되는 function의 인자로 설정되도록 합니다.
※※ this.functionB.apply(this, arguments) 와 같이 호출하여서 arguments로 무엇이 들어오는 지 상관없이 이를 그대로 전달하면서 this의 의미를 변경할 수 있습니다.
var Class = {
    create: function() {
        return function() {
            this.initialize.apply(this, arguments);
        }
    }
}
var Person = Class.create();
var _person = new Person();

// alert(Person);을 실행하는 경우 function(){ this.initialize.apply(this, arguments);}
// 가 리턴됩니다.
prototype 1.5의 Class.create() 코드에서는 위와 같이 apply 메소드를 사용해서 Person이라는 Object가 실행될 때, initialize가 호출되도록 연결해주는 역할을 합니다.

2006년 5월 30일 화요일

TextArea에서 Tab이동 구현하기

 
      function doTab(arg1,arg2){
           textArea=arg2
           var keyCode;
           // key 값을 얻어옵니다.
           if ("which" in arg1){
               keyCode=arg1.which   
           }else if("keyCode" in arg1){
               keyCode=arg1.keyCode   
           }else if("keyCode" in window.event){
               keyCode=window.event.keyCode
           }else if("which" in window.event){
               keyCode=arg1.which
           }else{
               return true   
           }
          
           //tab을 삽입하고 시간이 지난 후에 다시 포커스를 줍니다.
           if (keyCode == 9) {
               textArea.value = textArea.value + "\t";
               setTimeout("textArea.focus()",1)
               return false;
           }
           return true
       }
Tab|Shift-Tab은 특수 키이므로 그냥 동작하지 않습니다. 따라서 setTimeout으로 시간이 지난후에 다시 포커스를 주는 편법으로 이를 해결합니다. 이게 해결책인지는 ...

출처 :
   http://www.webdeveloper.com/forum/archive/index.php/t-75879.html





5.31 후보자 정보공개 사이트

두꺼운 홍보책자를 받아들고 열심히 공약을 읽었지만..
도대체.. 누가 구의원, 시의원에 해당하는지 찾기 힘들더군요.
중앙선거관리 위원회에서도 한참헤매다 보니까..

첫 메인에 정치포탈사이트 투표소 찾기(ㅡㅡ;;)라는 애매한 이름(?)의 사이트가 있더군요
여기에 들어가시면 자신이 속한 곳(?)의 후보들 정보를 찾아볼 수 있습니다.

대충.. 체납액 있는 사람들 걷어내니까.. 정리가 좀 되더군요. ㅎㅎ
정치성향에 따라서 투표는 다를 수 있지만 체납액 있는 사람들은 안뽑히도록 우리 모두 노력합시다~

2006년 5월 28일 일요일

Script#

GWT와 비슷한 개념으로 C#으로 코딩하고 이를 Javascript로 생성해주는 라이브러리가 나왔다.
Prototype이기 때문에 두고봐야 하겠지만 GWT처럼 생산성을 높여주는게 가장 장점이 되지 않을까 싶다.

출처
Ajaxian의 Script# Prototype: Microsoft’s GWT
원문인 nikhilk.net의 Script# Prototype

2006년 5월 21일 일요일

GWT

JavaOne에 맞춰서 여러 기술들이 나오는 바람에 정신없이 보낸 한 주 같습니다. 그 중에서도 가장 눈길을 끌었던 것은 GWT(Google Web Toolkit)이었던 것 같습니다. Blogines.com으로 받아보는 여러 Feed들이 GWT에 대한 얘기들을 여럿 담고 있더군요.

GWT를 살펴보면 핵심은 단순합니다. Java코드를 Javascript 코드로 변환하는게 주 목적입니다. 이를 위해서 총 4개의 단위로 구성됩니다.
  • Java코드를 Javascript로 컨버젼하기 위한 Java-to-Javascript 컴파일러
  • Javascript로 변환하기 전에 테스트, 디버깅 등의 목적을 위해서 Java코드만으로 Web에서 동작하는 것처럼해줍니다. (Hosted mode)
  • JRE emulation library는 java.lang 또는 java.util로 작성된 코드들이 Javascript로 컴파일 되었을 때 정상적으로 동작하게 해주기 위해서 JRE를 에뮬레이션해주는 부분입니다.
  • GWT Web UI library는 Web 브라우져에서 사용할 수 있는 컴포넌트 단위의 UI 오브젝트들입니다.
GWT를 사용하는 시나리오는 다음과 같습니다. (이클립스 사용자이며 GWT를 먼저 설치하였다고 가정하구요.)
  1. 프로그래머가 projectCreator와 applicationCreator를 사용하여 이클립스 프로젝트를 생성합니다.

  2. (이 둘을 사용하여 프로젝트를 생성하면 기본적인 프로그램의 구조와 ant파일, javascript 컨버젼 command파일 html파일등을 생성해줍니다.)

  3. 이 프로젝트를 이클립스로 import합니다. (이 때 생성된 코드를 바로 실행할 수 있도록 com.google.gwt.dev.GWTShell을 Main class로 등록하고 argument도 바로 설정됩니다.)

  4. 이클립스의 Package Explorer를 살펴보면 프로젝트 생성한 프로젝트에 따라서 Project Structure도 구성되게 됩니다. (클라이언트 파일의 경우 client 폴더아래 쪽에 작성하며 서블릿같은 서버단 코드는 server코드에 리소스의 경우 public폴더 아래에 넣습니다. Project Structure)

    ※ 이 때 주의할 점은 구조에 맞게 파일을 넣어야 하는 점입니다. 리소스의 경우 public 폴더에 넣어야만 Web 모드로 컴파일 했을 때 적절한 위치로 리소스 파일을 넣어줍니다.- 위치 변경도 가능하기는 합니다.

  5. applicationCreator에서 인자로 주었던 EntryPoint를 구현한 클래스가 시작점이 됩니다.(자바에서 main()를 가진 클래스가 시작점이 었던 것처럼요)
GWT의 문서화는 Dojo나 Prototype 같은 다른 라이브러리보다 훨씬 문서화가 잘 되어 있다고 생각되네요. Prototype의 경우도 잘되어 있기는 하지만요. 개인적으로 GWT를 사용했을 때 느꼈던 단점들은 다음과 같습니다.

  1. Hosted mode에서 테스트하는 경우 브라우저와 다르게 동작하는 부분이 있습니다. CSS가 생각했던 것과 다르게 동작하더군요.
  2. GWT가 변환해주는 Java 패키지는 java.lang과 java.util 두가지만 지원하는 점입니다. 이외에도 언어상의 제약점이나 Runtime Library Support의 제약점이 있습니다. (따라서, Java 프로그램을 컨버젼하기에는 무리가 있을 것 같네요.)
  3. Javascript의 eval() 같은 메소드가 지원이 되지 않는 단점이 있습니다. (한두달 만에 자바스크립트에 익숙해져버렸나보네요. ^^;;)
  4. Widget을 감싸는 Panel을 사용하는 경우 의도했던 것과는 다르게 table태그나 div태그 등으로 한번 더 감싸게 되기 때문에 최후에는 생성된 html과 소스코드를 확인해야하는 부분도 있습니다.
  5. 라이브러리가 포함되므로 프로그램 사이즈가 항상 100k이상이 되는 것도 문제입니다.
  6. Safari 지원이 완벽하지 않다는 얘기가 포럼에 올라오고 있기도 합니다.
장점으로는 소개글에서 나온 것처럼 이클립스에서 코딩한다는 것(== 리팩토링, 디버깅의 편리)과 자바의 클래스, 패키지 구성을 통하여 체계적인 구조를 쉽게 작성할 수 있다는 점(dojo를 사용해보기도 했습니다만, 사용자 정의 라이브러리를 추가하는데 불편한 점이 많더군요. prototype의 경우에는 쉽게 상속은 가능하나 패키지 구조가 지원이 되지 않고 상속시 스코프 영역, this에 대한 처리, js파일에 저장된 dom 핸들링이 ie에서는 다르게 동작하는 점등의 문제를 만났었습니다.)이 가장 큰 매력으로 느껴지더군요.

* GWT가 1.1로 업데이트 되었습니다.
* Pragmatic Bookshelf에서 gwt에 관한 책도 나왔네요.([5]링크 참조)

참고자료

2006년 5월 20일 토요일

리조트 저렴하게 가는 방법을 찾아보자~

  1. 먼저 저렴한 할인 항공권을 검색해 봅니다.
    ※ 저 같은 경우는 투어캐빈을 주로 이용합니다. 포탈 검색도 추천합니다.

  2. 그다음은 어느 도시로 갈지 결정한 후에 도시 정보를 검색해봅니다.
    ※ 리조트를 저렴하게 가는게 목적이므로 갈 수 있는 곳은 허브 공항인 방콕 뿐이겠죠~

  3. 방콕에 도착한 다음에 어디로 갈지를 결정합니다.
    동남아 관련 정보는 태사랑이 가장 정보가 넘치죠 ^^
    ※ 이하 정보는 모두 태사랑에서 검색한 결과입니다.

  4. 에~ 그리고, 괜찮은 리조트를 검색합니다. 태사랑에서 호텔 이야기/게스트 하우스 이야기를 검색하면 됩니다.

  5. 마지막으로, 교통수단으로는 버스를 이용하고 가면됩니다.
위 순서대로 진행 순서대로 따라가보면 다음과 같습니다.
오리엔트타이항공 방콕 200,000원
투어캐빈에서 날짜에와 조건이 다르기는 하지만 200,000원이 최소가격으로 나왔네요

그리고, 방콕에서 어느 도시로 갈지 찾아봅니다. 요술왕자님의 태국 지역별 해변 특징을 한번 찾아본 후에 리조트를 검색해봅니다. 검색 시에 마음이드는 리조트가 나왔다면 영문 이름을 찾아서 다시한번 포탈에서 검색해봅니다. 검색한 결과로는 두짓 리조트가 나왔습니다.

포탈에서 검색해보닌 Aiarooms.com에서 Double 108 US$, Triple 136US$가 나온는군요. 호~ 별 다섯개 짜리입니다. 나머지 세부적인 것은 태사랑을 더 검색해보면 나옵니다. 교통비 등도 포함하고 식사도 생각 해볼 요소구요.

비행기를 타고 방콕에 도착하는 시간에 맞춰서 1박을할지 아니면 밤을 새고 바로 떠날지 식사비는 어느정도 들지도 한번 생각을 해봐야할 요소입니다. 이정도면 비용 산출은 어느정도 쉽게 나옵니다. 여비 꼭 생각하시구요~

P.S. 꼭 호텔일 필요는 없습니다. 좋은 해변가에서 깨끗한 게스트 하우스면 이 가격보다 훨씬 저렴하게 갔다올 수 있습니다. 어떻게 놀지는 본인에게 달렸겠죠 ^^

2006년 5월 18일 목요일

IE7 제거하기

IE 7을 제거하려면 다음의 과정대로 하시면 됩니다.
  1. 제어판을 엽니다.
  2. '프로그램 추가/제거'를 클릭합니다.
  3. '프로그램 변경/제거' 옆의 '업데이트 표시'를 클릭합니다.
  4. Windows XP- 소프트웨어 업데이트 하위항목에서 IE7을 선택하고 제거합니다.


Gamma

MacManus아저씨의 새로운 기사 Flickr goes gamma (post-beta)에서 새로운 용어(?)가 등장하였습니다. 본문의 내용은 Flickr도 야후처럼 re-desing되고 있다는 내용인데 Flickr가 Beta를 넘어서 Gamma를 달고 나왔다고 하는군요. 또 다른 유행이 될지 모르겠네요
According to Wikipedia, gamma means "versions that are substantially complete, but still under test" [via].

2006년 5월 17일 수요일

Web Technology Penetration Report

점심때 짬을내서 Blogline에 쌓인 feed를 읽다보니 'Web Technology Penetration Report'라는 기사가 눈에 띄었습니다. Java가 1.64%이더군요. Web에서 Applet이라...

Technology 2002
2005
2006
2006 Sites
JavaScript 45.46% 59.37% 58.08% 789,309
Frames 26.71% 18.17% 15.91% 216,280
StyleSheets 21.16% 39.93% 49.51% 672,803
Java 4.24% 1.67% 1.64% 22,314
IFrames 3.99% 12.12% 9.88% 134,319
GIF Images 62.98% 58.54% 63.26% 859,760
JPG Images 47.08% 47.25% 54.11% 735,287
PNG Images 2.63% 6.42% 7.78% 105,749
Flash/Shockwave 6.08% 8.77% 12.75% 173,253


출처 : Web Technology Penetration Report

Javascript 2

Ajaxian에 올라온 'Javascript 2/ ECMAScript Edition 4'의 특징들입니다.
  • Fix problems in JS1 that bug people daily
  • A type system to enforce invariants
    • instead of writing/debugging lots of value-checking code
    • optional annotations, an extension to JS1
  • Programming in the large
    • Package system
    • Visibility qualifiers (namespaces, private internal public)
    • Optional static type checking
  • Support bootstrapping and metaprogramming
    • Self-host most of the standard objects
    • Self-host compiler front end and type checker
    • Reduce need for future ECMA Editions

이 외에도, primitive type인 int, double, deciml, Class, Type등의 type이 추가되고, 타입을 정의하는 type expression(var x:String; - ActionScript에서는 지원되었던..) Class, interface, 심지어 연산자 오버로딩까지 지원할 예정이라고 합니다.

본문에 링크되어 있는 Presentation 파일을 읽어보면 좋을 것 같네요.

출처:
  Brendan Eich: JavaScript 2 and the Future of the Web

2006년 5월 16일 화요일

Javascript로 print하기

Javascript로 print하기 위해서는 print()만 알면된다. window의 메소드이며 줄 수 있는 파라미터는 없다.
window.print()
출처 :
- irt.org - JavaScript Print FAQ Knowledge Base : Printing에 관련되 대부분의 정보를 다룬다.
- Scripting Support for Web Page Printing : IE에서의 print를 다룬다.
  - IE에서는 Script X를 통하여 더 자세한 Printing 옵션을 줄 수 있다.

P.S.
HTML문서와 일반 문서의 차이는?

나의 답..

2006년 5월 14일 일요일

간만의 출사

벌써 여름인가 봅니다. 그림자의 짙은 선이 비치는 하루였습니다.

푸른색..


2006년 5월 11일 목요일

Wikipedia Toolbar

Firefox 플러그인 사이트에 들어가면 Wikipedia Toolbar 플러그인이 올라와있습니다. 이놈이 0.5.2버전인데 Firefox 1.5이상에서는 돌아가지 않습니다. 이런 이유로 사용을 못하고 있었는데 알고보니 개발사이트에서는 0.7.1버전까지 나와있었네요. ㅡㅡ;;;

Wikipedia Toolbar : http://wikipedia.mozdev.org/history-old.html

Gmail에 Gtalk가 mashup되었다.

   

다만, 사용자(주위에 G-talk쓰는 사람들)들이 적어서 사용하게될 가능성은 적지만
나름대로 좋다. ^^

2006년 5월 8일 월요일

투덜투덜.. 툴툴툴

제품에 관해서 토론을 하다보면 가끔씩 이런얘기가 나온다.
'우리는 모든 사람들을 지원하는게 아니다. 필요한 사람들만 지원하면 된다.'라는 식으로, 개발자 컴퓨터에서 돌아가면 되니까 단순하게 '사용자에게 업데이트 하라고 시키면된다'라는 식으로...

그래서, 우리는 몇 퍼센트의 사람들을 내쫓았을까?
생각해보니 좀 많다. 누가 이런거 정리 좀 했으면 좋겠다.

Refactoring Database 책도 있군요.

 졸업 후 DB에서 손땐 후[DB를 담당하셨던 강교수님을 싫어했기(? 그 분 목소리를 들으면 눈이 감기는 것을 멈출 수가 없어요) 때문에 이미 전에 포기했지만] 다신 안볼거다 다짐을 하고 있는 요1즘..

Ajax[라기보다는 Dom scripting] 관련 코딩을 하는 중이라서 Database에도 눈길이 가네요[가야하나 봅니다. ㅠㅠ]. 책 중에 Database를 리팩토링 하는 책도 있더군요. 나름 신기하네요 ^^

음.. 뒷북일수도 ^^

2006년 5월 7일 일요일

Ajax 관련 책 나름대로 도서평

[oyb|center|8991268145]
인사이트에서 이번에 나온 '실전 ajax' 책을 도서예매로 구입하였습니다. (책 충동 구매는 여전하죠 ^^;;) 가장 마음에 들었던 부분은 Ajax에 대한 전반적인 내용을 다루었다는 점입니다. 다음은 목차입니다.
  1. Ajax로 기능이 풍부한 인터넷 애플리케이션 제작하기
  2. 구글 맵스 구현
  3. 실전 Ajax
  4. Ajax의 내막
  5. Ajax 프레임워크
  6. Ajax UI 1부
  7. Ajax UI 2부
  8. Ajax 애플리케이션 디버깅
  9. 기능을 축소할 수 있는 Ajax 애플리케이션 만들기
  10. JSON과 JSON-RPC
  11. 서버 측 프레임워크의 Ajax 지원
  12. PHP 프레임워크의 Ajax 지원
  13. 레일즈 프레임워크의 Ajax 지원
  14. DWR를 이용한 프락시 기반 Ajax
  15. ASP.NET과 아틀라스
  16. Ajax의 미래와 그 이후

Ajax에 대한 세부 내용은 미흡한 부분이 있지만(제목부터 실전이죠.) Ajax의 전반적인 부분(특히, 5,6,7장에 나와있는 Prototype, Dojo 라이브러리 소개와 11장부터의 서버측 프레임워크와 16장의 미래전망)에 대해서 잘 설명을 해주고 있고 번역도 매끄러운 편입니다.(거의 대부분 잘되어 있는데 Dojo 라이브러리 번역부분에서는 이해가 안되는 부분이 있어서 라이브러리 documentation을 따로 봐야했습니다.)

그리고, 부록에 나오는 테스트자동화는 매우 잘되어 있구요. (덤으로 홈페이지에 들어가면 별책부록으로 테스트코드 작성 동영상도 제공됩니다.)

책을 읽는데 한 3일 밖에 안걸릴정도로 책이 우수합니다. 추천 ^^
Ajax의 기본 개념을 익히고 싶으신 분은 O'Reilly의 'Head Rush Ajax'를 추천합니다.

2006년 5월 2일 화요일

Windwos Live:Shopping


MS에서 Ajax 프레임워크를 사용해 제작된 Shopping mall 입니다. 여기서 가장 매력적인것은...!!

쇼핑몰의 Today's best deals에 나와있던 모터로라 레이저폰 ^^
가격이 $0.01인 것으로 봐서 Chan님 말대로 외국에도 3년약정 같은게 있을지도 모르겠네요.

전에 듣기로 Atlas를 사용하기 위해서는 Microsoft.Web.Atlas.dll이 필요하다고 하던데..
개발쪽에만 필요한건지 정확하게는 모르겠네요.. 검색했을때 파일이 따로 나오지는 않더군요.
흠냠~

XHR이란?

Ajax에서 XMLHttpRequest를 줄여서 부르는 말이다.