jQuery란?
jQuery는 가볍고 빠르며, 간결한 오픈소스 스크립트 라이브러리입니다. 이를 이용하면 Rich 웹 UI를 개발하는 데 도움이 되는 다양한 기능들 즉, HTML 문서 트래버스, 이벤트 처리, 애니메이션, Ajax 상호 작용 등을 지원하여 빠르고 견고하게 리치 웹 애플리케이션 개발을 할 수 있도록 지원합니다.
이러한 jQuery의 기능적인 특징을 핵심 키워드만 뽑아서 정리하자면,
- 막강한 CSS 셀렉터
- 크로스 브라우저 지원
- 메서드 체인
- Ajax 지원
- 풍부한 플러그 인 지원
정도로 설명할 수 있지 않을까 싶네요. 물론, 이 외에도 많은 것들이 제공되지만 말이죠.
개발 준비사항
처음 jQuery를 공부하고자 맘을 먹고, jQuery 웹 사이트에 가면 이런 생각이 들지도 모르겠습니다.
"에~ 그러니깐, 어디서부터 뭘 어떻게 봐야 하는 거지?"
그렇습니다. 어린 시절부터 완전정복, 맨투맨 류의 참고서적에 길들여져 있는 우리들은 항상 신기술을 접할 때 어떻게 시작해야 할지를 막막해하곤 하죠. 이는 비단 저도 예외가 아닙니다. 하지만, 언제나 신기술이 나왔을 때 가장 좋은 설명서는 해당 웹 사이트에 공개되어 있는 튜토리얼이라는 것은 변함이 없는 사실이지요(물론, 저의 경우는 인터넷 서점에서 관련 서적을 구입한 뒤, 1독이상을 하고 난 뒤에 튜토리얼을 보는 편입니다만, 이는 지극히 개인적인 성향에 따라 다른 부분입니다). 여러분도 성향에 따라 튜토리얼을 보셔도 되고, 제 강좌를 보셔도 되고, 서적을 구매해서 보셔도 됩니다(제 강좌에는 너무 의존하지 마세요 ㅎ).
공부하는 방식은 각자의 선택에 따라 다르지만, jQuery 라이브러리는 모두가 반드시 다운로드 하여 준비해야 하는 사항입니다. 해서, 우선 jQuery를 다운로드 받도록 하죠. http://jquery.com/ 에 가면 메인 화면에서 바로 다운로드가 가능하며, 현재 강좌 작성 기준으로 jQuery의 최신 버전은 1.3.2 를 얻으실 수 있습니다. 그리고, 구하신 파일은 여러분이 작업하는 어떠한 웹 애플리케이션에든지 복사해서 쓰시면 됩니다.
그럼 이제 jQuery의 셀렉터를 이야기하는 것으로 본격적으로 시작해볼까요?
jQuery 셀렉터 : 기본
jQuery의 가장 강력한 부분은 HTML DOM을 마음대로 트래버스 즉, 순회 탐색할 수 있다는 것인데요. 놀랍게도, CSS 셀렉터를 사용하여 원하는 개체를 탐색할 수 있습니다. CSS 셀렉터(Selector)는 대부분의 웹 개발자라면 이미 아실 것이라 생각합니다. 다음과 같이 css 파일에서 사용했던 표현식이 바로 CSS 셀렉터이니까요.
div p {
font-color:red;
}
#loginID {
font-weight:bold;
background:yellow;
}
.Columns {
padding:10px;
background:white;
}
div p라는 셀렉터는 현재 문서 상에서 div 요소의 자식으로 존재하는 모든 p 요소들에 적용되며, #loginID는 loginID라는 id 값을 가진 요소에, .Columns는 class 어트리뷰트 값으로 Columns를 갖는 모든 요소에 적용되는 것이죠.
이러한 셀렉터를 그대로 jQuery에서 사용할 수 있다는 것은 놀랍습니다. jQuery에서는 원하는 DOM 요소의 그룹을 찾기 위해서 $(selector) 혹은 jQuery(selector)과 같은 표현식을 사용하기에, 위의 3가지 셀렉터를 다음과 같이 사용할 수 있습니다.
$("div p") 혹은 jQuery("div p")
$("#loginID") 혹은 jQuery("#loginID")
$(".Columns") 혹은 jQuery(".Columns")
그리고, 각각의 표현식은 각 DOM 요소의 확장 개체인 jQuery 개체 집합을 반환합니다. DOM 요소를 직접 반환해주는 것이 아니라 그의 래퍼(Wrapper)인 jQuery 개체로 반환해 주기 때문에 직접 DOM 요소를 제어할 때보다 훨씬 편하고 쉽게 개체를 제어할 수 있다는 장점이 있습니다. 예를 들어, $("div p").hide() 와 같은 명령을 사용하면, 현재 문서 상에서 div 요소의 자식으로 존재하는 모든 p 태그집합들은 눈에서 보이지 않게 됩니다. hide()라는 명령은 jQuery 개체가 지원하는 명령이며, 추후 알아보게 될 것인데요. jQuery 셀렉터에 의해 반환되는 개체가 일반 DOM 개체라면 이러한 명령을 사용할 수 없겠지만, jQuery 개체 집합으로 반환되기에 그러한 명령을 사용할 수 있게 되는 것입니다. (아직, hide() 명령의 역할에 대해서는 설명하지 않았지만, 이름만 봐도 기능을 추측할 수는 있겠죠?)
모든 요소를 선택하기 위해서는 $("*")와 같은 표현을 사용할 수 있습니다.
또한, jQuery는 이러한 기본적인 CSS 셀렉터 외에 고급 CSS 셀렉터도 지원합니다. 예를 들면, 계층 셀렉터, 일반 필터 셀렉터, 어트리뷰트 필터 셀렉터 등이 바로 그것인데요. 다음은 계층 셀렉터의 예입니다.
p > a : p 요소 바로 아래 자식인 a 요소(하이퍼링크)와 일치된다.
div + p : div 요소의 바로 다음에 나오는 형제 p 요소와 일치된다.
div ~ p : div 요소의 다음에 나오는 모든 형제 p 요소와 일치된다.
$("p a")와 $("p > a")의 차이점은 전자가 p요소 하위에 존재하는 모든 a 요소를 선택한다면, 후자는 p 요소 바로 아래의 자식으로 놓여있는 a 요소만을 선택한다는 것이 차이입니다.
즉, 다음과 같은 html이 존재한다면,
<p>
<span>
<a href="1.aspx">1.aspx</a>
</span>
<br />
<a href="2.aspx">2.aspx</a>
</p>
$("p a")는 1.aspx 링크와 2.aspx 링크 모두를 선택하지만, $("p > a")는 2.aspx 링크만을 선택한다는 것이죠.
div + p 및 div ~ p 와 같은 경우는 자식이 아니라 형제 요소와 연관이 있습니다. 즉, 다음과 같은 html 있다고 가정할 경우에 말입니다.
<div>앨범 목록입니다</div>
<p>노라조</p>
<span>수퍼맨</span>
<p>이적</p>
<span>다행이다</span>
<p>현진영</p>
<span>Break me down</span>
$("div + p")는 div 바로 다음에 나오는 형제 수준의 p 요소, 즉, "노라조"를 선택하게 되는 반면, $("div ~ p")는 div 요소 다음에 나오는 형제 요소들 중 모든 p 요소, 즉, "노라조", "이적", "현진영"과 일치된다는 것이죠.
더불어, a[title]이나 a[href^="mailto:"]와 같이 어트리뷰트를 기반으로 하는 필터링도 가능한데요. 특정 어트리뷰트가 존재하거나, 그 어트리뷰트 값이 특정 값으로 시작 혹은 끝나거나, 특정 값을 포함하거나 하는 부분까지 비교해서 선택할 수 있습니다. 다음은 이러한 어트리뷰트 필러의 예입니다.
a[title] : title 어트리뷰트를 갖는 하이퍼 링크와 일치된다.
a[href^="mailto:"] : href 값이 mailto로 시작하는 하이퍼 링크와 일치된다.
a[href$=".pdf"] : pdf 파일에 링크가 걸린 모든 하이퍼링크와 일치된다.
a[href*="taeyo.net"] : taeyo.net이라는 값이 포함되어 있는 모든 하이퍼 링크와 일치된다.
input[type="text"] : text 형식의 입력 컨트롤과 일치된다.
이러한 선택이 가능한 것은 시작부분(^) 혹은 끝부분($)을 가리키는 정규 표현식을 jQuery가 지원하기 때문입니다.
그러면, 우선 지금까지 알아본 셀렉터들, 가장 기본이 되는 이러한 셀렉터들을 한번 정리해보고 넘어가도록 하겠습니다.
jQuery가 지원하는 CSS 셀렉터들
| 셀렉터 |
설명 |
| * |
모든 요소와 일치 |
| E1 |
E1(태그명)인 모든 요소와 일치 |
| E1.class |
E1(태그명) 요소의 클래스가 class와 동일한 요소와 일치 |
| E1.#id |
E1(태그명) 요소의 id 어트리뷰트 값이 id와 동일한 요소와 일치 |
| E1 E2 |
E1 요소의 자식인 모든 E2(태그명) 요소와 일치 |
| E1 > E2 |
E1 요소 바로 아래 자식인 E2 요소와 일치 |
| E1 + E2 |
E1 요소의 바로 다음에 나오는 형제요소 E2와 일치 |
| E1 ~ E2 |
E1 요소의 다음에 나오는 모든 형제 E2와 일치 |
| E1[attr] |
attr 어트리뷰트를 갖는 E1 요소와 일치 |
| E1[attr=val] |
attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치 |
| E1[attr^=val] |
attr 어트리뷰트의 값이 val 값으로 시작하는 E1 요소와 일치 |
| E1[attr$=val] |
attr 어트리뷰트의 값이 val 값으로 끝나는 E1 요소와 일치 |
| E1[attr*=val] |
attr 어트리뷰트의 값이 val 값을 포함하는 E1 요소와 일치 |
그리고, 이러한 셀렉터를 사용하는 가벼운 예제를 한번 같이 해 보도록 하겠습니다. 가상 디렉토리를 하나 만드시고, 다음과 같은 htm 파일을 하나 작성하도록 하세요. 물론, 동일 폴더에는 아까 다운로드 받은 jQuery 자바스크립트 파일(저의 경우, jquery-1.3.2.min.js)이 있어야 하겠죠?
Default.htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(
function(){
$("#song").css("border", "solid 1px silver");
$("a[href^='mailto:']").css("background", "lightblue");
$("input[type='button']").css("background", "yellow");
$("div ~ b").css("background", "#efefef");
$("div > b").css("border", "1px");
});
</script>
<style type="text/css">
* { font-size:12px; font-family:돋움 }
</style>
</head>
<body>
<div>
<span><a href="http://taeyo.net">taeyo.net</a></span>
<br />
<a href="mailto:taeyo@A.net">태오의 메일주소</a>
<p>
<input type="button" value클릭~ />
<input type="checkbox" />
<input type="radio" />
</p>
<div id="song">요즘 노래방에서 부르는 노래 목록입니다</div><br />
<b>노라조</b>
<span>수퍼맨</span><br />
<b>이적</b>
<span>다행이다</span><br />
<b>현진영</b>
<span>Break me down</span>
</div>
</body>
</html>
예제는 간단합니다. jQuery 셀렉터를 사용해서 몇몇 DOM 요소의 스타일을 변경하는 것이 전부이니까요. 그렇다고, 설명을 안하면 뭔가 서운하니깐, 이야기를 한번 해 보죠.
일단, $(document).ready();라는 함수에 대해서는 설명을 드릴 필요가 있을 듯 합니다. 이는 jQuery가 제공하는 이벤트 메서드 중 하나인데요. 문서의 DOM 요소들을 조작 가능한 시점이 되면 자동으로 호출이 되는 이벤트 메서드라고 보시면 됩니다. 굳이 비교하자면, window.onload 이벤트와 유사한 것이라고 보면 되겠네요. 메서드의 인자로는 델리게이트 함수명을 기입하거나, 익명 함수를 작성하면 됩니다. jQuery를 사용하는 경우에는 일반적으로 별도의 델리게이트 함수를 작성하지 않고, 익명함수를 그대로 작성하곤 합니다. 해서, 소스에서도 그렇게 처리한 것을 보실 수 있습니다. 이 방식은 처음에는 뭔가 복잡해 보일 수 있습니다만, 차츰 매우 익숙해지게 되실 것입니다. 사실, $(document).ready()와 windows.onload 이벤트와는 확실한 차이점이 있습니다만, 일단은 비슷하다고만 기억을 하시고요. 나중에 관련 이야기가 본격적으로 펼쳐질 때, 다시 설명드리도록 하겠습니다.
그리고, 익명 함수 내에서는 다양한 jQuery 셀렉터들을 보실 수 있습니다. 일단, 셀렉터로 원하는 DOM 요소를 찾고, css() 라고 하는 jQuery의 메서드를 사용해서 스타일을 매기는 것을 볼 수 있습니다. 기본적으로 DOM 요소는 css() 라는 메서드는 가지고 있지 않지만, jQuery 셀렉터가 반환하는 개체는 jQuery 확장 개체이기에, 이러한 메서드를 사용해서 쉽게 스타일을 매길 수가 있습니다. 각각의 셀렉터가 어떤 DOM 요소와 일치하는 지는 설명을 드리지 않아도 되겠죠? 여러분이 이미 다 아실 수 있을테니까요. 다음은 이번 예제의 실행 결과입니다.
참 쉽죠?
다음 강좌에서는 이렇듯 막강한 셀렉터에 대해서 조금 더 알아볼 예정입니다. 즉, jQuery 셀렉터 필터라는 것에 대해서 살펴볼까 해요. 원래는 같이 하나의 강좌로 올리려 했는데 생각보다 길어져서 기본 셀렉터만 먼저 올리게 되었습니다 ^^; 셀렉터 필터까지 알고 나시면, 여러분은 찾고자 하는 DOM 요소를 정말 편하고 쉽게 얻어내실 수 있다고 장담합니다.
스크립트 라이브러리를 왜 써야 하는가?
물론, 안 써도 됩니다. 매번 스크립트 기능이 필요할 때마다 손수 다 작성해도 뭐라 그럴 사람은 없으니까요. 하지만, 팀 개발을 하는 경우나 유사한 프로젝트를 반복해서 하는 경우에는 여러분 스스로가 가벼운 수준일지라도 자신만의 라이브러리(일반적으로 유틸리티 function들을 모아놓은 js 파일들) 만들어 놓고 있을 것입니다. 그러면서, 뭔가 풍족하고도 믿고 사용할만한 라이브러리는 없을까 둘러보곤 하죠.
일반적으로 우리가 웹 프로젝트에서 공개된 혹은 상용의 스크립트 라이브러리를 사용하려는 데에는 다음과 같은 이유가 있기 때문입니다.
- 모든 브라우저에서 올바로 동작하는 자바스크립트를 작성하기는 힘들다.
- 유사한 기능을 위해서 반복적으로 스크립트 코드를 작성하곤 한다.
- 수 많은 자바스크립트로 인해 사이트의 유지보수가 힘들다.
더 많은 이유가 있겠지만, 결론적으로 말하자면 스크립트 라이브러리를 사용할 경우, 공수(비용과 시간)를 줄일 수 있고, 개발 및 관리하기가 편해지며, 균일한 코드 퀄리티를 유지할 수 있고, 그에 따라 스트레스도 줄어들기 때문이라고 할 수 있을 것입니다. 사실 이것이 서버 측이던 클라이언트 측이던 프레임워크를 도입하는 대표적인 이유이기도 하죠.
