원본(Original) 소스 코드와 변환된(transpiled) 소스 코드 사이의 매핑 정보가 선언된 파일

• *.map 확장자를 가진 파일로, Vite, webpack, Rollup, Parcel, esbuild와 같은 번들러를 사용하게 되면 소스맵을 생성하는 옵션을 제공

  /* Vite에서의 소스 맵 활성화 예시: vite.config.js */
  /* <https://vitejs.dev/config/> */
  
  export default defineConfig({
    build: {
      sourcemap: true, // 프로덕션 환경에서 소스 맵을 활성화
    },
    css: {
      devSourcemap: true, // 개발 과정 중에서 CSS 소스 맵을 활성화
    },
  });
  

• 웹 개발에서 디버깅 시 사용

  • 웹 개발자가 변환된 코드를 디버깅할 때, 원본 소스의 몇 번째 라인, 몇 번째 글자의 코드를 참조해야 하는 지 알 수 있음

소스맵이 필요한 이유

예전의 웹페이지는 HTML과 CSS, JS로 구축되었음. 그러나 현대의 웹페이지는 매우 복잡한 구조로 발달

⇒ 더 빠르고, 안정적이며, 더 많은 개발 편의를 위해서는 다양한 도구를 써야 함

<aside> 📌 다양한 도구들

• 템플릿 언어 및 HTML 전처리기: Pug, Nunjucks, Markdown
• CSS 전처리기: SCSS, LESS, PostCSS
• JavaScript 프레임워크(라이브러리) : Angular, React, Vue, Svelte
• 고수준의 프로그래밍 언어 : TypeScript, Dart, CoffeeScript
• 번들러: Webpack, Rollup, Parcel
• 등등… </aside>

하지만, 브라우저는 여전히 HTML과 CSS, JS만 이해할 수 있기 때문에, 이러한 도구를 사용하게 되면 디버깅 과정에서 문제가 발생

그럼에도 불구하고, 현대의 브라우저는 개발자 도구에서 코드 라인의 위치를 정확하게 짚어주는데, 이것이 가능한 이유는 우리가 브라우저에게 원본 소스 코드와 변환된 소스 코드의 관계를 맺어주는 정보인 **소스 맵(Sourse map)**을 제공하기 때문

소스맵의 구조

// script.min.js.map
{
"version": 3,
"file": "script.min.js.map",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
}

• version : 소스 맵의 기반이 되는 버전 번호
• file : 변환된 코드의 파일명
• sources : 원본 소스 코드의 경로