2022-10-19 @이영훈
React에서는 디버깅을 위해서 기본값으로 소스맵(source map)을 생성합니다.
그런데 빌드할 때도 이 기본 설정이 적용되어 배포할 때도 이 소스맵이 다 보이는 문제가 있습니다. 보안적으로 취약해지기 때문에 빌드할 때는 source map을 생성하지 않는 것이 좋습니다.
Source map 생성하지 않도록 설정하기
React의 package.json에서 build 커멘드에 GENERATE_SOURCEMAP=false 옵션을 넣어주면 됩니다.
순서도 중요합니다. GENERATE_SOURCEMAP 옵션을 가장 처음에 넣어주셔야 합니다. env-cmd로 개발 환경을 분리했는데 env-cmd 뒤에 해당 옵션을 넣은 경우 에러가 발생합니다.
// package.json
"scripts": {
"build:local": "GENERATE_SOURCEMAP=false env-cmd -f .env.local react-scripts build",
"build:dev": "GENERATE_SOURCEMAP=false env-cmd -f .env.dev react-scripts build",
"build:stage": "GENERATE_SOURCEMAP=false env-cmd -f .env.stage react-scripts build",
"build:prod": "GENERATE_SOURCEMAP=false env-cmd -f .env.prod react-scripts build",
}
JSON
복사
브라우저에서 개발자 모드에서 소스맵 생성에 따라서 다른 점을 확연하게 확인할 수 있습니다.
왼쪽은 소스맵 생성이 된 것이고, 오른쪽은 소스맵 생성이 되지 않은 배포 버전입니다.
GENERATE_SOURCEMAP=false 적용 전
GENERATE_SOURCEMAP=false 적용 후