![[자바스크립트] CDN을 활용하여 jQuery 사용하는 방법](https://i0.wp.com/www.walterz.net/wp-content/uploads/2017/11/34247406846_7ede798942_z.jpg?resize=640%2C359&ssl=1)
jQuery(제이쿼리)는 인터넷 개발자가 웹 페이지를 쉽고 빠르게 개발할 수 있도록 해주는 자바스크립트 기반의 프레임워크입니다. jQuery를 이용하면 순수 자바스크립트만 사용할 때보다 두 배 이상으로 빠르게 웹을 개발할 수 있습니다. 그리고 개발 속도만 빨라질 뿐만 아니라 사후 유지보수도 간단해지기 때문에 비용 절감에도 장점이 있습니다. 티스토리를 비롯하여 요즘 대부분의 블로그는 jQuery를 기반으로 개발되고 있습니다. 이 글에서는 블로그 또는 홈페이지에서 CDN에 의한 jQuery를 사용하는 방법에 대하여 설명하도록 하겠습니다.
jQuery 공식 홈페이지
http://www.jquery.com/
jQuery 사용 방법
블로그 또는 사이트에서 jQuery를 이용하기 위해서는 외부에서 jquery.js 스크립트 파일을 불러와야 합니다. jQuery는 한 개의 파일로 구성되어 있으며, 기본 기능 이외의 효과를 구현하고자 할 때에는 별도로 jQuery 전용 플러그인을 사용해야 합니다. jquery.js 파일은 jQuery 공식 홈페이지에서 다운로드할 수 있습니다.
그런데 반드시 jquery.js 파일을 다운로드해야 하는 것은 아닙니다. jQuery 공식 홈페이지에서는 발표된 모든 버전의 jQuery 스크립트 CDN 서버를 제공하고 있기 때문입니다. 사용자는 jQuery CDN 서버로 연결되는 외부 링크만으로 jQuery 스크립트를 불러 올 수 있습니다. 이 방법은 사이트 트래픽량을 감소시키는 효과를 가져옵니다. 티스토리와 같은 가입형 블로그에서는 트래픽량이 크게 문제되지 않지만, 웹호스팅을 통하여 운영되고 있는 블로그의 경우에 트래픽량은 중요한 문제입니다.
jQuery 스크립트 파일은 두 개 버전이 있습니다. 하나는 개발자용으로 만들어진 풀 버전, 다른 하나는 사용자용으로 만들어진 압축 버전입니다. 보통 압축버전인 jquery.min.js 파일이 주로 사용됩니다. 왜냐하면 풀 버전은 용량이 크기 때문입니다. 최근들어 모바일을 이용하여 웹서핑을 하는 사람이 급증하면서 페이지스피드 최적화는 매우 중요하기 때문에 스크립트 파일 용량은 최대한 줄이는 것이 좋습니다.
CDN 서버에서 jQuery 파일을 불러 오는 방법
jQuery를 본인의 홈페이지 또는 블로그에서 사용하기 위해서는 다음과 같이 HTML 소스코드에 jQuery 스크립트를 불러오는 태그를 삽입해야 합니다. 기본적으로 티스토리 블로그는 jQuery를 지원하고 있기 때문에 이 과정은 생략해도 됩니다. 하지만 스킨에 따라 jQuery를 지원하지 않는 경우도 있습니다. 그러므로 현재 티스토리 블로그를 사용하고 있다면 블로그 스킨에서 jQuery를 지원하고 있는지 반드시 확인하십시오! 만약 블로그 스킨에서 jQuery를 지원하지 않는다면 아래의 <SCRIPT> 태그를 스킨 HTML 파일에 추가하면 됩니다.
<!doctype html>
<html>
<head>
..........
<!-- 이렇게 함으로써 외부의 CDN 서버에서 가장 최신의 jQuery 배포판을 불러 올 수 있습니다. //-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
..........
</head>
<body>
..........
</body>
</html>
jQuery의 기본적인 사용 방법
jQuery는 한 개의 스크립트로 이루어져 있음과 동시에 한 개의 함수로 구성되어 있습니다. 함수명은 jQuery이고 jQuery() 함수 한 개만 사용함으로써 jQuery의 모든 기능을 활용할 수 있습니다. jQuery() 함수는 HTML의 DOM 객체를 선택하는 함수이고 반환되는 오브젝트는 선택된 객체의 핸들러입니다. 그리고 jQuery는 $ 식별자를 사용합니다. jQuery라는 함수명을 계속 사용하는 것은 번거롭기 때문에 이 함수명을 대체할 수 있는 식별자($)를 사용하는 것입니다.
※ 참고: 기존의 홈페이지에서 prototype과 같은 다른 자바스크립트 프레임워크를 사용하고 있는 경우에는 식별자 $를 사용했을 때 오류가 발생할 수 있습니다. 같은 식별자를 쓰는 프레임워크끼리 충돌 현상이 나타나는 것입니다. 이 때에는 $가 아닌 원래의 함수인 jQuery를 사용해야 합니다.
다음은 웹브라우저 메시지를 띄우는 간단한 jQuery 예제입니다.
$( function () {
alert('메시지를 띄웁니다.');
});
jQuery와 순수 자바스크립트와의 가장 큰 차이점은 jQuery에서는 예제와 같이 가짜 함수를 자주 사용한다는 점입니다. 위의 예제 스크립트와 같은 방법을 사용하면 해당 페이지에 정의된 모든 순수 자바스크립트가 실행된 후에 본인이 작성한 자바스크립트가 실행되도록 할 수 있습니다. 쉽게 설명하면 jQuery를 이용하는 경우 개발자는 페이지 내에서 자바스크립트 실행 순서를 제어할 수 있습니다. 다음은 자바스크립트 실행 순서를 제어하는 예제 스크립트입니다.
$( function() {
alert('b');
});
alert('a');
/* 실행 결과: {a} -> {b} */
위 예제 스크립트는 결과적으로 a 메시지 창이 먼저 나타난 후 뒤이어 b 메시지 창이 나타납니다. 이러한 결과가 나타나는 이유는 해당 페이지에 정의된 모든 순수 자바스크립트가 실행된 후에야 비로소 jQuery 구문 내부의 자바스크립트가 실행되기 때문입니다. 순수 자바스크립트만으로는 실행 순서를 정하는 것이 다소 어렵지만 jQuery를 사용하면 어느정도 가능합니다.
jQuery 선택자
jQuery는 현재 페이지에 존재하는 DOM 객체를 간단하게 선택할 수 있는 막강한 기능을 제공합니다. 순수 자바스크립트만 이용하는 경우에는 document.getElementsById() 와 같은 다소 어려운 구문을 사용해야 하지만 jQuery에서는 단 10글자 이내로 현재 페이지에 있는 모든 객체를 선택할 수 있습니다.
jQuery에서는 $(“선택자”) 또는 jQuery(“선택자”) 와 같은 방법으로 DOM 객체를 선택할 수 있습니다. 여기에서 선택자는 HTML 태그가 될 수도 있고, id가 될 수도 있으며, class가 될 수도 있습니다. id 속성을 이용하여 객체를 선택할 때에는 #을 접두사로 사용하고, class 속성을 이용하려면 .(점)을 접두사로 사용합니다. jQuery에서 DOM 객체를 선택할 때에는 CSS와 동일한 선택자를 사용합니다. 그러므로 CSS에 대한 지식이 있는 사람은 jQuery 사용 방법을 익히는 것이 쉽습니다. 다음은 jQuery에서 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");
jQuery 사용법 중 선택자에 관한 것은 CSS에서의 선택자 사용 방법과 동일하기 때문에 CSS 선택자에 대해서만 잘 알고 있으면 jQuery 사용 방법을 배우는 것은 크게 어렵지 않습니다. CSS 선택자에 대해서는 다음 글에서 자세하게 설명하고 있으니 참고바랍니다. → 2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory
마무리
지금까지 블로그 또는 홈페이지에서 jQuery를 사용하는 방법에 대하여 알아보았습니다. jQuery를 사용하면 웹 표준을 준수하면서 화려한 웹 페이지를 만들 수 있습니다. 그러나 웹브라우저 버전에 따라 jQuery를 지원하지 않을 수도 있습니다. 특히 인터넷익스플로러의 경우에는 최신 버전의 jQuery와 호환되지 않을 수 있으므로 웹사이트를 개발할 때 주의가 필요합니다.
현재 jQuery는 인터넷 상에서 다양하게 응용되어 사용되고 있으며 지금도 계속 그 활용법이 개발되고 있는 상황입니다. 하지만 광범위하게 jQuery를 사용하는 경우에는 웹사이트 속도가 느려질 수 있기 때문에 모든 스크립트를 jQuery로 작성하는 것보다는 직접 구현하기 복잡한 스크립트만 jQuery를 활용하여 작성하는 것이 바람직합니다.
타이틀 이미지: Christiaan Colen, JavaScript source code ransomware, Flickr. CC BY-SA 2.0.
![[대외활동] 2023년 제12기 국방정보공개 국민참여단](https://i0.wp.com/www.walterz.net/wp-content/uploads/2023/04/5880.png?resize=418%2C315&ssl=1)
[…] 관련 문서 2017/11/08 [자바스크립트] CDN을 활용하여 jQuery 사용하는 방법 by Walter Erzsamatory […]
[…] jQuery를 이용하여 시각적 객체의 크기를 해상도에 따라 조절하는 방법을 알아보겠습니다. jQuery는 웹 개발자를 위한 자바스크립트 프레임워크입니다. 복잡한 자바스크립트를 간단하게 구현해줍니다. 현재 자신이 운영하고 있는 사이트에서 jQuery를 사용할 수 없다면 다음 글을 참고하시기 바랍니다. 이 글은 사이트에서 jQuery를 이용하는 방법을 자세하게 설명하고 있습니다. → 2017/11/08 [자바스크립트] CDN을 활용하여 jQuery 사용하는 방법 by Walter. Erzsamator… […]
[…] ※ 이 글에서 소개하는 해시체인지 이벤트를 활용한 동적 페이지 이동 기능은 jQuery가 필요합니다. jQuery를 블로그 또는 사이트에서 사용하는 방법은 다음 글을 참고하시기 바랍니다. → 2017/11/08 [자바스크립트] CDN을 활용하여 jQuery 사용하는 방법 by Walter Erzsamatory […]