SourceMap이란 무엇일까?(with webPack devtool)

StarSeeker·2021년 9월 13일

DevTool chrome-dev-tool sourcemap webpack

SourceMap은 왜 필요하지?

보통 페이지를 표시하기위한 JS 코드와 css 같은 파일들은 webpck과 같은 도구를 이용해 번들링 되어 난독화되고 압축됩니다.
보다 서버에서 빠르게 전달되고 보안성을 높이기 위해서 이러한 난독화와 압축이 사용되는데 이럴경우 페이지에서 에러가 발생할 시 디버깅하기가 힘들어집니다.

브라우저의 디버깅툴은 난독화된 코드에서 에러가 난 부분을 가르키기 때문에 개발자로서는 에러가 난 코드가 애초에 무엇인지 알 수가 없습니다.

그래서 sourceMap이 등장 했습니다. 원본코드를 특정한 알고리즘으로 인코딩하여 특정 키워드로 맵핑을 시켜놓으면 나중에 브라우저에서는 난독화된 코드를 그대로 디코딩하여 복원시킬수 있습니다.

sourceMap의 스펙

sourceMap은 구글독스에 스펙문서가 있습니다.
이것이 기본 포맷입니다.

version: 양수로 소스맵의 버전을 의미하고 항상 제일먼저 나와야 한다.
file: 변환된 파일명이다.
sourceRoot: 옵션값으로 소스 파일을 가져올 경로의 루트를 재조정하는데 사용한다.
sources: mappings에서 사용할 원본 소스 파일명의 배열이다.
sourceContent: 옵션값으로 소스의 내용을 담고 있어야 하면 sources의 파일명으로 파일을 가져오지 못했을 때 사용하는 용도이다. null로 지정하면 반드시 소스피알이 필요하다.
names: mappings에서 사용할 심볼 이름이다.
mappings: 인코딩된 매핑 데이터의 문자열이다.

스펙에서는 저런 포맷을 (원본js파일이름).js.map 이름으로 저장하는것을 컨벤션으로 설정하고 있습니다.

그리고 이런 sourceMap과 난독화되어 생성된 코드 파일을
//# sourceMappingURL=<url> 라는 규칙으로 연결합니다.

또한 eval함수로 부분별로 묶어서 원본코드를 모듈화해서 난독화 할수 있는데
이때는
//# sourceURL=foo.js 라는 규칙으로 이 모듈화한 코드에 이름을 붙일 수 있습니다.

webpack에서의 sourceMap (devtool)

이제 webpack으로 돌아와서 웹팩에서는 devtool이라는 이름으로 sourceMap을 설정 할 수 있습니다.

여러가지 옵션이 있으니 공식문서에서 확인해보시면 됩니다.
보통 개발모드에서는 eval 옵션을 사용합니다.

eval로 설정하여 웹팩을 실행시키고 난독화된 코드를 확인해봅시다.
모듈별로 eval 함수로 묶여 코드가 난독화되어 있는 것을 알 수 있습니다.

또한 /# sourceURL 로 wordRelay.jsx라는 이름이 붙은 것을 알 수 있습니다. 그리고 더불어 자동으로 원본 소스파일 이름을 이름으로 붙여주는 것도 확인할 수 있습니다.