jQuery(document).ready(function($){ 이게 뭐지 하다가 알게된 noConflict()

jQuery(document).ready(function($){ 이게 뭐지 하다가 알게된 noConflict()

'트위터 부트스트랩으로 만드는 워드프레스 테마' 책으로 실습을 하던 중 '이게 뭐지?' 싶은 것을 발견했다. 처음에는 아무 생각 없이 책에 있는 코드를 그대로 받아 적었다. 궁금했지만 우선 넘어갔다. 계속 실습을 해나가는데 다른 코드를 추가 했더니 에러가 발생했다. 크롬 브라우저 개발자 도구의 Console 내용을 보니 아래와 같이 붉은 글씨로 에러 내용이 있었다.

Uncaught TypeError: $ is not a function at ...

$이 함수가 아니라니 뭔 소리지? 친절하게 어디 부분이 에러인지 나와 있으니 그 부분을 뚫어져라 쳐다봤다. 처음에는 무슨 오타가 나서 이런가 싶어 알파벳을 하나 하나 체크했지만 문제는 없었다. 여차 저차 하다 보니 앞서 '이게 뭐지?' 싶었던 jQuery(document).ready(function($){ ... }); 안에 코드를 기입하면 해결된다는 것을 알았다. 심증으로 해결은 했는데 이유는 몰랐다. 결국 검색했다.

stackoverflow에 나와 같은 고민을 했던 사람이 질문을 올렸었다. 답변을 보니 워드프레스에서는 jQuery.noConflict()가 호출되어서 그런 것이란다. jQuery.noConflict()를 모르는 사람으로서는 '이건 또 뭐지?' 싶다. jQuery.noConflict()에 대해 알아 보니 요약하면 제이쿼리가 $ 변수에 관한 통제권을 포기하는 것이란다. 즉, 제이쿼리하면 떠오르는 $에 대해 이전 처럼 사용하면 안된다는 것이다. 이유는, 다른 자바스크립트 라이브러리에서도 $를 다른 방식으로 사용할 수 있기 때문에 이런 기능이 있는 것이란다.

참고

• http://stackoverflow.com/questions/3931529/is-not-a-function-jquery-error
• http://api.jquery.com/jQuery.noConflict/

제이쿼리에서 .noConflict()에 따른 사용법 정리

좀 더 검색을 하여 .noConflict()에 대해 알아보았다. 정리하면 아래와 같다.

1. $.noConflict()를 호출하면, 제이쿼리는 $ 대신 'jQuery'를 사용해야 한다.

$.noConflict();

jQuery('button').click(function(){
  // 버튼 누르면 작동
});

2. $.noConflict()를 호출 하더라도 $를 계속 사용할 수 있도록 하는 방법도 있다. jQuery(document).ready(function($){ ... }); 안에 코드를 작성하는 것이다. function 괄호 안에 $를 빼먹지 말아야 한다.

$.noConflict();

jQuery(document).ready(function($){
  $('button').click(function(){
    // 버튼 누르면 작동
  });
});

3. $.noConlfict() 호출 시 jQuery 대신에 다른 문자를 사용할 수 있도록 하는 방법도 있다. 변수를 하나 선언하면서 $.noConflict()를 그 변수에 할당하는 것이다.

var awesome = $.noConflict();

awesome('button').click(function(){
  // 버튼 누르면 작동
});