Source Map 에 대한 고찰— Part 1
웹팩(Webpack)이나 다른 코드 번들러는 이제 자바스크립트 기반의 웹 어플리케이션을 개발할 때 없어서는 안될 필수 요소로 자리잡은지 오래 됐다. 그만큼 많은 사람들이 번들러에 익숙해질 시간이 충분했었다는 뜻이고 기술 스펙트럼의 넓어짐을 의미한다.
그래도 여전히 웹 세상에 새롭게 유입되는 신삥(?)들도 많고 기존 시스템에 익숙했던 개발자라도 소스맵(source-map)에 대해 살펴볼 겨를이 없었다면 잘 모르고 있었을 가능성이 크다.
이번 포스팅에선 소스맵에 대해서 알아보고 어떤 옵션을을 적용했을 때 어떤 효과를 누릴 수 있는지 설명하고자 한다.
읽기 전에
이 글은 코드 번들러 중 하나인 웹팩(Webpack)을 기준으로 설명하고 있다. 웹팩이나 다른 번들러를 전혀 모른다면 이 포스팅이 다소 어려울 수 있다. 높은 수준의 배경 지식을 요하는 글이 아니니 기본을 먼저 살펴보고 오면 글을 이해하기가 더 수월할 듯 하다.
본 포스팅은 총 2부작으로 기획됐다. 1부에서는 소스맵의 간단한 설명과 디버깅에서 어떤 차이를 확인할 수 있는지 알아보고 2부에서는 소스맵을 어떻게 분석할 수 있는지에 대해 알아보고자 한다.
Source Map 이란?
예시로 만든 프로젝트는 번들러로 파일을 빌드하면 모든 파일이 main.bundle.js 하나로 뭉쳐지게된다. 소스맵(source-map)은 main.bundle.js 파일 내부의 각 부분이 원본 코드 파일 중 어느 파일의 몇 번 라인에 위치한 부분과 일치하는지 알려주는 정보를 담고 있다. (위 그림을 참고하자)
소스맵은 개발 모드와 프로덕션 모드에 따라 선택할 수 있는 옵션이 다르다. 소스맵은 보통 base64 로 인코딩된 값인 경우가 많으며 디버깅에 압도적으로 유리하기때문에 개발 단계에서는 이 옵션을 항상 활성화시켜두는 것을 강력히 권장하고 싶다.
