소스맵 정리

내용 정리 배경 현재 사내에서 Svelte로 진행하고 있는 프로젝트가 있는데, dynamic route 에서의 작업 도중 params값에 .map.css text가 담기는 이슈를 확인하였다. 더군다나 브라우저 devtools를 켰을 때만 해당 이슈가 발생하였는데 확인해보니 vite 및 소스맵 관련 이슈였고, 이로 인해 새로 알게된 소스맵에 대해 간단하게 정리해보았다. 소스맵이란? 소스맵(source map)은 원본 소스 코드 파일과, 변환된 소스 코드 사이의 매핑 정보가 선언된 파일이다. 주로 JS나 CSS와 같은 파일들의 경우, 실제 프로덕트를 배포하기 위해 빌드 진행시 파일들이 압축된다. 이때 압축한 파일에서 에러가 났을때 압축한 파일들만 가지고는 디버깅이 어려워지므로, 원본 소스 코드를 찾을 수 있..