WordPress에서 '잡히지 않은 TypeError: $ Is Not a Function' 오류를 수정하는 방법

아, WordPress의 전형적인 "Uncaught TypeError: $는 함수가 아닙니다." 오류입니다. WordPress 사이트 개발에 발을 담그셨다면 이 오류를 우연히 발견하셨을 것입니다. 이는 아침에 차에 시동을 걸다가 잘못된 키를 사용했기 때문에 차가 뒤집힐 수 없다는 것을 깨닫는 것과 같습니다. WordPress에서는 jQuery가 바로 그 자동차인데, '$' 기호가 가끔 맞지 않는 키입니다.

'잡히지 않은 TypeError: $는 함수가 아닙니다.' 오류는 무엇인가요?

그것을 분석해 봅시다. 사랑받는 JavaScript 라이브러리인 jQuery는 빠른 웹 개발을 위해 HTML 문서 탐색, 이벤트 처리, 애니메이션 및 Ajax 상호 작용을 단순화합니다. 많은 WordPress 테마와 플러그인이 멋진 기능을 위해 의존하는 툴킷입니다.

jQuery에서 '$' 기호는 "jQuery"의 약어이므로 코드를 더 깔끔하고 작성하기 쉽게 만듭니다. 그러나 WordPress에서 "Uncaught TypeError: $는 함수가 아닙니다." 오류가 발생하면 본질적으로 "이 '$' 기호를 jQuery의 일부로 인식할 수 없습니다."라는 의미입니다.

이는 몇 가지 이유로 발생할 수 있지만 이는 WordPress와 jQuery를 처리하는 고유한 방식 으로 귀결되며, 이로 인해 종종 혼란과 오류가 발생합니다.

"Uncaught TypeError: $는 함수가 아닙니다." 오류의 가장 까다로운 부분 중 하나는 그 모호한 성격입니다. 자세한 설명이 제공되지 않으며 문제가 있는 코드 부분을 직접적으로 알려주지도 않습니다. 이는 자동차의 엔진 점검 표시등과 유사합니다. 뭔가 잘못되었다는 것을 알지만 추가 조사 없이는 문제를 정확히 찾아낼 수 없습니다. 특히 WordPress에서 디버깅을 처음 사용하는 경우 이러한 모호함은 실망스러울 수 있습니다.

"Uncaught TypeError: $는 함수가 아닙니다." 오류가 나타나는 이유는 무엇입니까?

이 오류 뒤에는 몇 가지 일반적인 용의자가 있습니다.

1. jQuery 라이브러리가 제대로 로드되지 않았습니다 . WordPress에서 jQuery를 찾을 수 없으면 '$' 기호는 아무런 의미가 없습니다. 그것은 어둠 속에서 책을 읽으려는 것과 같습니다. 단어가 거기에 있다는 것을 알지만 볼 수는 없습니다.
2. WordPress는 충돌 없음 모드입니다 . 기본적으로 WordPress는 '$' 기호를 사용할 수 있는 다른 라이브러리와 충돌하지 않는 방식으로 jQuery를 로드합니다. 이는 주방에 두 명의 요리사가 있는데 둘 다 같은 칼을 사용하겠다고 고집하는 것과 비슷합니다. 요리 재앙을 피하기 위해 WordPress는 한발 물러서서 "좋아요. '$' 기호를 사용하지 않겠습니다."라고 말합니다.
3. 플러그인 또는 테마 충돌 : WordPress의 기본 설정과 충돌하는 방식으로 '$' 기호를 사용하여 플러그인 또는 테마가 다른 사람과 잘 작동하지 않아 오류가 발생하는 경우가 있습니다.

오류의 원인 찾기

오류를 해결하기 위해 오류의 구체적인 원인을 알아야 할 필요는 없지만, 무슨 일이 일어나고 있는지 알아야 하는 경우 파악하기 어려운 오류의 원인을 추적하는 데 도움이 되는 몇 가지 옵션이 있습니다.

개발자 콘솔과 WordPress 디버그 로그라는 두 가지 강력한 도구를 사용하여 탐정 기술을 발휘하세요.

개발자 콘솔 : 브라우저에서 이 귀중한 도구에 액세스할 수 있습니다.웹페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사" 또는 "요소 검사"를 선택한 다음 "콘솔" 탭을 클릭합니다.

이 콘솔은 파악하기 어려운 오류를 포함하여 웹 사이트 뒤에서 일어나는 일에 대한 귀중한 정보를 표시합니다. 이는 보물(또는 이 경우 문제)이 어디에 있는지 알려주는 지도를 갖는 것과 같습니다.

WordPress 디버그 로그 : WordPress 사이트에 더 깊이 관련된 문제의 경우 WP_DEBUG를 켜는 것이 생명의 은인이 될 수 있습니다.이 기능을 활성화하면 wp-content 디렉터리 내의 debug.log 파일에 모든 오류, 경고 및 알림이 기록됩니다. 활성화하려면 wp-config.php 파일을 편집하고 WP_DEBUG를 true로 설정해야 합니다.

사이트 전체에 감시 카메라를 설치하는 것으로 생각하십시오. 기록되지 않고 지나가는 것은 없습니다.

WordPress에서 "잡히지 않은 TypeError: $는 함수가 아닙니다" 오류를 수정하는 방법

오류의 구체적인 원인에 관계없이 고무가 도로와 만나는 지점이 바로 여기입니다. "Uncaught TypeError: $ is not a function" 오류를 수정하는 것은 자동차 시동을 걸기 위한 올바른 키를 찾는 것과 관련이 있으며 "noCon충돌" 모드를 조정하지 않고 이 장애물을 피할 수 있는 두 가지 간단한 전략이 있습니다.

1. '$' 대신 'jQuery'를 선택하세요.

스크립트에서 '$' 기호를 우연히 발견하고 오류가 발생하는 경우 간단한 해결 방법 중 하나는 코드에서 '$'의 모든 인스턴스를 "jQuery"로 바꾸는 것입니다. 약간의 맥락을 위해 '$'를 사용하여 표준 jQuery 스니펫이 표시되는 방식은 다음과 같습니다.

 $(함수() {
  // DOM이 완전히 로드되면 코드가 실행되기를 간절히 기다립니다.
});

오류를 정면으로 직면할 때 간단하면서도 효과적인 해결책은 '$'를 'jQuery'로 바꾸는 것입니다. 따라서 수정된 스니펫은 다음과 같습니다.

 jQuery(함수() {
  // 유레카! 코드는 오류 없이 원활하게 실행됩니다.
});

보다 미묘한 접근 방식을 선호하는 사람들의 경우 '$' 기호를 넘겨주는 즉시 호출되는 함수 표현식(IIFE)으로 코드를 감싸는 것이 게임 체인저가 될 수 있습니다. 이 기술을 사용하면 두려운 오류를 발생시키지 않고 함수 내에서 '$'를 안전하게 사용할 수 있습니다.

 jQuery(함수($) {
    // 이 마법의 포장지 안에서 "$"는 여러분이 명령할 수 있는 모든 것입니다.
    console.log($('.primary-menu'));
});

이러한 조정을 구현한 후 브라우저의 개발자 도구를 사용하거나 WordPress 디버그 로그를 살펴보고 "Uncaught TypeError: $는 함수가 아닙니다" 오류가 사라졌는지 확인하세요. 오류가 계속되면 "jQuery"를 다른 별칭으로 다시 매핑하여 더 복잡한 문제를 피하는 것이 좋습니다.

2. jQuery에 대한 사용자 정의 별칭 만들기

'$'는 jQuery의 기본 약어 역할을 하기 때문에 WordPress의 "noConstrict" 모드에는 라이브러리 충돌을 회피하기 위한 대체 별칭이 필요할 수 있습니다. 이 접근 방식은 놀라울 정도로 간단하여 단 한 줄의 코드만으로 새 기호를 할당할 수 있습니다.

 var $j = jQuery;

이 코드 조각은 jQuery의 새 별칭으로 "$j"를 효과적으로 할당하지만 마음에 드는 기호는 자유롭게 선택할 수 있습니다. 이 방법은 "jQuery"를 반복적으로 입력하는 것이 약간 번거롭다고 생각하는 개발자에게 특히 매력적입니다.

새로운 별칭을 설정한 후에도 "jQuery"를 사용하는 옵션이 테이블에 남아 있다는 점은 주목할 가치가 있습니다.

마무리

이 두 가지 방법 중 하나를 사용하면 "잡히지 않은 TypeError: $는 함수가 아닙니다." 오류를 우아하게 회피하고 WordPress 내에서 jQuery 스크립트가 원활하게 실행되도록 할 수 있습니다.

'$'를 "jQuery"로 직접 대체하거나 사용자 정의 별칭을 만들거나 두 경로 모두 WordPress의 "noCon충돌" 모드에서 다른 스크립트와 jQuery의 조화로운 공존으로 이어집니다. 원활한 웹사이트 운영의 핵심은 기본 프레임워크를 이해하고 이에 적응하는 데 있다는 것을 기억하세요.