Erzsamatory Weblog


jQuery(제이쿼리)는 인터넷 개발자가 웹 페이지를 쉽고 빠르게 개발할 수 있도록 해주는 자바스크립트 기반의 프레임워크입니다. jQuery는 전 세계적으로 가장 많이 사용되고 있는 자바스크립트 프레임워크입니다. jQuery를 이용하면 순수 자바스크립트만 사용할 때보다 두 배 이상으로 빠르게 웹을 개발할 수 있습니다. 그리고 개발 속도만 빨라질 뿐만 아니라 사후 유지보수도 매우 쉬워지기 때문에 비용 절감에도 큰 장점이 있습니다. 티스토리를 비롯하여 요즘 대부분의 블로그는 jQuery를 기반으로 개발되어 있습니다. 이 글에서는 본인의 블로그 또는 홈페이지에서 jQuery를 사용하는 방법에 대해서 소개하겠습니다.

jQuery 공식 사이트
http://www.jquery.com


jQuery 이용 방법


블로그 또는 사이트에서 jQuery를 이용하기 위해서는 HTML 헤더에서 jquery.js 파일을 불러 와야 합니다. jQuery는 한 개의 파일로 구성되어 있으며, 기본 기능 이외의 효과를 구현하고자 할 때에는 따로 jQuery 전용 플러그인을 사용할 수도 있습니다. jquery.js 파일은 jQuery 공식 사이트에서 다운로드할 수 있습니다. 하지만 jQuery를 사용하기 위하여 jquery.js 파일을 꼭 다운로드해야만 하는 것은 아닙니다. jQuery 공식 사이트에서는 발표된 모든 버전의 jQuery 스크립트 CDN 서버를 제공하고 있기 때문에, 사용자의 사이트에서는 jQuery 공식 서버로 연결되는 외부 링크만으로 jQuery 스크립트를 불러 올 수도 있습니다. 이 방법을 사용하면 본인의 사이트가 저장된 서버의 트래픽을 감소시키는 효과를 가져올 수 있습니다. 티스토리와 같은 블로그에서는 트래픽이 크게 문제가 되지는 않지만, 이 블로그와 같이 웹호스팅을 통하여 운영되고 있는 블로그의 경우에는 트래픽은 매우 큰 문제입니다.

jQuery의 스크립트 파일은 한 개이지만, 이 스크립트 파일에는 두 가지 버전이 있습니다. 하나는 개발자용으로 만들어진 풀 버전, 다른 하나는 사용자용으로 만들어진 압축 버전입니다. 일반적으로 압축버전인 jquery.min.js 가 더 많이 사용됩니다. 왜냐하면 풀 버전은 그 용량이 매우 크기 때문입니다. 최근들어 모바일을 이용하여 웹서핑을 하는 사람이 급증하면서 웹페이지의 로딩 속도를 빠르게 하는 것은 사이트 개발에 있어서 필수적인 작업입니다. 그런데 풀 버전을 사용하는 경우에는, 방문자가 불러와야 하는 파일의 용량이 크기 때문에, 웹사이트를 로드하는 속도가 느려질 수 있습니다. 블로그는 모바일에서의 접속 빈도가 높아, 로딩 속도가 특히 중요한데, 이러한 이유 때문에 대부분의 블로그에서는 jQuery 스크립트의 압축 버전을 사용합니다.


jQuery 파일을 불러 오는 방법


위에서도 설명했듯이 jQuery 스크립트 파일은 jquery.js 파일과 jquery.min.js 파일로 나누어집니다.  jquery.js는 압축되지 않은 스크립트 파일(uncompressed script file)이고 jquery.min.js는 압축된 스크립트 파일(compressed script file)입니다. 일반적으로 홈페이지에서 jQuery를 사용할 때에는 압축된 스크립트 파일을 사용합니다. 따라서 이 글에서도 압축된 스크립트 파일을 사용하도록 하겠습니다.
※ 압축된 스크립트 파일을 사용한다고 해서 jQuery의 사용 방법이 달라지는 것은 아닙니다.

jQuery를 본인의 홈페이지 또는 블로그에서 사용하기 위해서는 다음과 같이 <HEAD>와 </HEAD> 사이jQuery 스크립트를 불러오는 태그를 삽입해야 합니다. 기본적으로 티스토리 블로그는 jQuery를 지원하고 있기 때문에 이 과정은 생략해도 됩니다. 하지만 스킨에 따라 jQuery를 지원하지 않는 경우도 있습니다. 때문에 현재 자신이 티스토리 블로그를 사용하고 있다면, 본인이 사용하고 있는 블로그 스킨에서 jQuery를 지원하고 있는가를 반드시 가장 먼저 확인하십시오! 만약 블로그 스킨에서 jQuery를 지원하지 않는다면 아래의 <SCRIPT> 태그를 스킨 파일에 추가하면 됩니다.

<!doctype html>
<html>
<head>
    ..........
    <!-- 이렇게 함으로써 외부의 CDN 서버에서 가장 최신의 jQuery 배포판을 불러 올 수 있습니다. //-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    ..........
</head>
<body>
    ..........
</body>
</html>


jQuery의 기본적인 사용 방법


jQuery는 단 한 개의 스크립트로 이루어져 있음과 동시에 그리고 또 단 한 개의 함수로 구성되어 있습니다. 함수명은 jQuery이고 jQuery() 함수 한 개만 사용하면 jQuery의 모든 기능을 이용할 수 있습니다. jQuery() 함수는 HTML의 DOM 객체를 선택하는 함수이고 반환되는 오브젝트는 선택된 객체의 핸들러입니다. 그리고 jQuery는 $라는 식별자를 사용합니다. jQuery라는 함수명을 계속 사용하는 것은 번거롭기 때문에, 이 함수명을 대체하는 간단한 식별자인 $를 사용하는 것입니다. 이 식별자를 통하여 jQuery의 모든 명령어가 실행됩니다.

참고
기존의 홈페이지에서 prototype과 같은 다른 자바스크립트 프레임워크를 사용하고 있는 경우에는 식별자 $를 사용했을 때 오류가 발생할 수 있습니다. 같은 식별자를 쓰는 프레임워크끼리 충돌 현상이 나타나는 것입니다. 이 때에는 $가 아닌 원래의 함수인 jQuery를 사용해야 합니다.

다음은 하나의 메시지 창을 띄우는 매우 간단한 jQuery 예제 스크립트입니다.

$( function () {
    alert('메시지 창을 띄웁니다.');
});


jQuery 기반으로 자바스크립트를 작성할 때에는 $(function() { ~ }) 또는 jQuery(function() { ~ }) 내부에 개발자가 실행하고자 하는 모든 자바스크립트를 넣으면 됩니다. jQuery와 순수 자바스크립트와의 가장 큰 차이점은, jQuery에서는 위와 같이 가짜 함수를 자주 사용한다는 점입니다. 위의 예제 스크립트와 같은 방법을 사용하면, 해당 페이지에 정의된 모든 순수 자바스크립트가 실행된 후에 본인이 작성한 자바스크립트가 실행되게 할 수 있습니다. 쉽게 설명하자면, jQuery를 이용하는 경우, 개발자는 한 페이지 내의 자바스크립트의 실행 순서를 제어할 수 있습니다. 다음의 예제를 통해서 더욱 쉽게 설명해보겠습니다.

$( function() {
    alert('b');
});
    
alert('a');
/* 실행 결과: {a} -> {b} */


위 스크립트는 결과적으로 a 메시지 창이 제일 먼저 나타난 후, b 메시지 창이 나타납니다. 이러한 결과가 나타나는 이유는 해당 페이지에서 정의된 모든 순수 자바스크립트가 실행된 후에야 비로소 jQuery 구문 내부의 자바스크립트가 실행되기 때문입니다. 이것이 바로 jQuery를 이용하는 이유입니다. 순수 자바스크립트를 이용할 때에는 실행 순서를 개발자 마음대로 정하는 것이 매우 어렵지만, jQuery를 이용하면 이것을 매우 쉽게 정리할 수 있기 때문입니다. 또한 비동기적인 스크립트를 필수로 생각하는 지금의 자바스크립트 개발 방법론과 jQuery의 작동 알고리즘이 딱 맞아떨어지기 때문에, 요즘들어 jQuery가 가장 널리 사용되고 있는 것입니다.


jQuery 선택자


jQuery는 HTML BODY 내에 있는 각종 DOM 객체를 매우 간단하게 선택할 수 있는 막강한 기능을 제공합니다. 순수 자바스크립트를 이용하는 경우에는 document.getElementsById() 와 같은 매우 긴 구문을 사용해야 하지만, jQuery에서는 단 10글자 이내로 HTML에 있는 모든 객체를 선택할 수 있습니다.

jQuery에서는 $("선택자") 또는 jQuery("선택자") 와 같은 방법으로 DOM 객체를 선택할 수 있습니다. 여기에서 선택자는 HTML 태그가 될 수도 있고, id가 될 수도 있으며, class가 될 수도 있습니다. id 속성을 통해서 객체를 선택할 때에는 #을 접두사로 사용하고, class 속성을 통해서 객체를 선택할 때에는 .(점)을 접두사로 사용합니다. jQuery에서 HTML DOM 요소를 선택할 때에는 CSS와 동일한 선택자를 사용합니다. 그렇기 때문에 CSS에 관한 지식이 있는 사람은 jQuery 사용 방법을 익히는 것이 매우 쉽습니다. 다음은 HTML DOM 객체를 선택하는 간단한 예제입니다.

/* container 라는 ID를 가지는 DOM 객체를 선택하여 변수에 저장합니다. */
var container = $("#container");
    
/* title 이라는 class를 가진는 DOM 객체를 선택하여 변수에 저장합니다. */
var title = $(".title");
    
/* container 라는 ID를 가지는 DOM 객체 하위에서
 * title 이라는 class를 가지는 DOM 객체를 선택하여 변수에 저장합니다.
 */
var obj = $("#container .title");
    
/* BODY 내의 모든 img 객체를 변수에 저장합니다. */
var img = $("img");


웹 페이지 내의 모든 HTML 태그를 선택할 때에는 아무런 접두사 없이 곧바로 태그명을 선택자로 사용하면 됩니다. 이는 CSS에서 HTML 태그에 스타일 속성을 부여할 때와 같은 방법입니다. 지금까지 살펴본 jQuery의 사용법 중 선택자에 관한 것은 대부분 CSS에서의 선택자 사용 방법과 동일하기 때문에 CSS 선택자에 대해서만 잘 알고 있다면 jQuery 사용 방법을 배우는 것은 크게 어렵지 않습니다. CSS 선택자에 관한 설명은 [2014. 7. 4 CSS 선택자에 관한 매우 기초적인 지식 / CSS Selector] 글을 참고하시기 바랍니다.


마무리


지금까지 블로그 또는 홈페이지에서 jQuery를 사용하는 방법에 대해서 알아보았습니다. jQuery를 사용하면 웹 표준을 준수하면서 화려한 웹 페이지를 만들 수 있습니다. 하지만 버전에 따라 jQuery를 지원하지 않는 웹브라우저도 있습니다. 특히 인터넷익스플로러의 경우에는 최신 버전의 jQuery 스크립트를 완전하게 지원하지 않을 수 있기 때문에, 웹사이트를 개발할 때 주의가 필요합니다.

현재 jQuery는 인터넷 상에서 매우 다양하게 응용되어 사용되고 있으며, 지금도 계속 그 사용법이 개발되고 있는 상황입니다. 하지만 jQuery를 사용하는 경우에는 웹사이트의 속도가 느려질 수 있기 때문에 모든 스크립트를 jQuery로 작성하는 것보다는 매우 복잡한 것만 jQuery를 이용하여 해결하는 것이 가장 바람직합니다.
http://www.erzsamatory.net/trackback/48

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/02/13 09:18
    저의 경우에는 티스토리 블로그에서 '인쇄' 기능을 구현하기 위해 JQuery를 이용 했었습니다. 여러가지 기능을 하는 스크립트가 있어 유용 하더라구요. JQuery를 처음 접하는 분들에게 도움이 많이 되겠네요. 잘 보고 갑니다. 감사합니다.
    • Walter E.
      Walter E.
      2014/05/06 09:57
      인쇄 기능도 있었군요 @_@

      마침 생각하던 사이트에서 인쇄기능 필요했었는데, 참고해봐야겠습니다.

      오늘 좋은 하루 되세요 ^^
  2. 2014/02/13 11:34
    다녀간답니다 ^^
    의미있는 하루를 보내세요~
    • Walter E.
      Walter E.
      2014/05/06 09:57
      감사합니다 ^^
      항상 좋은 하루되십시오 ^^
  3. 2014/02/15 01:09
    jQuery도 한번 도전 해 보고 싶어지네요 ^^
    • Walter E.
      Walter E.
      2014/05/06 09:57
      jQuery 한 번 써보면 쉬워서 빨리 익힐 수 있을 거에요~ ^^

      인터넷 돌아다니다보면 거의 대부분이 jQuery를 사용하고 있더라구요.

      오늘 토요일이네요. 좋은 하루 되세요~ ^^