본문 바로가기

퍼블리싱/javascript&jQuery

제이쿼리(jQuery) CDN연결 방법

처음 써보는 티스토리 한번 완전 날리고 다시 쓰는거라 무척 짜증난다. 

처음 사용하는 티스토리 어색하고 어렵다. 


무튼 티스토리를 가입하게 된 계기는 jQuery 와 javascript를 복습하기 위해서다. 

예전에 가볍게 훑었던 것이 있는데 제대로 공부하지 않는 덕분에 이렇게 다시 공부를 하게 되었다. 

이번에는 제대로 기억하기 위해 블로그에 차근차근 적어볼 생각이다.


그래서 올리게 되는 글들은 완벽하게 알고 올리는 거라기 보다는 공부하면서 이해한 것들을 적는 것이여서

오류가 있을 수 있다. 그렇다면 살포시 알려주세용:)ㅋㅋㅋㅋ


처음으로 

제이쿼리는 무엇인가?

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

w3shools에서 제이쿼리를 이렇게 정의하고 있다. 

말 그대로 자바 스크립트 프로그래밍 언어를 좀 더 쓰기 편리하도록 만든 자바스크립트 라이브러리이다. 

좀 더 쉽게 동적 스크립트를 쓸 수 있는 하는 아주 좋은 놈이다. 


그래서 자바스크립트는 그냥 코딩을 해도 작동하지만 

제이쿼리를 cdn을 연결 시켜주지 않으면 작동하지 않는다. 


그럼 cdn 은 무엇인고?

cdn은 Content Delivery Network의 약자로 접속자가 인터넷상에서 가장 가까운곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는 기술이다. 

( 사실 몬지 잘 모르겠지만, 어디 서버로 부터 제이쿼리를 불러 올 수 있도록 하는거 아닌가?)


무튼 이걸 꼭 연결 시켜야 제이쿼리로 코딩을 짰을때 제대로 작동하도록 되어있다. 


그럼 어떻게 연결하는가? 크게 2가지 방법이있다. 

제이쿼리 CDN를 연결하는 방법1.


CDN을 다운로드한 후 해당 파일을 HTML문서 파일에 연결 시켜주는 방법이다. 


1. 제이쿼리 사이트에 들어간다. 주소는 심플하다. 

https://jquery.com/ 


사이트는 이렇게 생겼다. 


2. 여기서 다운로드 제이쿼리를 눌러준다. 


3. 그리고 다운받을 cdn을 찾아준다. 나는 google cdn를 사용했다. 

구글시디엔을 보통 많이 사용한다고 한다.( 더 안정화 되었나? 정확히는 모르지만 다들 쓰면 덜 문제가 생기겠지....ㅎㅎ)



4. 저 google cdn를 누르면 다양한 버전의 cdn를 볼 수 있다. 

그 중에서 하나를 다운받아 보도록 하자.

예전에는 버전이 높으면 좋을 거라 생각해서 상위 버전을 사용했었는데 

그것보단 낮은 버전이 더 오래되고 안정화가 잘 되어있다고 한다. 그래서 웬만하면 1,2버전대를 사용하는 것을 권장한다.

그래서 나는 1.12.4버전을 받았다. 


여기서 다운받으려는 버전의 src 뒤에 주소를 브라우저에 입력해 들어간다.

그러면 알 수 없는 언어들이 무수히 많이 나온다. 

그게 제이쿼리다!!!!! min버전(압축버전)이기 때문에 더욱 알 수 없다. (압축아니여도 몰랐겠지만..)

그리고 다른이름을 저장해준다.


5. 그리고 만들고 있는 html 파일로 돌아온다. 

<head>부분에 경로를 연결해준다. 

요렇게! 간단하다. 


이방법의 장점은 파일을 다운받았기 때문에 인터넷이 되지않는 곳에서도 사용이 가능하다. 



제이쿼리 CDN를 연결하는 방법2.


1. '제이쿼리cdn를 연결하는 방법1.' 에서 3번까지 동일하게 해준다.

2. 1.12.4버전을 스크립까지 다 복사해준다. 


3. 고대로 html문서 <head>에 붙여넣기 한다. 

이렇게 하면 끝! 

이 방법을 주로 이용했었는데 이건 인터넷연결 안되면 안된다는 단점이 있지만

인테넷 안되는 곳에서 웹을 만드는 일은 드문일이니 괜찮을 것 같다!


그 외에 모바일 제이쿼리 cdn이 있다. 

 모바일 제이쿼리 CDN


모바일에 좀 더 최적화 되어있는 제이쿼리 이다. 

적용 방법은 똑같고, 모바일 용만 찾아주면 된다. 


여기까지 제이쿼리 CDN 적용 방법이었습니다!

드디어 첫글을 쓰다니 넘 뿌듯..!


다들 아시는 내용이겠지만 도움되었으면 좋겠어용ㅎㅎ