[코테] Q10. 타입스크립트 .map 파일이 무엇인가요?

코딩면접, 코딩테스트

Q) 타입스크립트의 map파일에 대해서 설명해주세요.

타입스크립트 코드와 자바스크립트 코드를 매핑할때 사용되는 것이 map 파일입니다. 쉽게 얘기해서 map 파일을 이용해서 자바스크립트 소스코드와 타입스크립트 소스코드의 관계를 파악할 수 있습니다.

소스 맵 파일(.js.map) 파일은 json형식으로 되어 있습니다. 타입스크립트를 컴파일하면 자바스크립트파일이 생성됩니다. 또한 선택적으로 맵파일도 생성할 수 있습니다. 컴파일에 의해 생성된 자바스크립트 코드와 그 자바스크립트 코드에 해당하는 타입스크립트의 특정 행과 열에 연결하는 정보가 map 파일에 포함되어 있습니다.

소스 맵을 사용하는 이유는 소스 맵 파일을 이용해서 개발자는 디버깅에 활용할 수 있기 때문입니다. chrome의 디버그 툴에서 자바스크립트 코드 대신 타입스크립트 코드로 디버그를 쉽게 할 수 있는 이유가 소스 map파일 덕분입니다.

 

소스 map을 사용하는 방법

타입스크립트 컴파일을 할 때 옵션을 사용할 수 있습니다. tsconfig.json파일의 compilerOptions의 sourceMap을 true로 설정하면 됩니다.

tsconfing.json 컴파일 옵션

 

프로덕션 앱의 경우 map 파일

개발 시에 map파일을 활용할 수 있지만 실제 출시하기 전에는 소스코드가 쉽게 노출되게 되니 주의를 해야 합니다. 따라서 브라우저 코드를 난독화 하여 보안을 확보할 필요가 있을 경우에는 소스 맵을 제외해야 합니다.