SourceMap¶
SourceMap이 필요한 이유는 무엇인가요?¶
과거에는 HTML, CSS, JavaScript만을 사용하여 웹 애플리케이션을 구축하고 동일한 파일을 네트워크에 배포했습니다.
현재는 더 복잡한 웹 애플리케이션을 구축함에 따라 개발 워크플로우에 다양한 도구가 사용될 수 있습니다. 예를 들어:
-
JavaScript 프레임워크: Angular, React, Vue, Svelte
-
고급 프로그래밍 언어: TypeScript, Dart, CoffeeScript
-
...
이러한 도구들은 코드를 브라우저가 이해할 수 있는 표준 HTML, JavaScript 및 CSS로 변환하는 빌드 프로세스가 필요합니다. 또한 성능 최적화를 위해 파일을 압축(예: Terser를 사용하여 JavaScript 축소 및 난독화)하고 병합하여 크기를 줄이고 웹 페이지 효율성을 높이는 것이 일반적인 관행입니다.
예를 들어, 빌드 도구를 사용하여 다음 TypeScript 파일을 한 줄의 JavaScript로 변환하고 압축할 수 있습니다.
/* TypeScript 데모: example.ts */
document.querySelector('button')?.addEventListener('click', () => {
const num: number = Math.floor(Math.random() * 101);
const greet: string = 'Hello';
(document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you
console.log(num);
});
/* TypeScript 데모의 압축된 JavaScript 버전: example.min.js */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor
SourceMap 생성 방법¶
소스 맵은 이름이 .map로 끝나는 파일입니다(예: example.min.js.map 및 styles.css.map). 대부분의 빌드 도구는 Vite, webpack, Rollup, Parcel, esbuild 등과 같이 소스 맵을 생성할 수 있습니다. 일부 도구는 기본적으로 소스 맵을 포함하는 반면, 다른 도구는 생성을 위해 추가 구성이 필요할 수 있습니다.
/* 구성 예시: vite.config.js */
/* https://vitejs.dev/config/ */
export default defineConfig({
build: {
sourcemap: true, // 프로덕션 소스 맵 활성화
},
css: {
devSourcemap: true // 개발 중 CSS 소스 맵 활성화
}
})
SourceMap 이해하기¶
이러한 소스 맵 파일은 컴파일된 코드가 원본 코드에 어떻게 매핑되는지에 대한 중요한 정보를 포함하고 있어 개발자가 쉽게 디버깅할 수 있도록 합니다. 다음은 소스 맵의 예시입니다:
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
소스 맵의 가장 중요한 요소는 mappings 필드입니다. 이 필드는 VLQ base 64 인코딩 문자열을 사용하여 컴파일된 파일의 줄과 위치를 해당 원본 파일에 매핑합니다. source-map-visualization 및 소스 맵 시각화 도구와 같은 소스 맵 시각화 도구를 사용하여 이 매핑을 시각적으로 확인하고 파일 가용성을 검증할 수 있습니다.
예시: 시각화 도구 source-map-visualization이 생성한 코드 예시의 시각화 차트입니다.
왼쪽의 Generated 열은 압축된 내용을 표시하고, Original 열은 원본 소스를 표시합니다.
시각화 도구는 Original 열의 각 줄과 Generated 열의 해당 코드에 색상을 지정합니다. mappings 부분은 디코딩된 코드 매핑을 보여줍니다. 예를 들어, 항목 65-> 2:2는 다음을 의미합니다:
-
생성된 코드: 압축된 콘텐츠의 위치 65에서 단어 const가 시작됩니다.
-
원본 코드: 원본 콘텐츠의 2행 2열에서 단어 const가 시작됩니다.
이를 통해 개발자는 축소된 코드와 원본 코드 간의 관계를 신속하게 파악하여 디버깅 프로세스를 더욱 원활하게 만들 수 있습니다.
브라우저 개발자 도구는 이러한 소스 맵을 적용하여 브라우저에서 직접 디버깅 문제를 더 빠르게 파악할 수 있도록 도와줍니다.