Google CDN 서버의 jQuery 이용하기

 

홈페이지를 제작하면서 jQuery 라이브러리를 사용하고 싶을 때, 두 가지 방법이 있습니다.

첫째, jquery.com 가서 원하는 버전의 jquery 라이브러리를 다운받아서 제작하는 홈페이지의 호스팅 서버로 업로드해서 아래의 코드로 직접 포함시키는 방법

<script type='text/javascript' src="jquery.min.js" ></script>

둘째, 매번 다운받아서 서버에 올리는 번거로움에서 벗어날 수 있는 방법일수 있는데ㅛㅇ, 구글이 가지고 있는 jquery 라이브러리를 아래의 코드로 포함시키는 방법이 있습니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

위의 주소가 이상하죠?? //ajax.googleapis.com 으로 시작되는데요. http:를 붙여야하나..라고 생각하다가 조금 검색을 해보니, 아래 링크에서 도움되는 글을 발견했습니다.

http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/#protocolless

읽으러가기 귀찮으신 분들을 위해 간단히 설명을 하자면...

리소스 캐싱 문제와 관련해서, 브라우져는 http 와 https 를 통해서 가져온 같은 리소스를 다르게 취급을 한다고 합니다. 다시말하면, 이전에 http:// 로 접속해서 파일을 읽어와서 나중을 위해 디스크에 캐싱해 두었더라도, https:// 로 같은 파일에 접근할 경우, 같은 파일임에도 불구하고 캐싱해 둔 파일을 이용하지 않는다고 하네요. http:// 일때는 src="http://...." 로 작성하고, https// 일때는 src="https://..."로 작성해야하는 비효율적인 요소가 발생하게 될거 같은데요. 위 jquery 예처럼, 앞에 http: 나 https: 를 생략하고 지정을 해주면, 현재 문서가 지정된 프로토콜이 http 인지, https 인지에 따라, 적합한 리소스를 이용하게 된다고 합니다.

더 간단히하면, http, https 두 가지 경우 모두에 대응하기 위해 // 만으로 주소 지정을 해 줄 수 있다... 정도로 이해하면 될듯합니다.

구글이 제공하는 다른 라이브러리들은 구글 개발자 사이트에서 자세히 살펴볼 수 있습니다.

https://developers.google.com/speed/libraries/devguide

이상!