jQuery가 정의되지 않음” 오류 해결

"jQuery가 정의되지 않았습니다." 오류는 웹 개발에서 흔히 발생하는 장애물이며, 특히 널리 사용되는 JavaScript 라이브러리인 jQuery를 웹 페이지에 통합하는 데 익숙하지 않은 사용자의 경우 더욱 그렇습니다. 이 오류 메시지는 라이브러리가 로드되기 전에 JavaScript 코드가 jQuery 구문이나 함수를 활용하려고 시도하거나 전혀 로드되지 않은 경우 브라우저 콘솔에 나타납니다. 본질적으로 이는 브라우저가 "jQuery가 무엇인지 모릅니다"라고 말하는 방식으로, 이로 인해 jQuery 관련 스크립트 실행이 즉시 중단됩니다.

오류의 변형

"jQuery가 정의되지 않았습니다" 오류는 브라우저, 환경(예: 개발 환경과 프로덕션 서버) 또는 스크립트가 웹 페이지에 포함되는 방식에 따라 다양한 방식으로 나타날 수 있습니다. 이 오류 메시지의 일반적인 변형은 다음과 같습니다.

• jQuery가 정의되지 않았습니다.
• $가 정의되지 않았습니다
• 잡히지 않은 ReferenceError: $가 정의되지 않았습니다.
• 잡히지 않은 ReferenceError: jQuery가 정의되지 않았습니다.
• ReferenceError: jQuery가 정의되지 않았습니다.
• ReferenceError: $가 정의되지 않았습니다.
• 유형 오류: $(…). 함수가 아니다
• 유형 오류: jQuery(…). 함수가 아니다

WordPress에서 "jQuery가 정의되지 않았습니다" 이해

WordPress 생태계에서 jQuery는 상호 작용을 추가하고 사용자 경험을 향상시키기 위해 테마와 플러그인에서 광범위하게 사용됩니다. 아마도 당신이 사용하고 있는 플러그인은 슬라이더, 팝업, 양식 유효성 검사 등의 기능을 위해 jQuery를 활용하도록 설계되었을 것입니다. 브라우저에서 "jQuery가 정의되지 않았습니다"라고 보고하는 경우 이는 본질적으로 jQuery 자체가 로드되기 전에 또는 전혀 로드되지 않은 상태에서 사이트의 JavaScript가 jQuery 함수를 호출하려고 시도하고 있음을 의미합니다.

WordPress에서 이 오류의 일반적인 원인

다음을 포함하여 WordPress와 관련된 여러 가지 시나리오에서 이 오류가 발생할 수 있습니다.

테마 및 플러그인 : jQuery를 부적절하게 대기열에 추가하거나 오래된 버전에 의존하는 테마 또는 플러그인으로 인해 이 문제가 발생할 수 있습니다.

수동 편집 : 특히 jQuery가 수동으로 등록 취소되거나 대기열에 추가된 경우 테마 파일을 사용자 정의 편집하면 이 오류가 발생할 수 있습니다.

충돌 : 때로는 자체 jQuery 버전을 로드하려고 시도하는 여러 플러그인을 설치하면 충돌이 발생하고 그에 따라 오류가 발생할 수 있습니다.

이 오류의 일반적인 원인

잘못된 스크립트 순서 : 가장 일반적인 원인은 HTML 페이지가 로드되기 전에 jQuery를 사용하려고 하는 것입니다.jQuery를 사용하는 스크립트는 jQuery 라이브러리의<script> 태그 뒤에 배치되어야 합니다.

jQuery 포함 실패 : 웹페이지에 jQuery를 포함하는 것을 잊어버리면 이 오류가 발생할 수 있습니다.jQuery 라이브러리를 올바르게 소스하는<script> 태그가 있는지 확인하세요 .

충돌하는 라이브러리 : 때로는 다른 JavaScript 라이브러리 또는 스크립트가 jQuery와 충돌할 수 있습니다. 특히 $기호도 사용하는 경우 더욱 그렇습니다 . 이로 인해 실수로 jQuery가 덮어쓰여지거나 제대로 초기화되지 않을 수 있습니다.

캐싱 문제 : 어떤 경우에는 브라우저가 jQuery가 포함되지 않은 이전 버전의 웹페이지를 캐시할 수 있거나 jQuery 경로가 올바르지 않아 라이브러리 로드에 실패할 수 있습니다.

CDN(콘텐츠 전송 네트워크) 문제 : CDN에서 jQuery를 로드하는 경우 CDN이 다운되었거나 연결할 수 없으면 사이트에서 라이브러리를 로드할 수 없어 이 오류가 발생합니다.

jQuery가 정의되지 않음 오류를 수정하는 방법

변경하기 전에 전체 웹사이트를 백업하는 것이 필수적입니다. 준비 또는 개발 환경에 액세스할 수 있는 경우 해당 환경을 사용하여 오류를 수정하고 라이브 사이트의 직접 편집으로 인한 잠재적인 중단을 우회할 수 있습니다.

이러한 보호 조치를 취하면 "jQuery가 정의되지 않았습니다" 오류를 해결할 준비가 된 것입니다.

스크립트 소스를 테스트하여 jQuery가 로드되었는지 확인하세요.

이 문제의 일반적인 원인 중 하나는 jQuery가 포함될 수 있지만 잘못된 URL, 네트워크 문제 또는 파일 액세스 권한과 같은 다양한 이유로 인해 제대로 로드되지 않는다는 것입니다. jQuery가 올바르게 로드되었는지 확인하기 위한 간단하면서도 효과적인 접근 방식은 브라우저에서 직접 스크립트 소스를 테스트하는 것입니다.

jQuery 스크립트 소스를 테스트하는 단계

1. 먼저 HTML 코드에 jQuery가 포함된 스크립트 태그를 찾아야 합니다. 이 태그는 jQuery가 로드될 소스를 지정하기 때문에 중요합니다. 코드에서 다음과 같은 줄을 찾으세요.

 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

2. 이 src 속성에는 로드하려는 jQuery 라이브러리의 URL이 포함되어 있습니다.
3. 스크립트 태그의 src 속성 에서 URL을 추출합니다 .이는 사이트에 포함할 jQuery 파일에 대한 직접 링크입니다. 시작 부분의http:// 또는 https://부분을 포함하여 전체 URL을 정확하게 복사했는지 확인하세요 .
4. 웹 브라우저에서 새 탭이나 창을 열고 복사한 URL을 주소 표시줄에 붙여넣습니다. 이 URL로 이동하려면 Enter를 누르세요.

jQuery 파일이 올바르게 로드되면 jQuery 라이브러리의 전체 내용이 브라우저에 일반 텍스트로 표시됩니다. 이는 jQuery 스크립트 소스에 액세스할 수 있고 예상대로 작동함을 나타냅니다.

jQuery 로딩을 확인하는 대체 방법

페이지 소스를 통해 jQuery 로딩을 확인하는 방법

1. 선호하는 웹 브라우저를 사용하여 검사하려는 웹페이지로 이동합니다.
2. 웹 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서페이지 소스 보기를 선택합니다.이 옵션은 브라우저마다 약간 다를 수 있습니다.
3. 소스 코드가 열려 있으면 이제 jQuery 스크립트 포함을 찾아야 합니다. 이는 브라우저에 내장된 검색 기능을 사용하여 쉽게 수행할 수 있습니다.
4. Windows에서는Ctrl+F를 , Mac에서는 Command+F를눌러 검색창을 엽니다.
5. 검색 필드에jquery를 입력 하고 Enter를 누르세요.이 작업을 수행하면 소스 코드에서 jquery가 모두 강조 표시됩니다.
6. 강조 표시된 결과에서 jQuery 라이브러리에 연결되는 스크립트 태그와 유사한 줄을 찾으세요.

다음과 같이 보일 수 있습니다.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

또는 로컬로 호스팅되는 jQuery의 경우 다음과 같습니다.

 <script src="/path/to/jquery.min.js"></script>

그러한 줄을 찾으면 jQuery가 페이지에 포함됩니다. 그렇지 않으면 jQuery가 로드되지 않아 현재 발생한 문제가 발생할 수 있습니다.

개발자 도구를 사용하여 jQuery 로딩 확인

1. 웹사이트에 접속하고 브라우저에서 개발자 도구를 엽니다. 일반적으로 페이지를 마우스 오른쪽 버튼으로 클릭하고검사를 선택하거나 F12또는Ctrl+Shift+I(Windows) /Cmd+Option+I(Mac) 를 눌러 이 작업을 수행할 수 있습니다 .
2. 개발자 도구 내에서네트워크 탭을 찾아서 클릭하세요.이 탭에는 웹사이트가 로드될 때 웹사이트에서 생성된 모든 네트워크 요청이 표시됩니다.
3. 캐시 비활성화 옵션을 선택 하고 네트워크 탭이 열린 상태에서 웹 사이트를 다시 로드하여 모든 로드 활동을 캡처합니다.
4. 필터 옵션을 사용하여 결과를 JavaScript 파일로 좁힙니다. 일반적으로 JS 필터를 선택하거나 필터/검색 상자에 jquery를입력하여 이 작업을 수행할 수 있습니다.
5. 로드 중인 스크립트 목록을 스크롤하거나 네트워크 탭 내의 검색 기능을 사용하여 jQuery와 관련된 항목을 찾으세요. 이름에jquery가 포함된 파일을 찾고 있는데 , 이는 jQuery 라이브러리가 로드되고 있음을 나타냅니다.

WordPress에 jQuery가 올바르게 포함되어 있는지 확인하세요.

jQuery가 로드되지 않거나 존재에도 불구하고 문제가 발생하는 경우 WordPress 테마 또는 플러그인에 jQuery가 올바르게 포함되어 있는지 확인해야 할 수 있습니다. WordPress는 wp_enqueue_script 함수를 통해 스크립트를 관리하는 강력한 방법을 제공합니다 .이 방법은 스크립트 종속성을 효율적으로 처리하고 충돌을 방지하는 데 도움이 되므로 선호됩니다.

WordPress에서 jQuery를 대기열에 추가

1. FTP 클라이언트 또는 호스팅 서비스에서 제공하는 파일 관리자를 사용하여 WordPress 사이트에 연결하세요.
2. 테마 폴더 로 이동하여 function.php파일을 찾으세요 . 테마가 업데이트될 때 사용자 정의 내용이 손실되지 않도록 하위 테마를 만들고 변경하는 것이 좋습니다.
3. jQuery가 누락된 경우function.php 파일 에 다음 코드 조각을 추가하여 대기열에 추가할 수 있습니다 .

 함수 my_theme_enqueue_scripts() {

 wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

이렇게 하면 WordPress에 사이트의 모든 페이지에 jQuery가 포함됩니다.

jQuery에 의존하는 사용자 정의 스크립트를 추가하는 경우 다음과 같이 jQuery를 종속성으로 나열해야 합니다.

 wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true );

Google에서 호스팅하는 jQuery를 사용하여 로컬 대체 구현

웹사이트에 Google에서 호스팅하는 jQuery 버전을 포함시키는 것은 이 인기 있는 JavaScript 라이브러리를 빠르고 안정적으로 제공하기 위해 Google의 CDN을 활용하는 일반적인 관행입니다. 그러나 잠재적인 CDN 중단이나 네트워크 문제에 대비하여 웹 사이트를 강력하게 유지하려면 로컬 폴백을 구현하는 것이 중요합니다. 이 설정을 사용하면 어떤 이유로든 Google에서 호스팅하는 버전이 로드되지 않는 경우 사이트에서 로컬로 호스팅되는 jQuery 버전을 자동으로 사용할 수 있습니다. 이 방법은 중복성을 보장하면서 성능을 최적화하여 웹 개발 모범 사례를 준수합니다. 다음은 이 전략을 효과적으로 구현하기 위한 단계별 가이드입니다.

Google에서 호스팅하는 jQuery 포함

먼저 Google에서 호스팅하는 jQuery 스크립트 태그를 웹사이트에 추가해야 합니다. HTML 문서의 <head> 섹션 내 또는 닫는 </body>태그 바로 앞에 이 태그를 배치하여 jQuery에 의존하는 다른 스크립트가 이 태그를 사용할 수 있도록 하세요. 예를 들어:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

로컬 대체 스크립트 추가

Google에서 호스팅하는 jQuery의 스크립트 태그 바로 뒤에 작은 JavaScript 조각을 추가하게 됩니다. 이 스크립트는 jQuery가 Google CDN에서 성공적으로 로드되었는지 확인합니다. 그렇지 않은 경우 HTML 문서에 새 스크립트 태그를 동적으로 작성하여 로컬 소스에서 jQuery를 로드합니다.

 <스크립트>

 window.jQuery || document.write('<script src="/path/to/local/jquery-3.5.1.min.js"><\/script>');

</script>

"/path/to/local/jquery-3.5.1.min.js"를 서버에서 호스팅되는 jQuery 파일의 올바른 경로로 바꾸십시오 .

코드 이해

window.jQuery : 스크립트의 이 부분은 jQuery 객체가 전역적으로 사용 가능한지 확인합니다. 이는 jQuery가 성공적으로 로드되었음을 나타냅니다.

document.write : 이 메소드는 문서에 HTML을 삽입하는 데 사용됩니다.여기서는 CDN 버전이 로드되지 않은 경우 로컬 jQuery 파일에 대한 스크립트 태그를 추가하는 데 사용됩니다. 이스케이프 시퀀스<\/script> 는 문자열이 스크립트 블록의 끝으로 해석되는 것을 방지하는 데 사용됩니다.

대체 메커니즘 이해

폴백 메커니즘은 간단한 확인( window.jQuery) 으로 작동합니다 .jQuery 개체가 정의되지 않은 경우 CDN 버전이 제대로 로드되지 않았음을 의미합니다. 그런 다음 document.write 메서드를 사용하여 로컬 파일에서 jQuery를 로드하는 새로운 <script>태그를 삽입합니다.

이익

• CDN이 실패하더라도 jQuery를 항상 사용할 수 있도록 보장합니다.
• jQuery를 로컬로 로드하면 특정 시나리오, 특히 CDN 버전의 응답 속도가 느리거나 사용자 네트워크에서 CDN에 연결하는 데 문제가 있는 경우 대기 시간을 줄일 수 있습니다.
• 로컬 복사본이 있으면 사용 중인 jQuery 버전을 제어할 수 있으므로 일관된 테스트와 디버깅이 가능합니다.

wp-config.php 파일에 스니펫 추가

WordPress에서 "jQuery가 정의되지 않았습니다" 오류 또는 유사한 JavaScript 문제를 해결하기 위해 다양한 방법을 시도했지만 성공하지 못한 경우 스크립트 연결을 비활성화하는 것이 유용한 문제 해결 단계가 될 수 있습니다. 스크립트 연결은 로드 시간을 개선하기 위해 여러 JavaScript 파일을 단일 요청으로 결합하는 WordPress 기능입니다. 그러나 이로 인해 오류가 발생하거나 스크립트 로드 문제가 발생할 수 있으며, 특히 충돌이 있거나 특정 스크립트가 올바르게 로드되지 않는 경우 더욱 그렇습니다.

wp-config.php 파일 편집

FTP 클라이언트나 웹 호스팅 제어판에서 제공하는 파일 관리자를 사용하여 WordPress 사이트의 파일에 액세스하세요.

텍스트 편집기에서 wp-config.php 파일을 엽니다 .FTP 클라이언트를 사용하는 경우 먼저 파일을 다운로드하고 컴퓨터의 텍스트 편집기로 연 다음 편집 후 다시 업로드해야 합니다. 웹 호스팅 제어판에서 파일 관리자를 사용하는 경우 일반적으로 브라우저에서 직접 파일을 편집할 수 있습니다.

/* That's all, stop edit!이라는 줄 바로 앞의 파일 맨 아래로 스크롤합니다.행복한 블로깅하세요.*/ .여기에 다음 코드 조각을 붙여넣으세요.

 /** WordPress 디렉토리의 절대 경로입니다. */

 if ( ! 정의('ABSPATH') )

 정의('ABSPATH', dirname(__FILE__) . '/');

 정의('CONCATENATE_SCRIPTS', false);

스니펫을 추가한 후 변경 사항을 저장합니다. 컴퓨터에서 로컬로 파일을 편집하는 경우 기존wp-config.php 를 대체하여 서버에 다시 업로드해야 합니다 .

스니펫 이해하기

ABSPATH 정의 : 이 줄은 WordPress 디렉터리에 대한 절대 경로가 올바르게 정의되었는지 확인합니다. 이는 WordPress가 올바르게 작동하기 위한 기본 요구 사항입니다.

연결 비활성화 : `define('CONCATENATE_SCRIPTS', false);` 줄은 WordPress에 스크립트를 연결하지 말라고 명시적으로 지시합니다.이렇게 하면 각 스크립트를 개별적으로 로드하여 스크립트 문제를 디버깅하는 데 도움이 되며 문제를 일으킬 수 있는 스크립트를 더 쉽게 식별할 수 있습니다.

jQuery 라이브러리를 수동으로 추가

WordPress 테마의header.php 파일에 직접 jQuery 라이브러리를 수동으로 포함하는 것은 간단한 접근 방식이며, 특히 jQuery 관련 문제를 해결하는 다른 방법이 성공하지 못한 경우에는 더욱 그렇습니다.이 방법을 사용하면 페이지 렌더링 프로세스 초기에 jQuery가 로드되어 "jQuery가 정의되지 않았습니다" 오류가 발생할 위험이 줄어듭니다.

jQuery 라이브러리를 수동으로 포함하는 방법

1. 최신 버전의 jQuery에 액세스하려면 Google 호스팅 라이브러리 페이지 로 이동하세요 .
2. 페이지에 나열된 최신 버전의 jQuery를 찾아 제공된 스크립트 태그를 복사하세요. 티
3. FTP 클라이언트나 호스팅 서비스에서 제공하는 파일 관리자를 사용하여 WordPress 사이트의 파일에 액세스하세요.
4. WordPress 디렉터리 내에서wp-content/themes/your-theme-folder/ 로 이동하여 header.php파일을 찾으세요 .your-theme-folder를 테마의 실제 이름으로 바꾸십시오 .
5. 텍스트 편집기에서 header.php 파일을 엽니다 .웹 호스팅 제어판을 통해 파일 관리자를 사용하는 경우 브라우저에서 직접 파일을 편집할 수 있습니다.



6. Google 호스팅 라이브러리에서 복사한 jQuery 스크립트 태그를header.php 파일의 여는 <head>태그 바로 뒤에 붙여넣습니다 . 헤드 섹션 상단 근처에 배치하면 jQuery가 일찍 로드되고 이에 의존하는 모든 스크립트에서 사용할 수 있습니다.

예를 들어,

 <머리>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <!-- 아래의 다른 헤드 콘텐츠 -->

7. 스크립트 태그를 추가한 후header.php 파일을 저장합니다.컴퓨터에서 로컬로 파일을 편집한 경우 파일을 서버에 다시 업로드하여 파일의 이전 버전을 바꾸는 것을 잊지 마십시오.

중요한 고려사항

하위 테마 : 테마를 직접 변경하는 경우 하위 테마를 사용하는 것이 가장 좋습니다.이렇게 하면 상위 테마가 업데이트될 때 변경 사항을 덮어쓰는 것을 방지할 수 있습니다.

사이트 테스트 : jQuery를 수동으로 추가한 후 사이트를 철저하게 테스트하여 스크립트가 예상대로 실행되고 호환성 문제가 없는지 확인하세요.

마무리 생각

우리 블로그에서는 "jQuery가 정의되지 않았습니다" 오류를 해결하기 위해 다양한 솔루션을 탐색하면서 jQuery가 웹 사이트에 올바르게 로드되고 구현되도록 하는 것이 중요하다는 점을 강조했습니다. 우리는 페이지 소스 검사와 브라우저의 네트워크 탭을 통해 jQuery의 존재 여부를 확인하는 방법을 다루었고, 로컬 폴백으로 보완된 Google 호스팅 jQuery로 사이트 안정성을 높이는 방법에 대해 논의했습니다. 또한 wp-config.php 파일에서 스크립트 연결을 비활성화하고 테마의 header.php파일 에 jQuery를 수동으로 추가하는 등 고급 WordPress 문제 해결 기술을 살펴보았습니다 . 전체적으로 웹사이트 기능과 사용자 경험을 유지하기 위해 안전한 수정을 위해 스테이징 환경과 하위 테마를 사용하는 등 신중한 편집 관행이 강조되었습니다.