🍅 소스 맵의 동작 원리는 무엇일까?

- 웹 개발에서 디버깅 시 사용되는 소스 맵이 어떤 원리로 동작하는지에 대해 알아봅니다. --- 프론트엔드 개발을 하다 보면 TypeScript나 SCSS처럼 브라우저에서 직접 동작하지 않는 파일들도 디버깅해야 하는 경우가 자주 있습니다. 그런데 생각해보면 이상한 일이죠. 브라우저는 HTML, CSS, JavaScript 만 읽을 수 있으니까요. 이것이 가능한 이유는, 우리가 브라우저에게 원본 소스 코드와 변환된 소스 코드의 관계를 맺어주는 정보인 소스 맵(Source map) 을 제공하기 때문입니다. 그렇다면 소스 맵은 어떤 방식으로 그러한 정보를 저장하고 있는 걸까요? 오늘은 여기에 대한 궁금증을 해결하기 위해, 웹 개발에서 디버깅을 훨씬 쉽게 만들어주는 필수적인 파일인 소스 맵에 대해 알아보았습니다. https://wormwlrm.github.io/2023/06/04/What-are-Source-Maps.html