JQuery 개발 환경 설정

01_ jQuery 라이브러리 삽입

일반 자바스크립트 라이브러리처럼 jQuery 역시 웹 페이지에 라이브러리를 먼저 삽입해야 한다. 두가지 방법이 있다.

1_1_ CDN(Content Deliverty Network)에 올려져 있는 jQuery 파일을 이용하는 방법

CDN이란 콘텐츠를 여러 서버에 분산 배치해서 콘텐츠를 전송하는 과정에서 발생하는 트래핑 집중 & 병목 현상 및 데이터 손실을 해결하기 위한 기술이다. 이러한 목적으로 JQuery  파일도 아래 CDN에 올려져 있는데 , 이 파일을 웹 페이지에 삽입하는 방법이다. 

 

1_2 파일을 다운로드해 이용하는 방법

JQuery 홈페이지에서 최신파일을 내려 받아 다음과 같이 링크를 웹 페이지에 삽입하는 방법

 

02_진입점인 ready() 메서드 삽입

대부분의 프로그래밍 언어에는 진입점에 해당하는 main()함수가 있다. jQuery역시 main()과 비슷한 진입점을 제공한다. 바로ready()메서드 이다. 

reday()메서드는 문서의 노드를 사용할 준비가 되면 Document 객체에서 발생하는 DOMContentLoaded이벤트 처리를 포장한 메서드 이다. 

jQuery에서 ready()를 이용해서 진입점을 설정하는 방법은  4가지가 있다.

//방법1
JQuery(document).ready(function(){
	alert("hi");
});
//방법2
JQuery(function(){
	alert("hi");
});
//방법3
$(document).ready(function(){
	alert("hi");
});
//방법4
$(function(){
	alert("hi");
});

이중 3번째 방법을 공식적으로 추천한다. 

 

03_ DOMContentLoaded 이벤트 vs load 이벤트

이 제이쿼리의 ready() 메서드는 Document객체에서 발생하는 DOMContentLoaded이벤트를 포장한 메서드 이다. 여기서 주의해야할 점은 이 이벤트가 발생한 시점에서는 이미지나 플래시같은 무거운 콘텐츠는 아직 로드되지 않았다는 점이다. 

DOM이 사용할 준비가 된 경우 DOMContentLoaded이벤트가 먼저 발생하고 이후 이미지등의 콘텐츠가 모두 로드되고 나서  load이벤트가 발생한다.

따라서 무조건 jQuery ready()메서드를 사용해서는 안된다. 상황에 따라 DOMContentLoaded이벤트를 감싸고 있는 ready()메서드를 사용할 수도 있고 load이벤트를 사용할 수도 있다. 일반적으로 실무에서는 특별한 경우가 아니라면 ready() 메서드를 주로 사용한다.