두 개의 다른 버전의 JQuery 라이브러리 사용하기

JQuery 관련하여서는 오랫만에 포스팅하네요.

 

오늘은 JQuery 를 사용하면서 유용한 팁을 하나 알려드립니다.

 

혹시 웹페이지 개발 시, 어떤 특정 페이지에서 JQuery 라이브러리를 동시에 다른 2개의 버전을 포함시켜야 되는 경우는 없으셨는지요?

보통 일반적으로 웹 사이트 개발 시, 적절한 JQuery 버전을 선택하여 해당 버전을 기반으로 개발하기 때문에 이러한 경우는 자주 발생하지 않지만, 종종 동시에 JQuery를 한 페이지에서 2개를 포함시킬 수 밖에 없는 상황에 빠지기도 합니다.

 

아래는 그 예시입니다. (바쁘신 분들은 이 파란 박스 예시를 읽지 않고 아래 방법만 보셔도 됩니다.^^)

 

5년전에 JQuery 라이브러리 1.4.x 버전을 기반으로 개발하여 현재까지 운영하고 있는 웹사이트가 오랫동안 리뉴얼될 필요성을 느끼지 못하는 상태이고, 리뉴얼하기도 어려운 상태입니다. 그래서 사이트 전체 리뉴얼은 예정되어 있지 않지만, 이번에 고객들을 대상으로한 웹 페이지에 새로운 기술을 활용하여 페이지를 예쁘게 꾸며보려고 합니다.

 

새 페이지에는 JQuery 의 슬라이드(Slide) 기능을 활용하여 페이지가 좌우, 상하로 슬라이딩 되면서 움직이는 애니메이션 효과를 주려고 했는데, 왠걸!! JQuery 1.4.x 에서는 이 기능을 지원하지 않는 것입니다. 확인해보니 JQuery 1.7.x 버전부터 슬라이드 기능을 지원하는군요.

 

그럼 사이트에서 사용하는 공통 JQuery 라이브러리를 1.7.x 버전으로 올리면 되겠군요..

하지만, 이렇게 하면 사이트에 전반적인 문제가 발생할 가능성이 큽니다. JQuery 라이브러리가 지속적으로 업그레이드 되면서 사장된 기능이 있을 수도 있고, 함수 명이 변경되었을 수도 있지만, 새로운 기술이 추가되면서 기존 기술에 변화가 있었을 수도 있습니다.

당연히 최대한 하위 호환성을 염두에 두고 라이브러리가 업그레이드 되지만, 부득이 변화가 되는 경우를 피할 수는 없습니다.

 

그래서 단순히 JQuery 라이브러리 버전만 올린다고 하여 코드 마이그레이션 작업이 간단히 끝나는 것이 아닙니다. 최신 버전에 맞추어 변화된 것들을 제대로 적용시켜 주어야 합니다.

 

음.. 생각해보니, 그러기에는 작업 공수도 너무 많이 들것 같고, 라이브러리 버전업이 어떤 페이지에 문제를 일으키고, 영향을 줄지, 예측하기도 어렵고, 이래저래 곤란한 상태입니다.

 

그럼 간단히 해당 페이지에만 JQuery 라이브러리 1.7.x 를 인클루드 시켜서 적용하면 되지 않겠느냐 한다면 그것이 현재로써는 가장 좋은 방법입니다.

 

그래서 그렇게 개발을 하려했더니, 모든 페이지에 함수와 스타일, 인클루드 파일 등을 동시에 적용하는 공통 라이브러리 파일이 JQuery 1.4.x 를 인클루드 하고 있는 것입니다. 그렇다고 공통 라이브러리 파일에서 JQuery 1.4.x 인클루드 코드를 빼버리면 개별 페이지마다 JQuery 를 모두 인클루드 시켜줘야 하고, 새로 만들 페이지만 공통 라이브러리 적용을 빼고 만들자니, 또 여러가지 다른 문제가 생깁니다(해당 페이지의 css, javascript, meta 등 공통으로 적용되고 있던 것들을 해당 페이지에 개별적으로 모두 재정의 해야함).

 

 

각설하고, 한 페이지에 동시에 다른 2개의 JQuery 라이브러리를 포함시키면 충돌이 발생합니다.

이런 저런 충돌 문제가 있지만 가장 큰 문제는 JQuery 코드를 의미하는 $(달러표시) 이 것이, 중복 정의되어버리게 됩니다.

1.4.x 버전에도 $를 정의하고 있고, 1.7.x 버전에서도 $를 정의하기 때문에 중복 정의 오류가 발생합니다.

 

 

그렇다면 동시에 2개의 다른 JQuery 라이브러리를 페이지에 포함시킬 수 없는 것일까요?

베이스 JQuery는 1.4.x 버전을 사용하고, 최신 기술만 JQuery 의 1.7.x 버전을 사용할 수는 없는 것일까요?

(참고로 JQuery 는 2.x 버전까지 나와있고, 1.7.x는 최신 버전이 아닙니다. 단지 1.4.x 와 비교하기 위함입니다.)

 

가능합니다!

 

바로 아래 코드처럼 작성하시면 됩니다. (아래는 예제 코드입니다.)

 

// common.js

// 공통 라이브러리에 적용된 jquery-1.4.1.js 파일 적용 코드

<script type="text/javascript" src="/js/lib/jquery-1.4.1.js"></script>

 

 

// newPage.jsp

// 새로 만들 페이지에 추가한 jquery-1.7.2.js 파일 적용 코드 

...

<script type="text/javascript" src="/js/lib/jquery-1.7.2.js"></script>

...

 

<script type="text/javascript>

 

// * noConflict 를 통해 충돌을 피하기 위해 JQuery 라이브러리의 noConflict() 함수 호출

// * '$' 는 단지 JQuery에서 JQury를 구분하기 위한 별명(Alias)일 뿐이며, 이를 변경할 수 있습니다.

// * noConflict() 는 호출됨과 동시에 $라는 변수 키워드가 가지고 있는 JQuery에 대한 제어권을 포기.

// * $.noClonflict() 함수는 JQuery 객체를 반환하는데, 여기서는 1.7.2 버전의 라이브러리 JQuery 객체를 반환하고 이를 newJquery 라는 새 변수 별명(Alias)로 할당합니다.

var newJquery = $.noConflict(true);

 

$(function() {

// 이제 1.7.2 버전의 JQuery 라이브러리에만 정의된 함수나 속성을 사용하려면 $ 대신 newJQuery 를 사용하면 됩니다.

newJquery('#slideTest').slidejs({

width : 600,

height : 400,

navigation : true,

pagination : false

});

 

// 기존의 1.4.2버전의 JQuery 라이브러리를 사용하려면 그대로 $ 를 사용하면 됩니다.

$('#btnCheck').click(function() {

$('#testLink').attr({

"href" : "http://ozit.co.kr"

"title" : "The Developer of OZ"

});

});

});

 

</script>

 

 

 

 

위에서 1.7.2 버전의 JQuery 별칭을 newJquery 로 하였지만, 좀더 간단한 영문자나 기호로 하셔도 무방합니다.

 

사실 이렇게 동시에 2개의 JQuery를 로드하는 것은 권장되는 방법은 아니기 때문에 가급적 개발하려고 하는 사이트의 모든 기능과 기술을 수용할 수 있는 버전의 JQuery 라이브러리를 채택하시기 바랍니다.

이렇게 사용한다고 하여 개발 로직 상에 실질적인 문제가 발생하는 것은 아니지만, 단지 개발 코드 작성의 불편함이나 혼란을 줄 가능성은 있습니다. 또한 동시에 2개 버전의 라이브러리를 로드하기 때문에 작게나마 서비스 속도에 영향을 줄 수 도 있습니다.

 

참고로 $.noConfilict() 함수 호출 시, 파라메터 값(true or false)를 넘겨도 되고, 넘기지 않아도 되는데, true 인자 값을 넘기는 경우, 기존 전역에 설정된 JQuery 라이브러리(1.4.x)의 모든 변수들을 해당 페이지에서 제거합니다.

 

 

그리고 예제에서는 JQuery 라이브러리 간의 충돌에 한정하여 설명하였는데, 실제는 $를 사용하는 JQuery와 다른 모든 Javascript 라이브러리 간의 충돌을 방지할 때도 사용됩니다.