Firejune

며칠 전 jQuery 1.4 버전이 공개되었습니다. jQuery를 기반으로 구축된 웹사이트를 1.4버전으로 업데이트하는 작업이 예정되어 있다면 지금부터 소개할 15개 항목을 꼭 숙지하세요. 새롭게 추가된 기능과 향상된 기능들을 제대로 활용하기 위한 방법들을 정리한 것입니다. 기존에 작성했던 코드 보다 더욱 성능이 향상될 수도 있으니까요.

1. jQuery(…) 속성 부여의 변화

jQuery 1.4부터는 요소(element)의 속성을 컬렉션(collection) 형식으로 전달하는 것을 지원합니다. 이것은 "attr" 따위의 메서드(method)들을 여러번 작성하지 않고 한번에 처리하는 효과가 발생합니다. 컬렉션은 두번째 인자에 작성되며 개체(object) 형식으로 작성해야 합니다. 또한 이 것은 요소를 생성할 때에도 마찬가지로 적용됩니다.

자, 여러가지 속성을 가진 앵커(anchor) 요소를 생성해 봅시다. jQuery 1.4와 함께라면 다음처럼 작성하면 됩니다. :

jQuery('<a/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
});

위 작성 예제에서 "text" 속성이 눈에 밟힐 것입니다. 듣도 보도 못한 이 비표준 속성은 과연 무엇을 의미할까요? 네 그렇습니다. "text" 속성은 jQuery의 ".text()" 메서드를 호출하는 효과가 발생하며, 앵커의 문자열로 삽입되는 특수한 속성인 것입니다.

조금 더 재미있는 예제를 작성해 봅시다. :

jQuery('<div/>', {
    id: 'foo',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

일반적인 "id" 속성이 추가되었군요. 어라? 또다시 눈에 밟히는 두 녀석이 나타났습니다. 바로 "css"와 "click" 속성입니다. 무엇을 의미하는 속성들일까요? 네 그렇습니다. 앞서 말씀 드렸듯이 jQuery의 "css"와 "click" 메서드를 호출하는 특수한 속성들입니다. 아직도 모르겠다고요? 이즈음해서 눈치채지 못하면 조금 곤란한데요. 이해를 돕기 위해 jQuery 1.3.x에서 위와 동일한 예제를 작성하면 다음과 같습니다. :

jQuery('<div/>')
    .attr('id', 'foo')
    .css({
        fontWeight: 700,
        color: 'green'
    })
    .click(function(){
        alert('Foo has been clicked!');
    });

더욱 자세한 정보 : jQuery(…)

2. 새로운 DOM 선택 방법 “until”!

jQuery 1.4에는 DOM을 탐색하기 위한 3개의 신규 메서드가 추가되었습니다. "nextUntil", "prevUntil" 그리고 "parentsUntil"입니다. 이것은 특정한 방향으로 DOM을 선택할 수 있음을 의미합니다. 자, 다음과 같은 과일 목록이 있다고 가정해 봅시다. :

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>

    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

"Apple"(사과) 이후의 모든 요소를 선택했습니다. 그러나 "Strawberry"(딸기)까지의 요소만을 필요로 한다면 다음 처럼 작성할 수 있습니다. :

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// Selects Banana, Grape, Strawberry

더욱 자세한 정보 : prevUntil, nextUntil, parentsUntil

3. 이벤트 핸들러를 다중으로 바인딩하기

이벤트 핸들러들 역시 복합적으로 일괄 반영할 수 있게 되었습니다. 다음 처럼 말예요. :

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
})

그리고 이것은 ".one()" 메서드에도 사용할 수 있다는 사실을 잊지 마세요.

더욱 자세한 정보 : .bind(…)

4. 프로퍼티 단위 Easing

이전에는 하나의 애니메이션에 하나의 "easing"만을 사용할 수 있었지만, jQuery 1.4부터는 속성 단위로도 "easing"을 사용할 수 있게 되었습니다. 그리고 기본으로 "swing"과 "linear" 두가지 함수를 내장하고 있습니다. 만약 더욱 많은 "easing" 기능을 추가하려면 언제든지 다운로드해서 추가할 수 있습니다.

"animate" 메서드에 최종 경로에 해당하는 CSS 속성인 "left"와 "top"에 값을 입력하고 "top" 속성에만 "easing"을 반영한 예제입니다. :

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

요런 액션이 만들어집니다!

"easing" 기능을 정의하기 위한 또다른 방법으로는 두번째 인자에 옵션으로 할당하는 방법이 있습니다. "specialEasing" 속성을 다음 처럼 작성하세요. :

jQuery('#foo').animate({
    left: 500,
    top: 500
}, {
    duration: 2000,
    specialEasing: {
        top: 'easeOutBounce'
    }
});

더욱 자세한 정보 : per-property easing

5. 새로운 Live Event들!

앞으로 생성될 요소에게 발생할 이벤트를 미리 지정할 수 있는 ".live()" 메서드에서 사용할 수 있는 이벤트 종류가 늘었습니다. jQuery 1.4부터는 "submit", "change", "focus" 그리고 "blur"입니다. ".live()" 메서드는 아주 많은 요소들에 이벤트 핸들러를 등록할 때 유용합니다. ".live()" 메서드를 이용하면 이벤트 할당 이후 새롭게 추가되는 요소에도 반영되기 때문에 효율적입니다.

그러나 이벤트의 이름을 작성할 때 신중해야합니다. "focusin" 그리고 "focusout" 은 "focus" 와"blur" 이벤트를 위임하기 때문입니다.

jQuery('input').live('focusin', function(){
    // do something with this
});

6. 함수의 컨텍스트 조작하기

jQuery 1.4부터 새롭게 제공되는 "proxy" 함수는 jQuery의 네임스페이스를 관리할 수 있게합니다. 이 함수는 "scope"(스코프)와 메서드 이름을 받는 두개의 인자를 가집니다. 자바스크립트의 "this" 키워드를 통하여 다른 개체를 유지할 수 있게 합니다.

설명이 난해하죠? 예를 들어봅시다. "app" 개체는 "config" 개체와 "clickHandler"메서드로 구성된 두개의 속성을 가지고 있습니다. :

var app = {
    config: {
        clickMessage: 'Hi!'
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};

"clickHandler" 메서드를 실행해 보면 "this" 키워드를 통하여 "app" 개체에 접근하고 "config" 개체를 호출하여 값을 취득할 수 있음을 확인할 수 있습니다. :

app.clickHandler(); // "Hi!" is alerted

자, 이제 이 메서드를 이벤트 핸들러로 바인딩해 봅시다. :

jQuery('a').bind('click', app.clickHandler);

이렇게 바인딩된 메서드는 정상적으로 작동하지 않습니다. 왜냐하면 jQuery(정확히 말하면 event model)에 의해서 "this"가 재정의 되어 버리기 때문입니다. 이러한 문제들을 해결(우회)하기 위해서 제공하는 함수가 바로 "proxy"입니다.

jQuery('a').bind(
    'click',
    jQuery.proxy(app, 'clickHandler')
);

이제 앵커를 클릭하면 "Hi!"라는 문구가 나타날 것입니다.

"proxy" 함수가 리턴하는 것은 "wrapped"된 함수입니다. 여기에는 이벤트가 되돌려준 개체와 "app"가 들고있는 두 속성을 "this"로 확장해서 돌려준 것입니다. 이것은 이벤트를 바인딩 할 때 뿐만아니라 플러그인을 만들거나 콜백을 호출하는 데에도 유용하게 사용될 수 있습니다.

편집자 주 - 이것은 Prototype에서 오래전부터 제공하던 기능입니다. 개인적으로 "jQuery.scope" 라는 함수로 만들어 사용해 왔는데, 이 기법을 활용하면 매우 엘레강스한(?) 코딩을 구사할 수 있습니다. 1.4 버전부터는 공식으로 지원하게 된 점이 가장 마음에 드는 부분입니다.

더욱 자세한 정보 : jQuery.proxy

7. 지연되는 애니메이션 대기열(queue)

이제부터는 애니메이션 대기열에 지연 효과를 추가할 수 있습니다. ".delay()" 메서드를 사용하여 콜백과 애니메이션 사이이의 혼란을 방지하고 "setTimeout" 함수를 호출하지 않고도 지연시키고 싶은만큼 애니메이션을 지연시킬수 있게 된 것입니다. :

jQuery('#foo')
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in

".delay()"의 첫 번째 인자로 밀리세컨즈 단위의 지연 시간값을 기입합니다. 만약 다른 애니메이션 대기열을 사용하려면 두번째 인자로 대기열 이름을 전달할 수 있습니다.(기본: "fx")

더욱 자세한 정보 : .delay(…)

8. 요소가 가진 것을 확인하기

jQuery 1.4는 ".has()"와 같은 메서드를 사용하여 매우 쉽게 요소 또는 배열을 확인할 수 있도록 만들어졌습니다. ".has()"는 jQuery의 DOM 선택자를 필터링하는 메서드로 부모 요소가 가진 특정한 자식 요소들을 확인하여 선택할 수 있습니다.

jQuery('div').has('ul');

위 코드는 문서의 모든 DIV요소를 찾아내고 이 요소들 중 UL요소를 포함하는 DIV요소만을 선택하여 반환하는 코드입니다.

또한 jQuery 네임스페이스에 "contains" 함수를 제공합니다. 이 함수는 낮은 수준의 함수로써 두개의 DOM 노드를 인자로 받아 수용여부를 구분합니다. 첫 번째 요소가 두번째 요소를 포함하고 있는지에 대한 여부를 불린(boolean) 형식으로 반환합니다.

jQuery.contains(document.documentElement, document.body);
// Returns true - <body> is within <html>

더욱 자세한 정보 : .has(…), jQuery.contains(…)

9. 요소 풀기(Unwrap)!

지금까지 ".wrap()" 메서드를 사용해 온 동일한 방법으로 jQuery 1.4에 추가된 ".unwrap()" 메서드를 완전히 반대격으로 사용할 수 있습니다. 다음과 같은 DOM 구조가 있다고 가정해 봅시다. :

<div>
    <p>Foo</p>
</div>

그리고 다음과 같이 작성하여 감싸고 있는 요소를 제거할 수 있습니다. :

jQuery('p').unwrap();

결과적으로 아래와 같은 DOM 구조를 얻습니다. :

<p>Foo</p>

기본적으로 이 메서드는 특정한 부모요소를 제거합니다.

더욱 자세한 정보 : .unwrap(…)

10. 데이터를 유지한 상태로 요소 제거하기

새로운 ".detach()" 메서드는 DOM에서 요소를 제거합니다. ".remove()" 메서드 처럼 말이죠. 이 새로운 방법의 중요한 차이점은 해당 요소가 가진 데이터 요소를 파괴하지 않는다는 것입니다. 이 데이터는 jQuery의 이벤트 시스템에 보존되어있기 때문에 ".data()" 메서드 등을 그대로 사용하여 다시금 호출할 수 있습니다.

재사용될 만한 요소에만 사용하는 것이 중요합니다. DOM에서 요소를 제거하거나 추가하는 일이 빈번하게 발생할 때 매우 유용하게 사용할 수 있습니다.

var foo = jQuery('#foo');

// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});

foo.detach(); // Remove it from the DOM

// … do stuff

foo.appendTo('body'); // Add it back to the DOM

foo.click(); // alerts "Foo!"

더욱 자세한 정보 : .detach(…)

11. index(…) 성능 향상

jQuery 1.4부터는 ".index()"메서드의 새로운 사용벙법이 추가되었습니다. 이 메서드는 선택된 요소가 현재 컬렉션에서 몇번째 요소인지를 알려줍니다. 다음과 같은 DOM 구조가 있다고 가정해 봅시다. :

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>

    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

목록의 항목을 클릭한 경우 해당 항목이 몇번째 요소인지 알아내기 위해 요소에 이벤트를 할당했습니다. :

jQuery('li').click(function(){
    alert( jQuery(this).index() );
});

jQuery 1.4 부터는 첫번째 인자에 요소 뿐만아니라 선택자를 입력하여 원래 요소의 컬랙션으로 부터 인덱스 번호를 알아낼 수 있습니다.

".index()"의 인자로 선택자를 입력하여 대상이 될 요소를 지정할 수 있지만 기본으로 인접 부모요소를 대상으로 하고 있습니다. 항상 인티저(integer)를 반환하며 대상이 없거나, 문서에서 발견되지 않으면 "-1"을 반환합니다.

더욱 자세한 정보 : .index(…)

12. 함수를 인자로 받는 세터(setter) 메서드들

DOM을 조작하는 대부분의 세터 메서드 호출 방법은 단독 인수인 경우 또는 두번째 인자를 입력하는 경우 (".css()" & ".attr()") 입니다. 이러한 메서드들은 지금까지 모든 컬렉션 요소에 동일한 값을 반영했습니다. 그러나 jQuery 1.4 버전 부터는 인자에 함수를 사용하여 서로 다른 값을 부여할 수 있게 되었습니다.

다음과 같은 세터 메서드들에 함수를 인자로 사용할 수 있습니다. :

• after
• before
• append
• prepend
• addClass
• toggleClass
• removeClass
• wrap
• wrapAll
• wrapInner
• val
• text
• replaceWith
• css
• attr
• html

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

또한, 일부 세터 메서드들 (".html()" 또는 ".attr('href')")은 두 번째 인수를 반환하여 기존 값을 참조할 수도 있습니다. :

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

".css()" 메서드와 ".attr()" 메서드 역시 두번째 인자에 함수로 전달되어 서로 다른 결과를 반영할 수 있고 두번째 인자는 기존 값을 반환합니다. :

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

13. 개체의 유형 확인

jQuery 1.4에는 개체의 유형 확인을 위한 두가지 헬퍼 함수가 추가되었습니다. 첫 번째는 "isEmptyObject"입니다. 이 함수는 인자로 받은 개체가 비어있는지에 대한 여부를 불린 형식으로 반환해 줍니다. 두 번째 함수인 "isPlainObject" 역시 인자로 받은 개체가 일반적인 개체인지 여부를 불린 형식으로 반환합니다. 즉 "{}" 또는 "new Object()"로 생성된 개체인지를 검증하는 것입니다.

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

더욱 자세한 정보 : isPlainObject(…), isEmptyObject(…)

14. Closest(…) 성능 향상

기존 jQuery의 ".closest()" 메서드는 현재 받아들인 선택자에 매치되는 첫번째 요소. 선택된 요소의 처음에서 시작하여 DOM 트리상의 부모 요소로 이동합니다.1.4 버전 부터는 두 번째 인자로 컨텍스트를 받습니다. 이것은 요소를 검색할 범위를 설정하여 성능을 향상시킬 수 있음을 의미합니다.

더욱 자세한 정보 : .closest(…)

15. 새롭게 추가된 focusIn과 focusOut 이벤트

앞서 언급한 바와 같이, "focus"와 "blur" 이벤트를 위임한 것입니다. 이것을 "focusin"과 "focusout"으로 명명한 것 입니다. 특정한 요소 및 자식 요소에서 일어나는 액션을 감지하여 이벤트를 발생합니다.

jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });

주의해야 할 점은 "bubble"이 발생하지 않는 다는 것입니다. 즉 부모 요소는 대상 요소보다 먼저 트리커되는 것을 의미합니다.

더욱 자세한 정보 : focusIn , focusOut events.

NETTUTS에서 포스팅한 내용을 숙지하려는 목적으로 작성하다보니 의미전달이 다소 불분명한 부분들이 있습니다. 원문은 NETTUTS를 참고 하시고, 제작자들이 진행하는 jQuery의 14일 튜토리얼도 참고하면 도움 될 것입니다. 보다 정확한 정보는 API 문서임을 잊지 마세요!

덧. jQuery 1.4는 기반을 뒤업는 업데이트를 포함하고 있기 때문에 1.3.x에서 작동하던 코드가 비정상 적으로 작동할 수 있습니다. John Resig씨는 이와 관련하여 하위 호환성을 유지하기 위한 jquery-compat-1.3 플러그인을 별도로 배포하고 있습니다.

<script src="http://code.jquery.com/jquery.js"></script>  
<script src="http://code.jquery.com/jquery.compat-1.3.js"></script>