[JQUERY] 항상 최신버전 CDN 불러와서 사용하기

안녕하세요, 오늘은 JQUERY를 CDN으로 불러오는 방법에 대해서 알아보도록 하겠습니다. 웹사이트를 개발하기 위해서는 필수 요소 중에 하나인 JQUERY 라이브러리를 참조해야 하는데, https://jquery.com 사이트에서 라이브러리를 직접 다운받아서 사용하거나, CDN을 이용하여 사용하는 방법이 있습니다. 우선 간략하게 JQUERY, CDN에 대해서 알아봅시다.

1. JQUERY란?

jquery는 client HTML 스크립팅을 간소화하기 위해 2006년 존 레식이라는 개발자가 고안한 크로스 플랫폼 자바스크립트 라이브러리입니다. 여러 웹 브라우저에서 동작하기 쉬운 API를 통해 이벤트 처리, 애니메이션, AJAX통신, HTML 탐색 및 조작을 간단하게 만들어줍니다. 또한 MIT 라이선스 오픈소스이기 때문에 무료로 사용이 가능합니다.

2. CDN이란??

CDN(Contnet Delivery Network)은 웹상에서 대용량 콘텐츠를 빠르게 전송하는 기술입니다. 주요 ISP의 CDN 서버에 콘텐츠를 분산시켜놓은 방식으로 최종 사용자가 전송받을 때 분산된 CDN 서버 중에 가장 가까운 네트워크 경로를 선택할 수 있습니다. 트래픽으로 인한 과부하를 사전에 차단할 수 있고 중복 다운로드를 최소화하여 클라이언트 입장에서 가장 가까운 서버에서 콘텐츠를 전송받기 때문에 최상의 서비스를 제공받을 수 있습니다.

3. CND을 사용하기 전에 알아야할 지식

'.js'는 자바스크립트 기본 확장자입니다.
'.min.js'는 기존 스크립트 파일에서 공백과 줄 바꿈을 제거하여 용량을 최소화한 파일입니다.
'.slim.js'는 애니메이션 효과 및 XML구문 해석, AJAX 등이 제거된 스크립트 파일입니다.

4. 다운로드 및 사용방법

JQUERY 공식 다운로드 페이지 하단에 여러 기업에서 제공하는 CDN목록이 있습니다.

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

저는 Google CDN을 적용해보겠습니다. Google CDN을 클릭하면 새창으로 아래와 같은 Jquery의 버전 및 정보를 볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <!-- CDN SCRIPT 추가영역 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <!-- 본문내용 영역 -->
</body>
</html>

CDN 추가영역 및 방법에 대해서 알아봅시다. 새창에서 확인한 스크립트 정보 복사하여 <head></head> 사이에 붙여넣습니다. 스크립트 주소에 '3.6.0' 은 CDN의 버전을 의미하므로, 웹 페이지를 개발할 때 목적에 따라 버전을 변경하여 사용하면 됩니다.

저작자표시

'개발 > Jquery | Javascript' 카테고리의 다른 글

[JQUERY] INPUT 박스 한번에 초기화하는 방법, form 초기화 (0)	2022.05.19
[JQUERY] CLASS 변경, 추가(addClass()), 삭제(removeClass()) (0)	2022.05.17
[ JQUERY ] 로딩 함수 ready, onload 먼저 수행되는 함수는? (0)	2022.05.06
[JavaScript] window.open 새창으로 열기 사용법 (0)	2022.05.03
[Javascript] 웹 브라우저 정보 확인 Navigator (꿀팁) (0)	2022.01.20