부트스트랩(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 스크립트를 가장 위쪽에 배치해서 시도해보시기 바랍니다.
리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…
JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…
NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…
언제부턴가 윈도우 11을 처음 설치할 때 마이크로소프트(Microsoft) 계정 로그인을 강제로 요구하게 되었습니다. 물론 마이크로소프트 계정이…
애플 에어팟 프로 2 (AirPods Pro 2) 케이스에는 스피커가 내장되어 있습니다. 그런데 간혹 아무 것도…