📎아이템 57 소스맵을 사용하여 타입스크립트 디버깅하기

디버거는 런타임에 동작하며, 현재 동작하는 코드가 어떤 과정을 거쳐서 만들어진 것인지 알지 못한다. 디버깅을 하면 보게 되는 코드는 전처리기, 컴파일러, 압축기를 거친 자바스크립트 코드이다. (이렇게 변환된 자바스크립트 코드는 복잡해 디버깅이 매우 어렵다.)

디버깅 문제를 해결하기 위해 브라우저 제조사들은 소스맵(source map)을 만들었다.

소스맵에 대해 알아야 할 사항

• 타입스크립트와 함계 번들러나 압축기를 사용하고 있다면, 번들러나 압축기가 각자의 소스맵을 생성하게 된다. 이상적인 디버깅 환경이 되려면 자바스크립트가 아닌 원본 타입스크립트 소스로 매핑되도록 해야 한다. 번들러가 기본적으로 타입스크립트를 지원한다면 별도 설정 없이 잘 동작해야 한다. 그렇지 않다면 번들러가 소스맵을 인식할 수 있도록 추가적인 설정이 필요하다.

• 상용 환경에 소스맵이 유출되고 있는지 확인해야 한다. 디버거를 열지 않는 이상은 소스맵이 로드되지 않으므로, 실제 사용자에게 성능 저하는 발생하지 않는다. 하지만, 소스맵에 원본 코드의 인라인 복사본이 포함되어 있다면 공개해서는 안 될 내용이 들어 있을 수 있다. 저질 주석이나 내부버그 추적을 위한 URL을 공개할 필요는 없다.

NodeJS 프로그램의 디버깅에도 소스맵을 사용할 수 있다. 보통 편집기가 자동 인식하거나 NodeJS 프로세스를 브라우저 디버거와 연결하면 된다.

타입 체커가 코드를 실행하기 전에 많은 오류를 잡을 수 있지만, 디버거를 대체할 수는 없다. 소스맵을 사용해서 제대로 된 타입스크립트 디버깅 환경을 구축해야 한다.

📍 요약

• 원본 코드가 아닌 변환된 자바스크립트 코드를 디버깅 하지 말자. 소스맵을 사용해서 런타임에 타입스크립트 코드를 디버깅하자.

• 소스맵이 최종적으로 변환된 코드에 완전히 매핑되었는지 확인하자.

• 소스맵에 원본 코드가 그대로 포함되도록 설정되어 있을 수도 있다. 공개되지 않도록 설정을 확인하자.