jQuery와 엘리멘터
엘리멘터에서 사용할 수 있는 여러 위젯과 액션 및 필터 Hook들이 모두 jQuery 객체로 래핑되어 있기 때문에 jQuery는 엘리멘터에서 반드시 호출하는 객체입니다. 일반 사용자가 엘리멘터에서 jQuery를 사용하는 경우는 보통 템플릿 내부의 HTML Widget을 통해 사용자정의 코드를 작성할 때 입니다.
엘리멘터의 편집환경에서는 자바스크립트의 DOMContentLoaded와 window.onload 이벤트가 막혀있기 때문에 jQuery를 사용해야만 실시간으로 코드의 변경사항을 확인할 수 있습니다.
jQuery is not defined 오류가 발생하는 상황
어떤 경우에는 jQuery의 로드 시점과 사용자정의 스크립트의 실행 시점이 맞지 않아 jQuery is not defined 오류가 발생하는 경우가 있습니다. 본래 jQuery는 head 요소에서 로드되어야 하는데, 로그인 한 사용자에게만 head 요소에서 jQuery를 로드하고 그렇지 않은 경우는 body 요소에서 로드하기 때문에 발생하는 문제입니다.
이 문제는 여러 사용자에게 버그 수정 요청이 있은 후, 엘리멘터 버전 3.5에서 개선되었다고 공식 발표했지만 실제로는 다양한 조건에서 여전히 문제가 발생하고 있습니다.
문제가 발생하는 조건을 찾기 위해 엘리멘터와 pro 버전을 수없이 롤백하고, Hello Elementor와 자식 테마의 버전을 변경해 봤으며, 워드프레스 코어 버전도 변경해 보았지만 정확한 재현 조건을 찾지 못했습니다. jQuery의 로드 시점을 변경할 요소들은 각종 플러그인부터 호스팅의 강제 설정까지 수도없이 많습니다.
문제 해결
이 문제를 해결하기 위한 가장 간단한 방법은, 테마의 functions.php 파일 혹은 Code Snippets와 같은 플러그인을 통해 아래 코드를 추가하는 것입니다. 이 간단한 코드는 jQuery를 반드시 head 요소에서 로드합니다.
사이트 성능에 미치는 영향
jQuery가 head 요소에서 실행되는 것이 사이트의 성능이나 여러 온라인 테스트 도구의 지표 혹은 점수에 어떠한 악영향도 주지 않습니다. 실제로 해당 코드를 삽입한 후 구글 Lighthouse 등에서 확인해 보십시오.
추천하지 않는 방법
jQuery 객체의 여부를 확인하기 위해 코드 내부에서 setInterval 혹은 setTimeOut과 같은 함수를 사용해 객체 유뮤를 확인 후 코드를 실행하는 방법은 추천하지 않습니다. 편집환경에서는 HTML Widget에서 단 한 글자만 변경되어도 코드가 다시 실행됩니다. 이는 setInterval과 같은 루프형 함수를 사용할 때 급격한 메모리 증가를 야기할 수 있습니다.