[React] Sourcemap(소스맵) 정의와 배포시 제거및 난독화

Sourcemap은 creact-react-app으로 프로젝트를 빌드시 다음과 같이 build 폴더에 static으로 생성되는데 .css.map이나 .js.map의 형식으로 되어있는경우 배포시 기본적으로 webpack으로 번들링된 파일과 대응되는 sourcemap이 생성된다. 아래처럼 브라우저에서 원본 소스처럼 볼수있다

왼쪽) build시 폴더, 오른쪽) 배포후 브라우저 소스맵

Sourcemap(소스맵) 사용 이유

Sourcemap는 주목적은 디버깅이다. 배포 후에 에러나 버그가 발생했을시 만약 원본 소스를 볼수없다면 어디서 에러가 났는지 디버깅하기 매우 까다롭다 하지만 소스맵을 통해 원본 소스 체크하여 어디부분인지 확인할 수 있다. 이러한 편의성을 제공하는 것이 소스맵 이다.

Sourcemap(소스맵)을 제거해야 하는 이유

이러한 편의성이 있는 반면에 다른사람도 소스코드를 볼수있다라는건 보안상 노출된 것이니 매우 좋지 않은 문제이다. 또한 프로젝트가 큰경우 빌드시 메모리부족(Out Of Memory, OOM) 이슈가 발생할 수도 있다.

Sourcemap(소스맵)을 제거하는 방법

제거하는 방법은 매우 간단하다. package.json파일에 있는 build에 GENERATE_SOURCEMAP=false를 추가해주면 된다.

또는 react-scripts가 1.0.11 이전버전인 경우 빌드후 직접 제거하는 방법을 사용하면되는데 이때 build에

"build": "react-scripts build && rm build/static/**/*.map"

식으로 넣어주면 된다.

이제 브라우저에서 Source탭에 들어가서 확인하면 아래와 같이 코드가 제거되고 알수없는 이름의 파일과 그안의 알수없는 코드로 난독화 되어있다.

추가: 만약 Window 운영체제에서 빌드시에 build 안에 GENERATE_SOURCEMAP=false 을 넣어주면 에러가 발생한다고 한다. 이를 위해서 두가지 방법이있는데 하나는 'set \' 을 GENERATE_SOURCEMAP=false 앞에 붙여서

"build": "set \ "GENERATE_SOURCEMAP=false\" && react-scripts build"

로 해주면되고 두번째 방법으로는 여러 다른 환경의 cross를 세팅하기위해 cross-env를 설치하고 cross-env를 넣어주는것이다.

"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build"