빌드한 파일을 디버깅하는 방법? 소스맵 Source Map

*관련 지난 포스트 🔗 프론트 에러로그 서비스 Sentry, Datadog

개발환경에서는 발생하지 않다가 배포 이후에 버그가 발견된다면? 심히 당황스럽겠지만 이를 위해 개발하면서 수시로 빌드해보며 검증해볼 필요가 있다.

next 프로젝트의 경우에도 스크립트 명령어 next run dev 은 빌드가 포함되지 않고 페이지를 로컬로 띄우는 반면, start나 production 환경으로 실행하는 스크립트에서는 빌드 후 로컬서버로 페이지를 띄운다.

웹앱 서비스가 복잡해지면서 코드의 양도 파일 수도 비대해지게 됨에 따라 요청/응답이 무겁지 않게 즉 클라이언트 측에서 가볍게 다운로드 받을 수 있게끔 파일을 압축해주는 번들러가 필요해졌다.(웹팩, Rollup, Parcel 등이 있고)
번들링 과정 중 "빌드"란 컴퓨터 언어로 컴파일된 소스를 일종의 실행 파일로 변환시켜주는 셈이다.

개발환경에서 없던 서비스 배포 이후에 에러가 발생한다면 빌드 이후의 문제일 수 있고,

❓ 그렇다면 빌드된 파일을 디버깅할 수 있는 방법이 있을까?

❗️ Source Map을 이용해서 디버깅할 수 있다.

빌드한 파일을 원본과 연결시켜주는 기능이 바로 Source Map 이다.
"배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능"

대표적으로 웹팩을 예를 들면, devtool 이라는 스크립트로 sourceMap을 설정할 수 있다.

1. 웹팩 config 파일에 devtool 속성을 추가하고 설정 옵션 중 하나를 선택해 지정해주면 된다.

   // webpack.config.js
   module.exports = {
   devtool: 'cheap-eval-source-map'
   }

2. devtool 옵션
   *devtool - this option controls if and how source maps are generated

   • eval : 개발환경용 빌드에 적합

   • eval-cheap-source-map : 개발환경용 차후 선택으로 나쁘지 않음

   • eval-source-map : 개발환경용 빌드 시 권장됨. 소스맵을 고도로 활용하기에 좋음. 빌드 속도는 느림.

   • source-map : 상용 배포용으로 권장됨. 소스맵 고도 활용 가능. 빌드 속도는 느림. rebuild도 느림.

     등등 매우 많은 옵션이 있다.

3. plugin을 사용해도 좋다

   • SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin 등, 더 자세한 설정이 가능함
   • 다만 웹팩 config파일에서 devtool 옵션을 설정하였으면 plugin을 중복사용하지 말라. (옵션 설정 시 플러그인을 내부적으로 자동 적용하므로)

🔗 웹팩 공식문서 - Devtool 관련

참고
https://developer.chrome.com/docs/devtools/javascript/source-maps/
https://blog.teamtreehouse.com/introduction-source-maps