[jQuery] Cannot read property ‘step’ of undefined 해결

jQuery UI를 사용하여 인터페이스를 만들려고 하는 경우 소스 파일을 직접 다운로드하거나 다음과 같이 CDN 링크를 사용하여 스크립트를 불러오게 됩니다.

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

이후 문제 없이 로드되었는지 확인해보기 위해 해당 페이지에 접근했을 때 개발자 콘솔에서 다음과 같은 에러가 발생하는 경우가 있습니다.

jquery-ui-1.12.1.js:1951 Uncaught TypeError: Cannot read property 'step' of undefined
    at String.<anonymous> (jquery-ui-1.12.1.js:1951)
    at each (jquery-3.1.1.slim.js:368)
    at Function.color.hook (jquery-ui-1.12.1.js:1913)
    at jquery-ui-1.12.1.js:1963
    at jquery-ui-1.12.1.js:2005
    at jquery-ui-1.12.1.js:14
    at jquery-ui-1.12.1.js:16

Cannot read property ‘step’ of undefined 에러

이 문제는 무엇이며 어떻게 해결해야 할까요?

우선 jQuery UI는 기본적으로 jQuery 라이브러리가 필요합니다. jQuery 스크립트 파일은 다음 형식으로 소스파일과 CDN 형태로 배포되고 있습니다.

• uncompressed : 압축되지 않은 원본 스크립트
• minified : 압축된 스크립트
• slim : 압축되지 않은 축소화된 버전
• slim minified : 압축된 축소화된 버전

여기서 주목할 점은 slim 버전인데요. 일반 버전과 달리 slim은 자주 사용되지 않는 함수를 제거하고 웹페이지 로드 속도를 증가시키기 위해 여러 방법으로 용량을 감축시킨 버전입니다. 따라서 jQuery의 다른 식구들과 병행해서 사용할 경우에 제거된 함수를 jQuery에서 찾지 못해 에러가 발생하는 것으로 보입니다.

이러한 문제를 해결하려면 결과적으로 jQuery가 jQuery UI보다 “먼저” 로드되었는지, jQuery 라이브러리가 slim 버전을 사용하지는 않는지 확인해 볼 필요가 있습니다.

일반적으로 slim을 사용하고 있다면 다음과 같은 파일을 사용할 것입니다.

<script src="/{스크립트파일경로}/jquery-3.2.1.slim.js"></script>

만약 CDN 링크라면 이렇게 되어있을 것입니다.

<script src="https://code.jquery.com/jquery-3.4.1.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>

포인트는 jquery-3.2.1.slim.js 또는 jquery-3.2.1.slim.min.js와 같이 파일명에 slim이 있는지 확인해봅니다. 여기서 jQuery 버전은 각자 다르실 수 있습니다.

이제 전체 기능이 제공되는 일반 jQuery로 변경해보겠습니다. 파일을 직접 다운로드해서 사용중이라면 jquery-3.2.1.js 파일 또는 jquery-3.2.1.min.js 파일이 서버에 존재하는지 확인한 후에 해당 파일로 변경해줍니다. (파일이 위치하는 경로를 찾아서 지정해주셔야 합니다.)

<script src="/{스크립트파일경로}/jquery-3.2.1.js"></script>

CDN 링크를 통해 사용중이라면 다음 방법으로 스크립트를 불러와도 좋습니다. (min 버전일 경우도 마찬가지입니다.)

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

이제 다시 해당 페이지를 열어 문제가 해결되었는지 확인해봅니다.