제이쿼리(jQuery) 라이브러리 연동하는 방법

 

#1 제이쿼리(jQuery)란?

  jQuery는 웹사이트에서 자바스크립트를 쉽게 사용할 수 있게 도와주는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다. 

  높은 호환성과 다양한 기능, 수많은 제이쿼리를 기반으로 한 플러그인 등을 이용하여 편리하게 다양한 기능을 구현할 수 있는 것이 특징입니다.

  이번 글은 제이쿼리와 제이쿼리를 이용한 다양한 플러그인을 사용하기 위해 반드시 필요한 사전 준비작업이기에 따로 게시물을 구분하여 작성합니다. 

 

 

#2 제이쿼리 라이브러리 연동(연결)하는 방법

  제이쿼리는 특별한 프로그램이 아닌, html에 흔히 연결하여 사용하던 css와 js 같은 파일입니다.

  그럼 이 제이쿼리 파일 연결은 어떻게 하는 것인가. 

 

(1) 제이쿼리를 다운하여 연동하는 방법

  1. https://jquery.com로 이동하여 오른쪽의 Download jQuery를 클릭합니다.

 

  2. 다운로드 페이지에서 compressed(압축)된 파일과 uncompressed(비압축) 파일 중 원하는 것을 다운로드합니다.

  압축된 파일은 용량이 적기 때문에 웹사이트를 위해서도 좋긴 하지만 알아보기 힘들고, 구조를 파악하거나 조금 정도는 수정을 해보겠다 생각하시면 압축되지 않은 파일을 다운로드하시면 됩니다.

  그냥 클릭하면 코드만 쭈~욱 나오기 때문에 그냥 링크를 마우스 오른쪽 클릭하여 '다른 이름으로 저장'을 눌러 저장해주세요.

 

  3. 다운로드한 파일을 작업하는 파일이 있는 곳으로 복사한 후, css나 js를 연결하듯 작업할 HTML 문서의 </head> 위쪽에 다음과 같이 연결해 주시면 됩니다. (파일의 위치는 자신에게 맞게 수정할 것!)

<script src="./images/jquery-3.6.0.js"></script>

 

 

(2) 네트워크 전송 방식 [CDN(Content Delivery Network)]으로 연동하기

  CDN 방식은 쉽게 생각하면 위에서 다운로드하여서 연결했던 그 파일이 웹상에 저장되어있고 그 저장되어 있는 위치를 바로 연결하는 거라 생각하면 됩니다. 

  그렇다면 그 주소를 알아야 할 것인데, 그 주소는 다운로드 페이지를 아래로 내려보면 각각의 회사들이 제공하는 CDN 페이지를 방문하여 찾을 수 있습니다. 

  제이쿼리 말고 다른 것들도 많기 때문에, 쉽게 요약하자면 구글 CDN 기준으로 다음 주소를 이용하시면 됩니다.

  버전별로 원하는(일반적으론 최신 버전을 사용하시면 됩니다)

<!-- 3.x snippet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 2.x snippet  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!-- 1.x snippet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

이 이외의 버전에 대한 라이브러리 파일의 URL이 필요하다면 다음 사이트를 참고하시면 좋습니다.

jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers