Swiper <DevTools failed to load source map>

Swiper를 사용하기 위해 적용 후 테스트를 진행하다 Console을 들여다보았더니 아래와 같은 문구가 출력되었다.

무슨 warning이지...

 

✅sourcemap이란?

아주 간단하게 설명하자면 빌드 전, 후 파일을 맵핑 시켜서 빌드 이후 발생하는 오류를 어떤 파일, 위치에서

생긴 것인지를 알 수 있게 해주는 녀석이다.

 

즉, 원활한 디버깅을 위해서 필요하다는 것

 

 

✅문제 해결

해당 warning을 해결하기 위해서는 두가지 방법이 있다.

 

https://github.com/nolimits4web/swiper

GitHub - nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions

위 사이트에서 swiper.min.js.map 파일을 가져와 같은 경로에 넣어주는 것

 

아니면

swiper.min.js

위 코드에서 제일 아래에 있는 sourceMappingURL을 없애는 방법이다.

 

✅sourceMappingURL 주석 처리??

처음에 위 코드를 보았을 때 " //# " 이것을 보고 주석처리가 되어 있는 것이 아닌가?

주석 처리가 되어있는데 왜 console에 출력되는거지? 라고 생각을 했다.

 

하지만 해당 코드는 주석이 아니라 sourceMappingURL 뒤에 있는 해당 소스를

브라우저 디버거에서 표시할 수 있도록 하는 것이다.

//# sourceMappingURL=swiper.min.js.map -> // # sourceMappingURL=swiper.min.js.map

위와 같이 #을 띄워서 쓰면 주석으로 인지되어 console에 출력되지 않는다.

 

✅끝

세상에는 진짜 너무 많은 지식들이 있는 것 같다. 마음같아서는 전부 다 습득하고 싶지만

그럴 수 없으니 이렇게라도 하나씩 알아가보자