jQuery - CDN을 이용해서 제이쿼리를 사용해볼까?
- 프로그래밍/제이쿼리
- 2022. 2. 13.
jQuery를 사용할 수 있는 방법은 무엇이 있을까요? jQuery를 사용하기 위해서는 jQuery 모듈을 우리가 사용하는 프로젝트에 포함시켜야 합니다. jQuery뿐만 아니라 어떤 자바스크립트 라이브러리가 되었던 우리가 명시적으로 사용한다는 스크립트를 추가해야 사용이 가능해집니다.
CDN 방식을 이용해서 jQuery를 사용하기
CDN(Content Delivery Network)은 콘텐츠 전송 네트워크라는 의미로 간단하게 설명하면 네트워크(인터넷)를 통해서 콘텐츠(jQuery 라이브러리 파일)를 배포하는 방식을 말해요. 즉 사용하는 사람 입장에서 쉽게 이용할 수 있도록 만들어진 방식이에요.
jQuery의 CDN 주소는 공식 홈페이지를 통해서 확인할 수 있습니다.
CDN 방식으로 배포되는 타입은 uncompressed, minified, slim, slim minified로 정의되어 있는데요. 각각의 타입 다음과 같은 의미를 가지고 있습니다.
uncompressed: uncompressed는 jQuery 코드가 변형되지 않은 상태로 원본 스크립트를 말합니다. 주로 개발할 때 사용되는 스크립트 형태로 디버깅에 용이하고, 원본 스크립트이기 때문에 모듈의 구조와 코드를 이해하기가 편리합니다.
minified: minified는 jQuery 코드가 압축된 형태로 원본 스크립트와 기능은 동일지만 이해하기 어려운 구조, 구문으로 변경된 스크립트를 말합니다. 원본 스크립트에 비해 크기가 작아져서 배포하기에 적합한 형태가 되기 때문에 주로 운영계 혹은 실사용자가 사용하는 단계에서 사용되는 형태입니다. min이라는 단어도 minified랑 동일한 의미를 가지고 있습니다.
slim: jQuery 3.0에서 추가된 형태로 ajax, effects와 deprecated 된 코드를 제거한 jQuery입니다. jQuery ajax, css class를 다른 방법을 사용해 다루는 경우를 위해 정의되었습니다.
slim minified: jQuery slim을 압축한 형태입니다.
원하는 타입(uncompressed, minified, slim, slim minified)을 클릭하시면 타입에 맞는 CDN 주소와 스크립트 구문이 팝업으로 활성화됩니다. 복사 아이콘을 클릭하시면 클립보드로 정의된 구문을 복사할 수 있습니다.
공식 홈페이지에서 라이브러리를 불러오는 구문을 복사하셨다면 사용하시려는 html의 <head>에 아래와 같이 추가하시면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(function() {
alert('Hello jQuery!!');
})
</script>
</body>
</html>'프로그래밍 > 제이쿼리' 카테고리의 다른 글
| jQuery - 속성을 판별하는 hasAttr() 함수는 없다 (0) | 2023.06.19 |
|---|---|
| jQuery - click()이 동작하지 않으면 on()을 사용해보자 (1) | 2022.02.25 |
| jQuery - 데이터를 설정하는 data() 원리와 사용 방법을 알아보자 (1) | 2021.12.20 |
| jQuery - $(document).ready() 대신 $()를 사용하자 (6) | 2021.05.13 |
| jQuery - 제이쿼리란? (5) | 2021.03.30 |