티스토리 뷰

프로그래밍/Front end

[Front end] jQuery 적용(다운로드, CDN)

Reference M1 2020. 2. 8. 01:01

 

jQuery 적용

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

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

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

 

jQuery 다운로드

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

http://blog.jquery.com/

 

Official jQuery Blog | New Wave Javascript

Hello again! jQuery 3.4.0 was released just three weeks ago, but we’ve had a few issues reported that warranted a patch release. Thank you to everyone that reported issues and helped us get these fixed quickly. Here are the changes: Triggering focus or blu

blog.jquery.com

http://jquery.com/download

 

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

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

 

jQuery CDN

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

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

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

//구글 CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

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

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

 

'프로그래밍 > Front end' 카테고리의 다른 글

[Front end] jQuery CSS 선택자  (0) 2020.02.08
[Front end] jQuery 문법  (0) 2020.02.08
[Front end] jQuery 기초  (0) 2020.02.08
[Front end] HTML Title 속성 툴팁(Tooltip)  (0) 2020.02.07
[Front end] JavaScrpit 페이징 처리  (0) 2020.02.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함