jQuery 유용한 팁, 노하우, 이벤트, 문제 해결

jQuery를 처음 사용할 때

"어 이게 왜 안돼지?" 하는 상황이 종종 생깁니다.

제가 jQuery를 1.4.2 버전 때 첨 접하고 나서

지금까지 쭉 써오고 있는데

제가 모든 API를 섭렵하고 매일매일

jQuery를 Heavy하게 쓰는 유저는 아니지만

경험을 통해 얻은 팁 몇가지가 있습니다.

< DOM이 다 로드 된 이후에 처리하기 > 
DOM이 다 로드 된 이후에 처리하지 않으면

아무리 셀렉터를 이용해서 선택을 한들 DOM 객체를 인식하지 못하고

공들여 쓴 JavaScript + jQuery 소스가 제대로 작동하지 않게 되는데요.

기본적이지만 짚고 넘어가겠습니다.

$(document).ready(function() {
    // Source Code Start
});

또는

$(function() {
    // Source Code Start
});

이렇게 해주면 저 안에 소스 코드를 작성하면

모든 DOM이 로드 된 이후에 저 코드를 실행하게 됩니다.

< 동적으로 생성된 DOM에 해당되는 이벤트 처리하기 >
동적으로 생성된 DOM 같은 경우에는 jQuery의 일반적인 이벤트 리스너인

.bind 또는 단축 API인 .click, .keypress, keyup 등으로 이벤트 캐치를 하지 못합니다.

하지만 해결책이 있는데요. 그것은 바로 .live 입니다. 

$("#example").live('click', function(e) {
    // Source Code Start
});

이렇게 해주면 example이라는 Id를 가지고 있는 DOM 객체가 지워졌다 생성되었다 하더라도

저 코드를 통해 지속적으로 처리를 할 수 있게 됩니다.

< 여러개의 선택된 DOM 객체 중 클릭 된 객체 선택하기 >

예를 들어 여러개의 DIV 를 선택 후           예)  $("div")

클릭 된 객체에만 무언가를 해주고 싶거나 클릭 된 객체의 css만 변경하거나

attribute를 알아내거나 변경해주고 싶거나

안의 값을 바꿔주고 싶을 텐데요.

중요한 건 내가 정확하게 원하는 객체를 선택하는 것입니다.

    
$("div").click(function() {
    alert( $(this).html() );
});

이렇게 해주면

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

이렇게 여러개 DIV 객체 중 클릭 된 객체의 내용인 숫자가 alert창에 뜨게 됩니다. 

< 반복해서 사용할 DOM 객체 그룹은 기억해두고 사용하기 >
사실 jQuery에서 $("div") 을 반복해서 사용하게 되면
sizzle이라는 엔진이 매번 모든 div 태그를 탐색하게 됩니다.
이건 상당히 비효율적인데요.
어떤 처리를 해줄 때 한번만 선택한다면 상관없지만
반복적으로 $("div")를 사용하게 된다면 속도가 저하될 수 있습니다.

따라서 간단히

var divs = $("div");

이렇게 해주면 매번 $("div") 할 필요 없이 divs를 활용하여 DOM 객체에 접근하기 때문에

이전 방식보다 불필요한 탐색을 하지 않기 때문에 속도가 향상됩니다.

< 문자열 합치는 연산은 배열을 활용하는게 더 좋다? >

이건 사실 jQuery 팁이라고 하긴 뭐하고, 그냥 JavaScript 팁인데요.

문자열을 합칠 때 단순히

var sentence = "Inspired";

sentence += " ";
sentence += "Programming";
sentence += " ";
sentence += "By";
sentence += "InspiredJW";

alert( sentence );

이런식으로 하는 것보다

var sentence = [ 'Inspired', 'Programming', 'By', 'InspiredJW' ];
alert( sentence.join(' ') );

이렇게 해주는 것이 더 연산이 빠릅니다.

연산이 더 빠르다는 증거 자료입니다. 

그래서 저는 보통 AJAX 요청을 통해 DOM을 생성 하거나 할 때

소스 가독성을 위해 Line By Line, 문자열로 HTML 소스를 JavaScript 소스 안에서

써 내려가는데요. 이 때 Line By Line 을 해야 하기 때문에

문자열을 붙여야 하죠. 이게 길수도 있고 짧을 수도 있기 때문에

(이게 여러개의 DOM일수록 합칠 문자열이 길어지기 때문) 

저는 이렇게 배열과 join을 사용해서 문자열을 합칩니다.