본문 바로가기

JavaScript/jQuery

[jQuery] 라이브러리 설정 및 test (CDN 및 다운로드)

jQuery 는 javascript 라이브러리이기 때문에 라이브러리 파일이 있어야 사용할 수 있다. 라이브러리 설정하는 방법을 알아보도록 하자. 

크게 2가지 방법이 있다.

 

방법1. CDN (Content delivery networks)

번역하자면 콘텐츠 전송 네트워크 방식인데, 필요한 라이브러리를 인터넷으로 접속해 사용하는 방식이다. 라이브러리 파일을 저장한 서버가 지구 곳곳에 설치되어 있다. 만약 한국에서 접속한다면 한국에서 가까운 서버로 자동으로 접속해 라이브러리를 사용하게 된다. 당연히 인터넷 연결은 필수다.

 

CDN 방식은 jQuery 사이트 및 다른 기업에서 제공하는 CDN 주소를 통해서도 연결할 수 있다.

jQuery CDN 주소 ▷ 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

 

대표적인 CDN 주소

 

 

구글 CDN 삽입 예시

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

 

 

방법2. 라이브러리 다운로드

직접 내 pc에 라이브러리를 다운받아 사용하는 방법이다. jQuery 소스 위치를 웹페이지 링크에 지정해주면 된다.

 

먼저 라이브러리를 다운받는다.

jQuery 주소 ▷ https://jquery.com/

 

 

 

 

아래 다운로드 링크를 클릭한다.

 

 

 

 

jQuery 문서가 열린다. 

우클릭해서 적절한 위치에 다운로드 받으면 된다. 참고로 jQuery는 자바스크립트 DOM 객체를 쉽게 제어하기 위해 javascript 로 이루어진 코드 덩어리다. 그래서 확장자가 .js 인 것이다. 

 

 

 

jQuery 동작 확인

파일을 다운로드 했다면 jQuery 가 동작하는지 확인이 필요하다. jQuery 진입점은 ready() 메서드이다. 진입점은 프로그램이 시작하는 부분이다. ready() 는 C, Java 에서는 main 함수, Android 에서는 MainActivity 에 해당한다고 보면 된다.

 

간단한 html 문서를 작성해서 열어본다.

1) CDN 방식

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            alert('jquery 동작합니다');
        })
    </script>
</html>

 

2) src 로 경로를 지정

<html>
    <script type="text/javascript" src="../../../libs/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            alert('jquery 동작합니다');            
        })
    </script>
</html>

 

잘 설정했다면 alert() 가 호출된다.

 

'JavaScript > jQuery' 카테고리의 다른 글

[jQuery] select 태그에서 jquery 활용하기  (0) 2022.06.10