리액트 소스코드 크롬 소스에서 난독화

회사에서 일을 하면서 이야기 나온 이슈중에 크롬 개발자 도구에서 Sources에서 일반적으로 빌드 된 파일을 가지고 서버에 올렸을 때 내가 구현한 소스 코드가 보이지 않았으면 좋겠다는 말이 나왔다.

현재 개발 환경 세팅은 create-react-app 을 보일러 플레이트로 사용하고 있는 상황이고 MobX의 annotation을 사용하기 위해서 yarn eject를 진행한 상황이다.

프로덕션 레벨에서 정렬된 소스 코드를 보이지 않기 위해서는 빌드시 GENERATE_SOURCEMAP=false 옵션을 넣으면 된다.

현재 저 같은 경우는 package.json에 있는 scripts build를 위와 같이 수정하였고 빌드는 그대로 npm run build로 진행했다. 제목을 난독화라고 적었는데 사실 난독화라기보다는 소스맵(sourcemap)을 생성하지 않는 것이라고 생각하면 된다.

https://facebook.github.io/create-react-app/docs/advanced-configuration 에서 관련된 내용을 확인 할 수 있다.

When set to false, source maps are not generated for a production build. This solves OOM issues on some smaller machines.