Javascript Library 들이 출현하면서 자바스크립트의 중요성은 비약적으로 높아졌습니다. Rich UI 를 구현함에 있어서 이 라이브러리들의 기여도는 결정적이였습니다. 풍부해진 사용자 경험(UX)을 바탕으로 웹 어플리케이션이란 용어도 등장하기 시작했습니다. 아마 앞으로는 웬만한 어플리케이션은 웹 기반이 되지 않을까 합니다.
많아진 Javascript Library 들을 같이 사용해야 하는 경우가 있습니다. 이에 jQuery는 다음과 같은 권고 사항을 제시하고 있습니다.
원문을 보시려면 여기를 클릭하세요.
GENERAL : 개요
jQuery 라이브러리와 Plugin 들은 jQuery 네임스페이스안에 종속되어 있습니다. 만약 여러분이 jQuery 외의 Prototype, MooTools, YUI 등과 같은 다른 라이브러리와 같이 사용하길 원하면 jQuery의 "전역(global)" 객체들은 jQuery 네임스페이스 안에서 사용해야 합니다.
jQuery 에서는 다음과 같이 경고(권고) 합니다. jQuery의 '$' 를 'jQuery' 로 바꿔 사용하십시요.
완전 직역이네요. ^^;; 쉽게 설명드리자면 jQuery하고 Prototype을 같이 쓰실 경우가 생기시면 jQuery의 $ 를 jQuery 라고 바꿔 쓰라는 얘기입니다. Prototype에도 $ 가 있으니까요. 아래 구체적인 예시들이 있습니다.
OVERRIDING THE $-FUNCTION : $ 함수를 재정의 하세요.
jQuery.noConflict() 함수를 사용한 후 그 이후부터는 $ 대신 jQuery 사용할 수 있습니다. 아래는 예제코드입니다.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
6라인 이후에는 $ 대신에 jQuery 라고 사용하신 것을 보실 수 있습니다. 14라인의 $ 는 Prototype의 $ 가 됩니다. $를 Prototype에게 양보한다는 거네요. 참 착한 jQuery입니다. ^^
그런데 $ 라고 쓰다가 jQuery 라고 쓰려니 타자의 압박이 있습니다. 그래서 jQuery 는 아래와 같이 대체어(alternate names)를 사용할 수 있게 했습니다.
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
6라인을 보시면 $j 라고 변수선언을 했습니다. 그 아래 부터 jQuery 가 아닌 $j 로 사용하실 수 있습니다. $j 말고도 사용하고 싶은 대체어를 만드시면 됩니다. $findfun 이나 $jq 와 같이 말이죠.
그럼에도 불구하고 "아~ 나는 무조건 $를 써야겠다" 라고 하시는 분들을 위해서 jQuery는 또 하나의 방법을 제시합니다.(이 방법은 별로인거 같습니다.)
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
9라인과 같이 jQuery 네임스페이스 안에 속한 내용들은 이전 처럼 $ 를 사용하실 수 있습니다. 11라인을 보세요. 그대로 $ 를 사용했습니다. 하지만 썩 좋은 코드는 아닌 것 같습니다.
jQuery.noConflict() 함수가 기억이 나지 않거나 실수로 기술하지 않았을 경우에는 에러를 찾기 힘들 수 있습니다. 아래 내용을 보시면 해결 방법이 있습니다.
INCLUDING JQUERY BEFORE OTHER LIBRARIES : jQuery 라이브러리 인클루드를 다른 라이브러리 보다 위쪽에 하세요.
jQuery 라이브러리 인클루드를 항상 제일 위쪽에 하시면 jQuery.noConflict() 함수를 기억하지 않으셔도 됩니다.
<html>
<head>
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
3,4 라인을 보시면 jquery.js 가 위쪽입니다. 그리고 코드 상에 jQuery.noConflict() 가 없는 것을 보실 수 있습니다.
결론적으로 jQuery 라이브러리와 다른 라이브러리들 같이 사용하시려면 아래와 같이 사용하시는 것을 적극 권장합니다.
jQuery 라이브러리 인클루드를 다른 라이브러리 보다 위쪽에다 할 것.- var $j = jQuery; 와 같이 대체어를 사용할 것.
두 가지 이상의 라이브러리를 동시에 같은 프로젝트에 사용할 일은 거의 없어 보입니다. 하지만 그런 일이 없으란 법은 없겠죠. 그런 경우를 대비해서 한번 읽고 넘어가는 것도 좋겠네요. jQuery 의 세심한 배려에 박수를 보냅니다.
자 이번 포스팅은 여기 까지입니다. 그럼 모두들 즐프하세요~.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery 쉽게하기 - 기본부터 시작하자, Object 편 (8) | 2011.01.17 |
|---|---|
| jQuery 쉽게하기 - 기본부터 시작하자, Number 편 (14) | 2011.01.17 |
| jQuery 쉽게하기 - 기본부터 시작하자, string 편 (13) | 2011.01.14 |
| jQuery 쉽게하기 - 파이어폭스의 파어어버그 사용하여 디버깅하기 (6) | 2011.01.14 |
| jQuery 쉽게하기 - 자주 묻는 질문과 답변, 두번째 (11) | 2011.01.13 |
| jQuery 쉽게하기 - 자주 묻는 질문과 답변, 그 첫번째 (11) | 2011.01.12 |
| jQuery 쉽게하기 - jQuery 어떻게 쓰는 건가요? (48) | 2011.01.11 |
| jQuery 쉽게하기 - jQuery 를 다운받아 보자. (12) | 2011.01.10 |
