JQuery Conflict

• Posted by zmeun on 2009. 06. 06 14:54
• 4 comments

어느덧 6월. 전 같으면 “이제 곧 여름이구나…”라고 했을 텐데, 요즘엔 “엇! 벌써 여름이구나”라고 이야기 합니다. 아름다운 사계절 중 봄, 가을은 이제 맛만 보고 흘려 보내야 하니 아쉽기가 그지 없습니다.

오늘은 JQuery에 관한 간단한 내용을 이야기할까 합니다. 아마 제가 생각하기에 JQuery만한 Javascript library는 없는 것 같은데.. 와우~ 정말 굉장하죠?

실제로 회사에서 있었던 일입니다. 제가 개발한 api를 다른 팀에서 client side script를 통해 호출해서 사용하는 일이 있었습니다. 물론 client side에서 호출할 수 있는 function까지 제공했구요. 그리고 그 function은 Jquery를 사용하고 있었지요.

저는 테스트까지 모두 마치고 샘플 코드까지 있는 api 명제를 전달했습니다. 그런데, 다른 팀 담당자분께서 이런 말씀을 하시더라구요…

“전달해 주신 function이 JQuery를 사용하고 있지요? 그런데 저희 팀에서는 이미 Prototype을 사용하고 있기 때문에 $(JQuery 별칭)이 충돌이 나서 사용할 수 없어요…” 라구요..

네. 흔히 일어날 수 있는 문제입니다. 그래서 저는 이 문제에 대한 해결 방법을 찾기 위해 영등포에서 노숙 생활을 하고 계시는 김씨 아저씨게 이 문제에 대해 어떻게 생각하시냐고 물었습니다.

그랬더니 영등포 김씨 아저씨 왈 “JQuery Conflict도 모르는게 JQuery를 써? 꺼져!” 라고 말씀하시더군요. ㅋㅋㅋ  -_-;

ProtoType과 JQuery간의 충돌 문제는 다음과 같은 방법으로 쉽게 해결할 수 있습니다. 그럼 간단한 코드를 작성해 보겠습니다.

이 예제 코드는 페이지를 구성하는 태그 때문에, 코드가 조금 길 뿐이지 정작 중요한 것은 아주 간단합니다.

바로 jQuery.Conflict() function을 제일 먼저 호출하는 것과 JQuery를 사용할 때 $(JQuery 별칭) 대신 jQuery를 사용하는 것 뿐입니다. 정말 간단하죠?

이렇게 하면 Prototype과 JQuery를 사용했을 때의 충돌 문제를 해결할 수 있기 때문에, 위의 샘플 코드 역시 문제 없이 실행될 수 있습니다.

이것 외에도 몇 가지 해결 방법이 더 있죠?

var $j = jQuery.noConflict();

이 코드를 사용해서 jQuery의 별칭을 $에서 $j로 변경할 수 있습니다. 그럼 Jquery를 사용할 때면 $j를 사용하면 되겠죠..

이것 외에도 function($)(jQuery)를 사용할 수도 있습니다. 이 경우에는 function($) 함수의 코드 블록 안에서 파라미터로 전달 된 $를 통해서 JQuery 코드를 사용합니다. 파라미터로 전달 된 JQuery의 별칭인 $는 function 코드 블록 내에서만 참조되기 때문에 function 밖에서는 충돌 날 일이 없겠죠?

그런데 이 식이 눈에 잘 익지 않죠? 걱정하지 마세요. 이 식을 알아 보기 쉽게 풀어보면 다음과 같이 나타낼 수 있습니다.

어떠신가요? 조금 눈에 익죠? 그냥 단순이 함수의 파라미터에 jQuery object를 전달하면, 함수 내에서는 파라미터 변수 $을 통해서 JQuery를 참조할 수 있는 것입니다. 참 쉽죠~~ 잉!

JQuery의 매력은 JQuery가 제공하는 많은 기능과 익숙한 사용법 등도 있겠지만, 이것 외에도 JQuery를 이용한 수 많은 Plugin이 제공된다는 것입니다. 혹시 관심이 있으신 분들은 JQuery Plugin Repository (http://plugins.jquery.com/)를 살짝 방문해 보셔도 좋을 것 같네요.

그럼 즐거운 주말 보내시기 바랍니다. 감사합니다. ^o^v

posted by zmeun