JooTC부트스트랩(Bootstrap)을 사용하려고 필요한 스크립트를 웹 페이지에 불러온 뒤에, 해당 페이지에 접속하면 다음과 같은 에러 메세지가 출력됩니다.
Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:55
at bootstrap.min.js:6
at bootstrap.min.js:6
이에 따라서 일부 기능이 제한되거나 실행되지 않습니다.
해결 방법
문제의 원인은 HTML 파일에서 스크립트 파일을 불러오는 순서가 잘못되었기 때문입니다. 웹 페이지가 로드 될 때는 코드상에서 윗줄을 먼저 처리하기 때문에 외부 스크립트를 불러올 때에도 위쪽에 입력 된 스크립트를 먼저 불러오게 됩니다.
그러나 먼저 불러들여진 스크립트에서 그 다음에 불러들이는 스크립트 파일의 일부를 참고하게 되면 잘못된 실행 결과로 인한 다양한 문제가 발생할 수 있습니다.
<head> 태그에 작성되어 있는 <script> 태그를 살펴보겠습니다.
<head>
...
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/popper.js"></script>
...
</head>
위와 같이 부트스트랩(bootstrap.min.js) 스크립트 파일이 먼저, 이후 JQuery(jquery-3.3.1.min.js)와 popper(popper.js/부트스트랩에서 필요한 스크립트) 순서로 작성 되어 있습니다.
문제는 부트스트랩과 JQuery에서 발생하게 됩니다. 부트스트랩 스크립트는 JQuery 스크립트가 먼저 로드되어 있어야만 정상적으로 실행됩니다.
따라서 다음과 같이 JQuery를 앞쪽에 배치함으로서 스크립트 로드 순서를 바꿔주어야 합니다.
<head>
...
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/popper.js"></script>
...
</head>
만약 부트스트랩이 아닌 다른 외부 스크립트 파일을 불러왔을 때도 위와 같은 에러가 발생했다면, 위와 같이 jquery 스크립트를 가장 위쪽에 배치해서 시도해보시기 바랍니다.
