반응형
1. 오류
저는 swiper-bundle.min.js 를 호출했더니 발생한 오류입니다.
2. 원인
문제의 원인을 이해하기 위해서는 sourceMap이 무엇인지 부터 알아야 합니다.
우선 JS와 CSS는 특정 도구(webpack)들을 이용해 번들링 되어 난독화&압축됩니다.
우리가 가끔 jquery 구문의 오류가 발생할 경우 어디서 발생한 오류인지 찾기 어려울 때가 있습니다.
브라우저의 디버깅 툴은 난독화된 코드에서 에러를 가리키기 때문에 어디서 발생한 오류인지 찾기 어렵습니다.
sourceMap은 원본코드를 어떠한 알고리즘으로 인코딩하여 키워드로 매핑시켜놓은 것을 뜻합니다.
브라우저에서는 이렇게 인코딩된 것을 디코딩하여 복원시킬 수 있습니다.
그리고 이러한 sourceMap 파일을 연결하는 것이 sourceMapURL이고//# sourceMappingURL=url 형식으로 사용하고 있습니다.
만약 CDN으로 호출했다면 문제가 발생하지 않았겠지만 로컬 서버에서 호출했기 때문에 발생한 오류입니다.
3. 해결
로컬 서버에서 호출하려면 map 파일도 함께 가지고 있어야 합니다.
저는 map파일 추가는 안하고 다음 방법으로 해결했습니다.sourceMapURL
sourceMap을 매핑하기 위해 sourceMappingURL부분이 있습니다.
//# sourceMappingURL=swiper-bundle.min.js.map//# 이게 주석처럼 보이지만 사실은 SourceMap을 연결하기 위한 규칙입니다.
그럼 여기에 주석을 더하면?
////# sourceMappingURL=swiper-bundle.min.js.map쨔쟌 해결이 됩니다~
4. 참고자료
반응형
'Programming > JavaScript' 카테고리의 다른 글
| 예제로 정리한 정규식 패턴 (0) | 2022.08.09 |
|---|---|
| 정규 표현식/정규식(RegExp) 플래그(Flag) 자세하게 알아보자! (0) | 2022.08.02 |
| Babel 을 사용해 오류 없는 javascript 코드를 만들자! (0) | 2022.06.10 |
| JavaScript: split 공백값 제거하는 여러가지 방법 (0) | 2022.03.10 |
| JavaScript 문자열 중복 제거하기 (0) | 2022.02.07 |