Source Map

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"
}