Source Map
✅ Source Map이란?
Source Map은
👉 최적화되고 압축된 자바스크립트 파일과
👉 원본 소스코드(JSX, TS 등)를 연결해주는 맵핑 정보입니다.
✅ 필요한 이유
예시
빌드된 코드
function a(a){return a*a}
원래코드
function square(x) { return x * x; }
🛠️ source map이 있으면:
- 브라우저 콘솔 에러가 → App.js:12 라고 정확히 뜸
- 디버깅 시 원본 JSX/TS 코드가 보임
- 보안상 문제
- 프로젝트가 큰경우 빌드시 메모리부족(Out Of Memory, OOM) 이슈가 발생할 수 있음
🧱 source map이 없으면:
- 콘솔 에러가 → main.873ds8d.js:1 이런 식으로 압축된 코드 위치만 보임
✅ 용도
| 환경 | 용도 |
| 개발서버 (npm start) | 🔍 디버깅용으로 필수 (기본 활성화) |
| 프로덕션 빌드 (npm run build) | ❗ 기본은 생성되지만 실제 서비스에선 종종 비활성화 |
✅ 빌드가 느려지는이유
- source map 생성은 추가 작업입니다 (모든 JS 파일의 위치 정보를 .map 파일로 만들어야 함)
- 앱 규모가 크면 .map 파일만 수 MB 이상 될 수 있음
- 서버 배포에는 필수 아님 (보안상 안 쓰는 게 좋음)
✅ 결론
상황추천 여부
| 개발 환경 | ✅ 꼭 써야 함 (디버깅용) |
| 프로덕션 서버 (운영 배포) | ❌ 끄는 게 일반적 (속도+보안) |
🔧 끄는 방법 (빌드시)
GENERATE_SOURCEMAP=false npm run build
또는 package.json
"scripts": {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}반응형
'프론트엔드 > ⚛️ React' 카테고리의 다른 글
| React | Redux Toolkit 완전 기초 – createSlice와 .actions 이해하기 (0) | 2025.09.16 |
|---|---|
| validateDOMNesting:Whitespace text nodes cannot appear as a child of <tr> 에러 (0) | 2025.05.28 |
| React Grid Layout 활용법 (2) | 2025.05.01 |
| React | useRef (1) | 2024.05.03 |
| 리액트에서 innerHtml 표시하기 (0) | 2024.04.25 |