Posted 2 months ago

jquery.doctest.visualize.js

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

JSSpec 스크린샷

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

jquery.doctest.visualize.js 스크린샷

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

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

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

View Comments
Posted 2 months ago

multiline.js

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

var a = "<dl>" +
        "  <dt>Name</dt>" +
        "  <dd>Heungsub Lee</dd>" +
        "  <dt>Job</dt>" +
        "  <dd>Programmer</dd>" +
        "  <dt>Homepage</dt>" +
        "  <dd>" +
        '    <a href="http://heungsub.net/">http://heungsub.net/</a>' +
        "  </dd>" +
        "</dl>";
var b = '<dl> \
           <dt>Name</dt> \
           <dd>Heungsub Lee</dd> \
           <dt>Job</dt> \
           <dd>Programmer</dd> \
           <dt>Homepage</dt> \
           <dd> \
             <a href="http://heungsub.net/">http://heungsub.net/</a> \
           </dd> \
         </dl>';

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

var markup = multiline(function() {/*
  <dl>
    <dt>Name</dt>
    <dd>Heungsub Lee</dd>
    <dt>Job</dt>
    <dd>Programmer</dd>
    <dt>Homepage</dt>
    <dd>
      <a href="http://heungsub.net/">http://heungsub.net/</a>
    </dd>
  </dl>
*/});

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

View Comments
Posted 2 months ago

jquery.holdevent.js

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

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

     <script>
       function fn( elem ) {
         alert( $( "p" ).text() );
         return false;
       }
     </script>
     <a href="http://example.net/" onclick="return fn( this );">example</a>
     <p>Hello, world!</p>
    
  2. 이벤트 속성이 없는 순수한 엘리멘트를 먼저 정의하고, 나중에 스크립트로 핸들러를 지정합니다.

     <a href="http://example.net/">example</a>
     <p>Hello, world!</p>
     <script>
       function fn( elem ) {
         alert( $( "p" ).text() );
         return false;
       }
       $( "a" ).click(function() { return fn( this ); });
     </script>
    

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

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

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

<a
  href="http://example.net/"
  onclick="return _click_( this ) && fn( this );"
>example</a>
<p>Hello, world!</p>
<script>
  function fn( elem ) {
    alert( $( "p" ).text() );
    return false;
  }
</script>

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

View Comments
Posted 2 months ago
szymon:

NIKE-ing internet brands by Daniel Reese

szymon:

NIKE-ing internet brands by Daniel Reese

via szymonView Comments
Posted 4 months ago

jquery.doctest.js

바로 어제까지 야근 및 특근 릴레이를 끝나치고 짬 내어 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에 의존성이 있으니 미리 불러오는 것을 잊지 마세요!

<script type="test/javascript" src="jquery-1.4.1.js"></script>
<script type="test/javascript" src="jquery.doctest.js"></script>
<script type="test/javascript">
// <![CDATA[
    jQuery.doctest( "example.js" );
// ]]>
</script>

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입니다. 라이센스를 위반하지 않는 한 자유롭게 사용하실 수 있습니다.

View Comments
Posted 4 months ago
pengdo:


redesignrelated:

“An Inconvenient Drop Shadow,” a look at the refreshed Google logo(via Brand New)
via pengdoView Comments
Posted 4 months ago

Google에서 me2day를 쳐보세요!

  1. kkung: google에서 me2day 검색하면 sub 페이지가 걸리네요.
  2. 홍민희: 그… me2virus가 워낙 대박이라 그럴듯
View Comments
Posted 5 months ago
via pengdoView Comments
Posted 5 months ago

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

View Comments
Posted 5 months ago

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

  1. xym: 기침으로 웃음 무마하기 스킬 발동
  2. sub: ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
  3. sub:
  4. sub: 그런거였어?
  5. sub: 왜 기침하나 했네
View Comments