Google AJAX Libraires API를 이용해서 자바스크립트 프레임워크 사용하기

이전에 파이어준님의 포스팅 에서 보고는 담에는 써야지 하다가 이번에야 써봤다. 쉽게 말하면 자바스크립트 프레임워크를 구글이 제공 해서 자신의 사이트에 올리지 않고 구글에서 끌어다가 쓸 수 있게 한다. 머 이건데... 회사에서는 쓸 일 있을지 모르겠고 블로그에서 예제파일 돌릴려고 몇개 올려두기는 했는데 버전도 계속 바뀌고 그래서 신경이 쓰였는데 이 서비스는 내가 써먹기는 딱인듯 하다. ㅋ 그래서 바로 전의 포스팅을 하면서 한번 써봤다. 잘된다.(당연하지. ㅡ..ㅡ)

파이어준님의 포스팅에도 나와있긴 하지만 다시 정리하자면
제공하는 라이브러리는 jQuery , prototype , script.aculo.us , mootools , dojo 이다.(2008년 8월 1일 현재...) - 2개씩 적혀 있는 것은 위의것은 압축된(compressed) 버전이고 아래쪽은 압축되지 않은 버전이다.)

jQuery (1.2.3, 1.2.6 지원)

view plaincopy to clipboardprint?

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>   
2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>   

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

prototype (1.6.0.2 지원)

view plaincopy to clipboardprint?

1. <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>   

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

script.aculo.us (1.8.1 지원)

view plaincopy to clipboardprint?

1. <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js "></script>   

<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js "></script>

mootools (1.11 지원)

view plaincopy to clipboardprint?

1. <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script>   
2. <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script>   

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script>

dojo (1.1.1 지원)

view plaincopy to clipboardprint?

1. <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js "></script>   
2. <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js.uncompressed.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js "></script> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js.uncompressed.js"></script>

머 사용법이고 말고 할것도 없다. 그냥 script 인클루드의 링크를 구글로 건거다. ㅋㅋ 구글 API써서 하는 방법도 있지만 평소에도 이런식이 익숙하니까 이게 더 편한 것 같다. 이렇게 블로그에 올리거나 잠시 테스트할 때 프레임웍 불러내는게 은근 귀찮은데 이렇게 쓰니까 참 편하다.



그냥 구글이 갔다 쓸수만 있게 했겠는가? ㅋ Ajaxian의 포스트 에 따르면 다음과 같은 장점이 있다고 한다.

• 개발자가 아무짓도 안해도 캐싱이 잘 된다.
• Gzip으로 동작한다.
• 최소화된 버전으로 제공할 수 있다.
• 세계곳곳의 CDN을 통해서 구글이 파일을 호스팅하기 때문에 사용자가 빨리 받을 수 있다.
• 서버가 빠르다.
• 같은 URL을 사용하기 때문에 구글의 인프라가 커지면 사용자가 당신의 어플리케이션에 처음왔을 때 이미 프레임워크가 로드되어 있을수도 있다.
• 당신이 보내고 받는 헤더관련 미묘한 성능 및 보안 이슈가 해결된다. 당신이 특별한 도메인(구글말고)을 사용한 이래고 쿠기가 없거나 다른 장황한 헤더가 보내질 것이므로 귀중한 바이트를 아낄수 있다.

개발하는 사이트에서 자신의 사이트에 라이브러리가 없는게 좀 신경쓰일 수도 있지만 많은 장점이 있는데도 굳이 안 쓸 이유도 없을것 같다. 나야 개인적으로만 쓰겠지만.. ㅎㅎㅎㅎ



위에처럼 직접 인클루드하는 방법 외에도 Google AJAX API Loader를 이용해서도 라이브러리 파일을 인클루드 할 수 있다.  구글과으 매쉬업을 위해서 구글 api를 사용한다면 google.load()방식이 더욱 유용할 것이다.

view plaincopy to clipboardprint?

1. <script src="http://www.google.com/jsapi"></script> 
2. <script type="text/javascript"> 
3.     // jQuery 압축, 비압축  
4.     google.load("jquery", "1.2.6");  
5.     google.load("jquery", "1.2", {uncompressed:true});  
6.  
7.     // prototype, scriptaculous  
8.     google.load("prototype", "1.6.0.2");  
9.     google.load("scriptaculous", "1.8.1");  
10.  
11.     // mootools 압축, 비압축  
12.     google.load("mootools", "1.11");  
13.     google.load("mootools", "1.11", {uncompressed:true});  
14.  
15.     // dojo 압축, 비압축  
16.     google.load("dojo", "1.1.1");  
17.     google.load("dojo", "1.1.1", {uncompressed:true});  
18. </script> 

<script src="http://www.google.com/jsapi"></script> <script type="text/javascript">     // jQuery 압축, 비압축     google.load("jquery", "1.2.6");     google.load("jquery", "1.2", {uncompressed:true});     // prototype, scriptaculous     google.load("prototype", "1.6.0.2");     google.load("scriptaculous", "1.8.1");     // mootools 압축, 비압축     google.load("mootools", "1.11");     google.load("mootools", "1.11", {uncompressed:true});     // dojo 압축, 비압축     google.load("dojo", "1.1.1");     google.load("dojo", "1.1.1", {uncompressed:true}); </script>



마지막으로 Google AJAX Libraires API에 대한 설명 영상