소스 맵(Source Map) 이해하기

소스 맵이란?

자바스크립트는 배포용으로 빌드할 경우 성능을 최적화하기 위해서 원본 파일을 압축하거나 번들링하게 됩니다.

이처럼 압축되거나 번들링된 결과물과 원본 파일간의 관계를 기록한 파일을 소스 맵(Source Map)이라고 합니다.

소스 맵은 어떤 구성을 가지고 있을까?

소스 맵은 JSON 형식으로 작성되며 아래와 같은 요소를 포함하게 됩니다.

• version : 소스 맵의 기반이 되는 버전 번호
• file : 변환된 소스 코드의 파일명
• sources : 원본 소스 코드의 경로
• sourcesContent : 원본 소스 코드의 내용
• names : 변환된 소스 코드에서 사용된 식별자의 이름
• mappings: 원본 소스 코드와 변환된 코드 간의 매핑 정보

소스 맵은 언제 필요할까?

과연 소스 맵은 언제 필요할까요?

소스 맵은 성능 최적화를 위해 압축되고 번들링된 결과물과 원본 파일간의 관계를 기록한 파일이라고 위에서 말씀드렸습니다.

만약에 이렇게 압축 되고 번들링된 결과물에서 오류가 발생했을 경우 우리는 어떻게 오류를 추적할 수 있을까요?

원본 파일과 결과물의 관계를 파악하고 디버깅하기 위해 소스 맵은 탄생하게 되었습니다.

소스 맵은 어떻게 동작할까?

소스 코드는 Babel과 같은 트랜스 파일러를 통해 호환성 있는 버전으로 변환되거나 Webpack 같은 번들러를 통해 압축되거나 최적화 됩니다.

이 과정에 소스 맵이 생성되며 원본 소스 코드와 변환된 소스 코드의 각 줄과 변환된 줄의 매핑 정보(mappings)가 포함되게 됩니다.

이러한 매핑 정보를 이용해 디버깅을 효율적으로 진행할 수 있게 됩니다.

소스 맵 고려사항

소스 맵은 디버깅에 많은 도움을 주지만 빌드 시간과 빌드 결과물의 크기를 늘리는 원인이 되곤 합니다.

그리고 소스 맵에는 원본 코드가 포함되기 때문에 악의적인 공격자에게 노출될 경우 코드의 취약점이 그대로 드러난다는 점이 문제가 될 수 있습니다.

만약 소스 맵을 활용한다면 되도록 운영 서버에서는 사용하지 않고 스테이징 서버를 포함한 이전의 단계에서만 사용하는 것이 권장됩니다.