Angular에서 소스 맵 파일 다운로드: 서버에 따라 어떻게 다를까?

Angular 앱에서 소스 맵(Source Map) 파일은 디버깅에 필수적이죠. 서버에 .map 파일이 있으면 브라우저가 이를 다운로드하고, 없으면 다운로드하지 않습니다. 이 과정은 어떻게 이루어질까요? 이번 포스트에서 간단히 정리합니다!

소스 맵 다운로드 원리

Angular CLI로 빌드된 JavaScript 파일(예: main.js)은 소스 맵 파일(예: main.js.map)과 연결됩니다. 연결은 파일 끝의 주석으로 설정됩니다:

//# sourceMappingURL=main.js.map

동작 과정

1. JavaScript 파일 로드:
   • 브라우저가 main.js를 로드하며, sourceMappingURL 주석을 확인.
   • 주석에 명시된 .map 파일(예: main.js.map)을 서버에 요청.
2. 서버 응답:
   • 파일 있음: 서버가 200 OK로 .map 파일을 반환 → 브라우저가 다운로드해 원본 TypeScript 코드 표시.
   • 파일 없음: 서버가 404 Not Found 또는 403 Forbidden 반환 → 브라우저는 소스 맵 없이 컴파일된 JavaScript만 표시.
3. 브라우저 동작:
   • 소스 맵이 로드되면 개발자 도구(F12)의 Sources 탭에서 .ts 파일 확인 가능.
   • 소스 맵이 없으면 .js 파일만 표시되어 디버깅이 제한됨.

서버 설정으로 조건부 제공

서버에서 소스 맵 파일 제공을 제어할 수 있습니다. 예를 들어, ?dev=1 쿼리 파라미터로 소스 맵 접근을 제한:

app.get('/main.js.map', (req, res) => {
  if (req.query.dev === '1') {
    res.sendFile('path/to/main.js.map');
  } else {
    res.status(404).send('Source map not available');
  }
});

• ?dev=1이 없으면 브라우저는 .map 파일을 받지 못함.

주의사항

• 보안: 소스 맵은 원본 코드를 포함하므로, 프로덕션 환경에서는 접근 제한 필수.
  • ng build --prod --source-map=false로 소스 맵 생성 비활성화 가능.
• 성능: .map 파일은 크기가 클 수 있으니, 서버에서 압축(gzip) 사용 권장.
• AngularJS와의 차이: AngularJS는 수동으로 소스 맵을 생성(UglifyJS 등)해야 하며, Angular CLI처럼 자동화되지 않음.

마무리

Angular에서 소스 맵 다운로드는 sourceMappingURL 주석과 서버의 파일 제공 여부에 따라 결정됩니다. 서버에 .map 파일이 있으면 브라우저가 자동으로 다운로드하고, 없으면 조용히 넘어갑니다. 보안을 위해 프로덕션에서는 소스 맵 노출을 신중히 관리하세요!