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

안녕하세요, 구독자 님!
뉴스레터를 구독해신 분들께 매번 감사드립니다. 🙇‍♂️

프론트엔드 개발을 하다 보면 TypeScript나 SCSS처럼 브라우저에서 직접 동작하지 않는 파일들도 디버깅해야 하는 경우가 자주 있습니다. 그런데 생각해보면 이상한 일이죠. 브라우저는 HTML, CSS, JavaScript 만 읽을 수 있으니까요.

이것이 가능한 이유는, 우리가 브라우저에게 원본 소스 코드와 변환된 소스 코드의 관계를 맺어주는 정보인 소스 맵(Source map) 을 제공하기 때문입니다. 그렇다면 소스 맵은 어떤 방식으로 그러한 정보를 저장하고 있는 걸까요?

오늘은 여기에 대한 궁금증을 해결하기 위해, 웹 개발에서 디버깅을 훨씬 쉽게 만들어주는 필수적인 파일인 소스 맵에 대해 알아보았습니다.