보통 페이지를 표시하기위한 JS 코드와 css 같은 파일들은 webpck과 같은 도구를 이용해 번들링 되어 난독화되고 압축됩니다.
보다 서버에서 빠르게 전달되고 보안성을 높이기 위해서 이러한 난독화와 압축이 사용되는데 이럴경우 페이지에서 에러가 발생할 시 디버깅하기가 힘들어집니다.
브라우저의 디버깅툴은 난독화된 코드에서 에러가 난 부분을 가르키기 때문에 개발자로서는 에러가 난 코드가 애초에 무엇인지 알 수가 없습니다.
그래서 sourceMap이 등장 했습니다. 원본코드를 특정한 알고리즘으로 인코딩하여 특정 키워드로 맵핑을 시켜놓으면 나중에 브라우저에서는 난독화된 코드를 그대로 디코딩하여 복원시킬수 있습니다.
sourceMap은 구글독스에 스펙문서가 있습니다.
이것이 기본 포맷입니다.
스펙에서는 저런 포맷을 (원본js파일이름).js.map 이름으로 저장하는것을 컨벤션으로 설정하고 있습니다.
그리고 이런 sourceMap과 난독화되어 생성된 코드 파일을
//# sourceMappingURL=<url>
라는 규칙으로 연결합니다.
또한 eval함수로 부분별로 묶어서 원본코드를 모듈화해서 난독화 할수 있는데
이때는
//# sourceURL=foo.js
라는 규칙으로 이 모듈화한 코드에 이름을 붙일 수 있습니다.
이제 webpack으로 돌아와서 웹팩에서는 devtool이라는 이름으로 sourceMap을 설정 할 수 있습니다.
여러가지 옵션이 있으니 공식문서에서 확인해보시면 됩니다.
보통 개발모드에서는 eval 옵션을 사용합니다.
eval로 설정하여 웹팩을 실행시키고 난독화된 코드를 확인해봅시다.
모듈별로 eval 함수로 묶여 코드가 난독화되어 있는 것을 알 수 있습니다.
또한 /# sourceURL 로 wordRelay.jsx라는 이름이 붙은 것을 알 수 있습니다. 그리고 더불어 자동으로 원본 소스파일 이름을 이름으로 붙여주는 것도 확인할 수 있습니다.
이 이름은 크롬 개발자 도구에서 source탭에서 보여지는 이름으로도 활용됩니다.
정확히 .wordrelay/./WordRelay.jsx에 코드가 복원되어 있는 것을 확인할 수 있습니다.
하지만 eval 옵션은 사실 소스맵이 없는 상태이며 원본 코드가 아닙니다. 변환된 코드가 그대로 들어가있는 것을 알 수 있습니다.
eval-source-map 옵션으로 웹팩을 실행해봅니다.
/#sourceMappingURL 이 뒤에 붙은것을 알 수 있으며 무엇인지는 모르겠지만 json 데이터가 base64로 인코딩된 문자열이 붙어있는 것을 알 수 있습니다. 아마 저 문자열을 복원하면 위에서 봤던 sourceMap 스펙이 나올것입니다.
크롬에서 확인해보면 원본 jsx파일이 잘 복원된 것을 눈으로 확인할 수 있으며, 에러가 났을 때도 어떤 부분에서 에러가 났는지 확인이 가능합니다.
참고자료:
1. sourceMap Spec https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/preview#heading=h.fc227cy4qh38
2. 웹팩 devtools 공식문서
https://webpack.kr/configuration/devtool/#root
3. 크롬 개발자 도구 공식문서 sourceMap 활용
https://developer.chrome.com/docs/devtools/javascript/source-maps/