소스맵이란?

소스맵이란 무엇일까?
소스맵에 대한 블로그 글을 개념 숙지 겸 간단히 정리해 보았다.

 

소스 맵이란?

- 코드의 원본 소스와 변환된 소스 사이의 맵핑 정보가 선언된 파일이다.

- *.map 확장자이며, JSON 형태로 되어 있다.

- 이 파일을 웹 서버에 제공하면 브라우저는 소스맵을 적용해 변환된 코드를 디버깅할 수 있다.

- 일반적으로 Vite, Webpack 등의 번들러에서 소스맵 생성 옵션을 제공한다.

- 파일 내용 중 'mappings'라는 키값이 원본소스와 변형된 소스 간 관계를 나타내고, 아래처럼 VLQ Base64 형태로 인코딩된 문자열이다.

AAAA,SAAS,cAAc,WAAW,iBAAiB,SAAS;IAC1D,...

 

 

소스맵이 필요한 이유는?

웹 브라우저에서 소스맵이 없으면 디버깅하기가 어렵다.

왜일까?

 

우리는 번들러로 파일을 압축시켜 브라우저에 전달한다.

코드 양을 줄여 브라우저가 파일을 다운로드하고 해석하는 데 시간을 줄이기 위해서이다.

 

여러 최적화 기법이 적용되어 한줄 형태로 짧게 압축되고, 변수명이 짧게 변경된다던지 변수 대신 값이 직접 삽입되는 등의 변화가 일어난다.

 

그런데 변수명 변경 등의 변화가 일어나고, 또 scss나 typescript 같은 파일들은 **브라우저가 읽을 수 있는 css나 js로 변형되기 때문에 변형된 소스코드에서 에러가 일어난 부분이 원본 소스 코드 중 정확히 어떤 부분인지 유추하기 어렵다.

따라서 브라우저에게 소스맵을 제공해 원본 소스 코드와 변환된 소스 코드의 관계를 정확하게 알게 하고, 디버깅 시 어떤 코드 라인에서 에러가 발생하는지 알려줄 수 있도록 한다.

 

**브라우저는 html, css, js 언어를 읽을 수 있다.

**js 는 html에 종속되어 있는 언어이고, html 정적 언어를 조작 및 변경하기 위해 사용한다.

html을 js가 조작하고 > js는 브라우저가 해석한다. 브라우저에는 js 해석 엔진이 있다.

 

 

 

소스맵을 사용하고 싶지 않을 때는?

간혹 잘못된 소스맵이 적용되어서 디버깅에 방해가 될 때도 있다.

이럴 때는 브라우저 환경 설정에서 ‘자바스크립트 소스 맵 사용 설정’, ‘CSS 소스 맵 사용 설정’ 을 해제하면 원본 코드를 직접 디버깅할 수 있다.

 

 

프로덕션 환경에서 소스맵

소스맵은 디버깅할 때는 매우 유용하지만, 소스맵 파일을 생성하고 관리하면 빌드 시간을 늘리고, 빌드 결과물의 크기를 늘린다.

또 노출되면 악의적인 사용자가 원본 코드를 쉽게 열람하게 되어 보안상 취약해 진다.

 

따라서 개발 환경에서만 사용하고, 프로덕션 환경에서는 소스맵을 생성하지 않도록 해야 한다.

대부분의 번들러는 이러한 기능을 이미 제공하고 있다.

 

 

 

 

 

** 참고 사이트

https://yozm.wishket.com/magazine/detail/2082/

소스 맵의 동작 원리는 무엇일까? | 요즘IT