01. [jQuery] jQuery CDN 이용하기
jQuery와 CDN 설명
jQuery는 자바스크립트의 라이브러리로, 짧은 코드를 이용해서 효율적으로 자바스크립트 코드를 작성할 수 있도록 해줍니다.
jQuery를 이용하는 방법에는 아래 사이트에서 라이브러리를 다운받아서 사용하는 방법과 CDN을 이용하는 방법이 있습니다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
CDN(Content Delivery Network)이란 온라인 상의 대용량 콘텐츠를 저렴한 비용으로 빠르게 전송하는 기술을 말합니다.
주요 ISP의 CCDN 서버에 콘텐츠를 분산시켜 놓는 방식입니다. 이를 이용해서 최종 사용자가 콘텐츠를 전송받을 때 여러 CDN 서버 중에서 가장 가까운 네트워크 경로를 선택할 수 있습니다. 이로써 트래픽이 특정 서버에 몰려 과부하가 발생하는 것을 막을 수 있습니다. 또한 사용자 입장에서는 자신과 가장 가까운 서버에서 콘텐츠를 전송받기 때문에 서비스 속도 향상의 이점이 있습니다.
구글 CDN을 이용해서 jQuery 사용하기
1. https://jquery.com 에 접속해서 Download 탭을 클릭합니다.
2. Using jQuery with a CDN 이라는 제목을 찾아 Google CDN 클릭합니다.
3. 구글 라이브러리에서 원하는 버전의 jQuery script를 복합니다.
4. HTML 파일에 <script>를 추가합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>google CDN JQuery</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- jQuery 스크립트 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- JavaScript 스크립트 -->
<script src="index.js"></script>
</body>
</html>
jQuery의 스크립트가 자바스크립트(index.js)의 스크립트 태그보다 위에 위치하도록 해야합니다.