jQuery 입문 | 개요 | jQuery 적용(다운로드, CDN)

Tags:

jQuery 적용

jQuery는 자바스크립트 라이브러리이므로, jQuery 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다.
따라서 웹 페이지에서 jQuery를 사용하기 위해서는 jQuery 파일을 먼저 웹 페이지에 로드(load)해야 한다.

웹 페이지에 jQuery 파일을 로드하는 방법은 다음과 같다.

  1. jQuery 파일을 다운받아 로드하는 방법
  2. CDN(Content Delivery Network)을 이용하여 로드하는 방법

jQuery 파일을 다운로드 받아 로드하는 방법

최신 버전의 jQuery 파일은 다음 공식 사이트에서 다운로드 받을 수 있다.

http://jquery.com/download

파일은 아래와 같이 2가지 버전이 존재한다.

  • 실전 버전(Production version) : 라이브 웹 사이트용 (압축되어 읽을 수 없는 코드)
  • 개발 버전(Development version) : 테스트 및 개발용 (압축되지 않고 읽을 수 있는 코드)

다운받은 jQuery 파일을 서버에 저장하고, <script>태그를 웹 페이지의 <head>태그 내에 삽입하면 된다. 혹은 콘텐츠 로딩 속도 성능을 높이기 위해 맨 아래부분에 삽입하는 경우도 있다.

<head>
    <script src="/media/jquery-3.3.1.min.js"></script>
</head>

<script> 태그 안에 type="text/javascript"는 왜 없는가? HTML5에는 필요없다. 자바 스크립트는 HTML5와 모든 최신 브라우저에서 기본 스크립팅 언어이다!

CDN을 이용하여 로드하는 방법

CDN(Content Delivery Network)이란? 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술이다.
이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있다.

CDN을 이용하면 jQuery 파일을 서버에 따로 저장하지 않아도 jQuery를 사용할 수 있다.
현재 이용할 수 있는 jQuery 버전 3.x의 CDN은 다음과 같으며, 어떤 CDN을 이용하더라도 동일한 동작을 한다.

jQuery.com CDN

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

구글 CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

MS CDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

CDNJS CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

sDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>



최종 수정 : 2021-08-27