HTML5 매뉴얼

13-2-4.명칭 충돌

jQuery가 유일한 자바스크립트 라이브러리는 아니며 여러 가지 종류가 있다. 라이브러리끼리 평화 협정을 맺은 것은 아니므로 다른 라이브러리도 $라는 명칭을 사용할 수 있으며 사용자도 $를 함수명으로 쓸 자유가 있다. 언어가 인정하는 합법적인 명칭 문자이며 짧아서 편리하기 때문인데 실제로 프로토타입 라이브러리도 $ 명칭을 사용한다.

이렇다 보니 여러 개의 라이브러리를 혼합해서 사용하면 명칭이 충돌할 가능성이 있다. 고의적으로 2개의 라이브러리를 섞어서 사용할 경우는 드물겠지만 기존 코드를 재사용한다거나 프로젝트끼리 병합하면 충돌 확률이 농후해진다. 프로토타입 라이브러리를 받아서 실습하기는 어려우므로 달러 환율을 계산해 주는 가상의 라이브러리를 만들어 보자.

exchangerate.html

<!DOCTYPE html>

<html>

<head>

<title>exchangerate</title>

function $(arg) {

var rate = 1149;

if (arg == undefined) {

document.write("현재 환율은 " + rate + "원입니다.<br />");

} else {

document.write(arg + "달러는 " + (arg * rate) + "원입니다.<br />");

}

</script>

</head>

<body>

<hr />

$();

$(123);

</script>

</body>

이 라이브러리의 $() 함수를 인수 없이 호출하면 현재 환율을 출력하고 인수를 전달하면 달러를 원화로 바꾸어 계산해 준다. 편의상 환율은 상수로 가정했다. 스크립트에서 현재 환율과 123$가 원화로 얼마인지 계산해 보았다. 제대로 잘 동작한다.

환율을 계산하는 동작을 하므로 $() 라는 함수명이 참 잘 어울린다. 이 함수가 유용하고 인기가 많다면 함수 정의 부분만 따로 분리하여 dollar.js라는 라이브러리로 배포할 것이다. 그러나 안타깝게도 이 라이브러리는 jQuery와는 함께 쓸 수 없다.

exchangerate2.html

<!DOCTYPE html>

<html>

<head>

<title>exchangerate2</title>

</head>

<body>

<hr />

$();

$(123);

$('h1').css('background', 'yellow');

</script>

</body>

두 라이브러리를 포함해 놓고 $() 함수를 호출해 보았다. 앞쪽 두 호출문은 dollar.js 의 $() 함수를 호출한 것이고 마지막 호출문은 <h1> 엘리먼트의 배경을 변경하는 jQuery 호출문이다. dollar 라이브러리가 정의한 $() 함수의 정의가 jQuery에 의해 바뀌어 버리므로 달러 계산기는 동작하지 않으며 jQuery의 함수만 동작한다.

환율에 대한 출력은 없으며 <h1>의 배경색만 바뀌었다. 같은 이름으로 함수를 다시 정의하면 나중에 정의한 함수가 유효하며 앞서 정의한 함수는 무효가 되어 버리기 때문이다. 달러 계산기가 제대로 동작하려면 라이브러리 포함 순서를 바꾸어야 한다.

exchangerate3.html

....

그러나 이렇게 하면 jQuery의 $() 함수가 달러 계산기로 바뀌어 버린다. 엘리먼트가 제대로 검색되지도 않고 배경색이 바뀌지도 않으며 아래쪽에 엉뚱한 계산 결과만 출력된다.

왜 이런 결과가 나오는지는 논리적으로 설명하지 않아도 상식적으로 이해될 것이다. 이름이 중복되었으니 둘 중 하나는 정상적으로 동작할 수 없다. 이런 불가피한 경우 문제를 회피하는 방법이 있어야 하는데 원인이 상식적이므로 해결 방법도 상식적이다.

충돌이 발생했으면 어쨌든 둘 중 하나는 양보하는 수밖에 없다. 다른 라이브러리에도 이런 장치가 있지만 지금은 jQuery를 학습하는 중이므로 jQuery에서 양보해 보자. jQuery는 이름 충돌시 대처 방법을 제공하는데 다음과 같이 하면 두 라이브러리 모두 정상 동작한다.

exchangerate4.html

<!DOCTYPE html>

<html>

<head>

<title>exchangerate4</title>

jQuery.noConflict();

</script>

</head>

<body>

<hr />

$();

$(123);

jQuery('h1').css('background', 'yellow');

</script>

</body>

noConflict 메서드는 jQuery 라이브러리에서 $라는 별명을 등록하지 않음으로써 다른 라이브러리에게 이 명칭을 양보한다. 가급적 일찍 포기해야 하므로 이 구문은 head에 작성하는 것이 좋다. 이렇게 되면 dollar 라이브러리의 $() 함수는 유효하지만 대신 jQuery는 $() 함수를 쓸 수 없으므로 jQuery()라는 원래 함수명을 사용해야 한다.

환율도 제대로 계산되었고 <h1> 엘리먼트의 배경색도 정상적으로 변경되었다. 이왕 $() 함수를 포기하는 것이라면 라이브러리의 포함 순서를 바꾸어도 결과는 같다. jQuery를 먼저 포함시키고 dollar를 나중에 포함시키면 dollar가 jQuery의 $() 함수를 다른 용도로 바꿔 버리므로 noConflict를 호출하는 것과 결국 마찬가지이다.

이렇게 하면 문제는 해결되지만 jQuery 여섯 글자를 일일이 다 써야 하는 불편함이 있다. 솔직히 타이프하기 쉬운 철자도 아니다. 좀 짧게 쓰고 싶으면 noConflict 메서드가 리턴하는 jQuery의 참조에 대해 다른 별칭을 주어 사용할 수도 있다.

exchangerate5.html

<!DOCTYPE html>

<html>

<head>

<title>exchangerate5</title>

var jq = jQuery.noConflict();

</script>

</head>

<body>

<hr />

$();

$(123);

jq('h1').css('background', 'yellow');

</script>

</body>

$라는 이름 대신에 jq라는 별칭을 새로 만들어 주었다. 더 짧게 붙인다면 J로도 물론 가능하다. 사실 굳이 noConflict가 리턴하는 참조를 대입받지 않더라도 새로운 별칭은 언제든지 만들 수 있다. var jq = jQuery; 로 새로운 별명을 만들수 있으며 이후 $() 대신 jq() 함수를 사용하면 된다.

충돌은 해결되었지만 이렇게 되면 기존의 코드를 재사용할 때 $를 모두 jq로 치환해야 하는 번거로움이 있다. 두 라이브러리가 모두 정상 동작하면서 $ 기호를 꼭 사용하고 싶다면 여러 가지 꼼수를 동원해야 한다. 다음 예제는 document 객체의 ready 이벤트의 인수로 $를 넘기고 이벤트 핸들러 안에서 $기호를 마음대로 사용하는 방식이다.

exchangerate6.html

<!DOCTYPE html>

<html>

<head>

<title>exchangerate6</title>

jQuery.noConflict();

</script>

</head>

<body>

<hr />

$();

$(123);

jQuery(function($) {

$('h1').css('background', 'yellow');

});

</script>

</body>

jQuery(document).ready(function($) {} )를 짧게 써서 jQuery(function($) {} )로 썼다. 라이브러리 충돌이 없다면 $(function($) {} )로 더 짧게 쓸 수 있지만 $ 명칭을 쓸 수 없으므로 함수명에는 jQuery 명칭을 모두 써야 한다.

ready 이벤트의 콜백은 원래 인수를 받지 않지만 콜백 함수의 인수로 $를 전달하면 외부의 별칭에 상관없이 이 콜백안에서는 $를 jQuery로 인식하도록 되어 있다. 그래서 이 핸들러내에서는 다른 라이브러리의 눈치를 볼 필요없이 $기호를 마음대로 사용할 수 있다. 다음 방법도 종종 사용되는데 문법이 허락하는 한에서 최대한 융통성을 발휘한 것이다.

exchangerate7.html

<!DOCTYPE html>

<html>

<head>

<title>exchangerate7</title>

jQuery.noConflict();

</script>

</head>

<body>

<hr />

$();

$(123);

(function($) {

$('h1').css('background', 'yellow');

})(jQuery);

</script>

</body>

$라는 명칭을 인수로 받는 익명 함수를 선언하고 이 함수를 바로 호출하여 jQuery 인수를 넘기는 것이다. 그러면 이 함수 내에서 형식인수 $는 실인수 jQuery와 같아지며 외부의 $명칭과는 다른 지역 명칭이 만들어진다. 전역과 지역이 겹치면 지역이 우선임을 이용하는 것이다. 이 익명 함수 내에서 $는 jQuery의 함수이고 함수 밖에서 $는 다른 라이브러리의 명칭이 된다.

이상으로 명칭 충돌을 해결하는 여러 가지 방법에 대해 연구해 봤는데 상황을 회피하는 방법이다 보니 은근히 복잡하다. 이런 복잡한 방법을 동원하는 것보다 더 바람직한 방법은 두 말할 필요없이 라이브러리를 하나만 쓰는 것이다. 사실 라이브러리를 2개 이상 사용하는 경우는 흔하지 않은데 극단적인 경우를 위해 마련된 궁여지책이므로 잘 이해되지 않으면 그냥 넘어가도 무방하다.