The Heungsub

jquery.doctest.visualize.js

Wed, 16 Jun 2010 13:08:00 +0900

예전에 강규영 님이 만드신 JSSpec을 보고 크게 감동한 적이 있었습니다. JSSpec은 JavaScript BDD 프레임워크로 MooTools에서 자체 테스트 툴로 채용하기도 했습니다. 저 또한 MooTools 팬 시절 minto(망한 3D 라이브러리)나 VLAAH 등을 개발하면서 유용하게 사용해왔습니다.

그러다보니 jquery.doctest.js를 만들면서도 JSSpec 스러운 시각화를 꼭 해보고 싶었습니다. 마침내 어제와 오늘, 짬짬이 시간 내어 시각화 기능을 구현했습니다. 원래 jquery.doctest.js는 구조적으로 시각화하기 어려운 면이 있었는데, 작업을 진행하면서 jquery.doctest.js 자체의 품질도 상당 부분 개선할 수 있었습니다.

이곳에서 실제 구동을 확인하실 수 있습니다. 시각화 스크립트의 이름은 jquery.doctest.visualize.js로 정했습니다.

시각화의 가능성만을 우선 확인하려고 했기 때문에 크로스브라우저 등의 문제는 전혀 신경 쓰지 않았습니다. 어쨌든 Windows에서의 Google Chrome 5에서는 정상적으로 나타납니다. 스크립트 내에 포함된 마크업은 어제 만든 multiline.js 형식으로 저장해두었습니다. 썩 좋은 방법은 아니지만 HTML 문서를 먼저 작성해놓고 그대로 카피해도 되니 역시 맘에 듭니다.

모쪼록 jquery.doctest.visualize.js로 즐거운 TDD하시길 바랍니다.

multiline.js

Tue, 15 Jun 2010 13:49:00 +0900

JavaScript에서 여러 줄 또는 큰 문자열을 다루는 방법은 다음과 같습니다.

var a = "" +
        "  Name" +
        "  Heungsub Lee" +
        "  Job" +
        "  Programmer" +
        "  Homepage" +
        "  " +
        '    http://heungsub.net/' +
        "  " +
        "";
var b = ' \
           Name \
           Heungsub Lee \
           Job \
           Programmer \
           Homepage \
            \
             http://heungsub.net/ \
            \
         ';

뭐 불가능한 건 아니지만 +나 \가 지저분하고 불편해서 싫으네요. 그래서 대안으로 multiline.js를 제안해봅니다.

var markup = multiline(function() {/*
  
    Name
    Heungsub Lee
    Job
    Programmer
    Homepage
    
      http://heungsub.net/
    
  
*/});

multiline 함수는 여러줄 주석을 가지고 있는 함수객체를 인자로 받고 주석 내용을 반환합니다. 이것도 그렇게 깔끔하다고 할 순 없지만 스크립트에 HTML코드를 미리 저장해둬야할 경우 유용하지 않을까 기대해봅니다.

jquery.holdevent.js

Tue, 15 Jun 2010 13:29:00 +0900

프론트엔드를 개발하다보면 JavaScript 이벤트를 쓸 일이 많습니다. 이때 HTML 엘리멘트에 JavaScript 함수를 이벤트핸들러로 지정하는 방법은 여러가지가 있죠. 그 중 대표적인 두 가지는 다음과 같습니다.

함수를 먼저 정의하고, onclick 같은 이벤트 속성으로 스크립트를 지정합니다.

 
 example
 Hello, world!

이벤트 속성이 없는 순수한 엘리멘트를 먼저 정의하고, 나중에 스크립트로 핸들러를 지정합니다.

 example
 Hello, world!

HTML 문서와 JavaScript 코드를 분리하여 양쪽을 순수하게 유지시킬 수 있기 때문에 전 두번째 방법을 선호했습니다.

그런데 문제가 있더랍니다. 함수들을 페이지 로드가 끝났을 때(domready) 정의하도록 하다보니 페이지 로딩 중에는 원하는대로 이벤트를 일으킬 수 없었습니다. 그렇다고 첫번째 방법을 사용하면 이벤트 함수 내에서 아직 로드되지 않은 DOM을 건드려 에러를 일으키는 경우가 있을 수 있습니다.

그래서 jquery.holdevent.js를 만들었습니다. 이것을 사용하면, 페이지 로드가 끝나기 전의 이벤트를 모두 붙잡아둘 수 있습니다. 페이지 로딩 중의 이벤트는 모두 큐에 담고 로드가 끝나는 시점에 담겨진 이벤트를 모두 실행합니다.

example
Hello, world!

_click_, _submit_, _focus_ 등 각 이벤트에 대응하는 함수를 사용해 이벤트를 붙잡습니다.

예제: http://lab.heungsub.net/jquery.holdevent.js
테스트: http://lab.heungsub.net/jquery.holdevent.js/test.html
저장소: http://github.com/lunant/jquery.holdevent.js

szymon: NIKE-ing internet brands by Daniel Reese

Mon, 14 Jun 2010 11:12:50 +0900

szymon:

NIKE-ing internet brands by Daniel Reese

jquery.doctest.js

Mon, 10 May 2010 12:27:00 +0900

바로 어제까지 야근 및 특근 릴레이를 끝나치고 짬 내어 jquery.doctest.js를 만들었습니다. jquery.doctest.js는 Python의 doctest 모듈을 흉내낸 jQuery용 테스트 라이브러리입니다.

바로가기: 프로젝트 페이지, 저장소

사용법

우선 js 파일을 작성합니다. 파일명은 example.js로 할까요?

/**
This is the "example" module.

The example module supplies one function, factorial().  For example,

> factorial( 5 );
120
*/

function factorial( n ) {
    /**
    > factorial( 1 );
    1
    > factorial( 30 );
    2.6525285981219103e+32
    */

    if ( n < 0 ) {
        throw new Error( "n must be >= 0" );
    } else if ( Math.floor( n ) !== n ) {
        throw new Error( "n must be exact integer" );
    } else if ( n + 1 === n ) {
        throw new Error( "n too large" );
    }

    var result = 1, factor = 2;

    while ( factor <= n ) {
        result *= factor;
        factor += 1;
    }

    return result;
}

이 스크립트에는 /**로 시작해서 */로 닫히는 주석들이 있습니다. 테스트는 그 안에 작성하면 됩니다.

테스트하기 위해 jQuery.doctest를 실행합니다. jQuery.doctest는 인자로 스크립트의 파일명을 받습니다. jQuery에 의존성이 있으니 미리 불러오는 것을 잊지 마세요!

jquery.doctest.js는 Python의 doctest처럼 REPL로 보이는 부분을 테스트코드로 취해 실행해봅니다. 이 경우 factorial( 5 );의 결과가 5인지, factorial( 1 );의 결과가 1인지, factorial( 30 );의 결과가 2.6525285981219103e+32인지 테스트합니다.

XHR finished loading: "example.js".
----
Trying:
    factorial( 5 );
Expecting:
    120
ok
----
Trying:
    factorial( 1 );
Expecting:
    1
ok
----
Trying:
    factorial( 30 );
Expecting:
    2.6525285981219103e+32
ok
----
563 tests.
3 passed and 0 failed.
Test passed.

모든 테스트를 통과했군요. 테스트에 실패할 경우 다음과 같이 나타납니다.

XHR finished loading: "failed.js".
----
Line 2
Failed example:
    1 + 1 + 1 * 3;
Expected:
    1
Got:
    5
----
Line 4
Failed example:
    "Hello, " + " world";
Expected:
    Hello, world
Got:
    Hello,  world
----
2 tests.
0 passed and 2 failed.
Test passed.

현재 버전에서 결과 메시지는 console로 출력시킵니다. 따라서 console을 지원하지 않는 브라우저에서는 결과를 확인할 수 없습니다.

저장소는 GitHub에 만들어두었습니다. 다음 명령어로 소스를 내려받을 수 있습니다.

$ git clone git://github.com/heungsub/jquery.doctest.js.git jquery.doctest.js

라이센스는 jQuery와 동일한 MIT+GPL2입니다. 라이센스를 위반하지 않는 한 자유롭게 사용하실 수 있습니다.

pengdo: redesignrelated: “An Inconvenient Drop Shadow,” a...

Fri, 07 May 2010 09:24:20 +0900

pengdo:

redesignrelated:

“An Inconvenient Drop Shadow,” a look at the refreshed Google logo
(via Brand New)

Google에서 me2day를 쳐보세요! kkung: google에서 me2day 검색하면 sub 페이지가...

Tue, 20 Apr 2010 17:44:09 +0900

Google에서 me2day를 쳐보세요!

kkung: google에서 me2day 검색하면 sub 페이지가 걸리네요.

홍민희: 그… me2virus가 워낙 대박이라 그럴듯

pengdo: Moonwatch

Wed, 07 Apr 2010 12:57:18 +0900

pengdo:

Moonwatch

[독후감] 미학적 인간 - 호모 에스테티쿠스

Tue, 30 Mar 2010 09:47:12 +0900

[독후감] 미학적 인간 - 호모 에스테티쿠스

기침으로 웃음 무마하기 스킬

Wed, 17 Mar 2010 10:28:50 +0900

xym: 기침으로 웃음 무마하기 스킬 발동
sub: ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
sub: 아
sub: 그런거였어?
sub: 왜 기침하나 했네

hongminhee: 오랜만에 VLAAH 대문을 바꿨다. 오랫동안 “디스트릭트 9”이 첫 화면에 있다보니 서비스가...

Mon, 15 Mar 2010 16:52:00 +0900

hongminhee:

오랜만에 VLAAH 대문을 바꿨다. 오랫동안 “디스트릭트 9”이 첫 화면에 있다보니 서비스가 망한 느낌이 너무 강했기 때문이다.

작업자는 나.

사무실용 잠꼬대

Fri, 12 Mar 2010 15:38:30 +0900

xym: 흠
xym: 또 졸다가 클날뻔했네
sub: ㅋㅋㅋㅋㅋㅋㅋ 형 소리냈어
xym: ㅇㅇ
xym: 흐응하고
sub: 다행히 유레카! 하는것처럼 들렸음
xym: ㅋㅋㅋㅋㅋㅋㅋㅋ
xym: 나도
xym: 깨면서
sub: 완전 훼이크 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
xym: "아 젠장 하지만 이건 오, 하는 것과 비슷하다"
sub: 비즈니스스킬
sub: ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
xym: ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
xym: 사무실용 잠꼬대

Pastedown: the pastebin service for Markdown documents

Mon, 08 Mar 2010 10:28:36 +0900

Pastedown: the pastebin service for Markdown documents:

hongminhee:

최근에 짬짬이 시간을 내서 만들었다. 전부터 스스로 필요하다고 생각했던 서비스다. Markdown 문서 전용 붙여넣기(pastebin) 서비스다. 붙여넣기 서비스가 무엇이냐면, 여러줄로 된 긴 글을 쓰기는 곤란한 IRC 같은 채팅이나 Twitter 같은 마이크로블로그 등에서 인용을 위해 따로 본문 URL을 만들어 링크하는 서비스다.

로그인을 할 경우 자신의 글을 수정할 수 있게 된다. 그리고 모든 수정 사항은 위키처럼 이력 관리가 된다. 다만 아직 차이점을 보기 위한 diff는 구현하지 않았다. 로그인은 VLAAH 계정으로 하면 된다.

홍민희 선배가 Pastedown을 공개했다. 다른 서식자들 보다 Markdown을 더 능숙하게 다루는 나에겐 활용도가 높을 것 같다.

한국의 dahlia 선배는 프로그래밍을 잘하고 일본의 dahlia 님은 그림을 잘그리는군.

Fri, 05 Mar 2010 13:11:34 +0900

한국의 dahlia 선배는 프로그래밍을 잘하고 일본의 dahlia 님은 그림을 잘그리는군.

me2Vote 공개

Wed, 03 Mar 2010 17:36:00 +0900

미투데이에서의 설문조사를 위한 애플리케이션, me2Vote를 만들었습니다.

미투데이의 콜백페이지를 이용한 애플리케이션이고 Google Chart API를 사용합니다. 사람들의 투표내역은 해당 포스팅의 코멘트에서 추출합니다. 한 사람이 의견을 바꿀 경우 마지막 의견만 반영됩니다.

신경 쓴 부분은 인터렉션입니다. 해당 투표항목을 클릭하면 댓글입력창을 자동으로 채워주고 사용자가 투표한 항목에는 체크표시를 해줍니다. 댓글을 작성할 경우엔 자동으로 갱신됩니다.

Chrome, Firefox, Opera에서 무리 없이 작동하고 InternetExplorer 6에선 자바스크립트 에러가 나지만 차트를 표시하는 데는 문제 없습니다. 상위 Internet Explorer에서는 테스트해보지 못했습니다.

아쉽게도 동일한 아이디어로 SOL 님의 me2poll이 이미 공개되어 있었습니다(제보). 작업하던게 아까워서 공개하긴 했지만 사용법을 제외하곤 me2poll과 완전히 같기 때문에 미투앱 페이지에는 등록하지 않기로 했습니다(부디 SOL 님께서 기분 나빠하지 않으셨음 좋겠네요).

한 발 늦긴 했지만 me2Virus 이후 오랜만에 구현한 콜백애플리케이션과 미투데이 페이지와의 상호작용이라 재밌는 작업이었습니다. :)

중3(2004년) 때 습작 — 마리오 달리기

Wed, 03 Mar 2010 11:52:01 +0900

중3(2004년) 때 습작 — 마리오 달리기

중3(2004년) 때 습작 — 마리오 달리기 스케치

Wed, 03 Mar 2010 11:51:38 +0900

중3(2004년) 때 습작 — 마리오 달리기 스케치

중3(2004년) 때 습작 — 펀치!

Wed, 03 Mar 2010 11:48:00 +0900

중3(2004년) 때 습작 — 펀치!

pengdo: thedailywhat: Sam Loman: “Underskin” Visible Human...

Tue, 02 Mar 2010 13:07:10 +0900

pengdo:

thedailywhat:

Sam Loman: “Underskin”

Visible Human anatomy visualization drawn tube-map style.

[streetanatomy.]

Vector Social Media Icons

Tue, 02 Mar 2010 10:39:34 +0900

Vector Social Media Icons