[React] web3.js React-Create-App 사용시 sourcemap 오류

React-Create-App로 프로젝트를 만들고 web3.js 라이브러리를 사용하려고 하는 도중 npm start 시 sourcemap 오류가 발생했다.

failed to parse source map: 'webpack:///../../src.ts/coders/abstract-coder.ts' url is not supported

 

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜 주는 기능을 한다. 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축한다. 이때 배포한 파일에서 에러가 난다면 Sorce Map을 통해 원본과 비교하며 디버깅을 할 수 있는 유용한 기능이다.

 

하지만 소스맵을 사용하는데 단점이 있다.

1. 소스맵을 사용하면 개발자 도구를 이용하여 우리가 개발한 소스코드를 확인할 수 있기 때문에 내부 코드가 그대로 노출되므로, 난독화의 이점을 모두 상실하고 보얀에 취약해진다.

 

2. 규모가 큰 프로젝트인 경우, 빌드 시 sourcemap까지 생성한다면 메모리 부족 현상이 일어날 수 있다.

 

해당 문제를 해결하기 위해서 소스맵을 삭제하기로 했다.

 

소스맵 삭제 방법

// package.json
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
  },

환경변수 "GENERATE_SOURCEMAP = false"로 설정하면 된다.

 

Sorcemap은 디버깅에 유용하므로 꼭 삭제하는 것이 정답은 아니지만, web3.js 라이브러리뿐만 아니라 caver.js에서도 Sourcemap 에러가 발생하므로 삭제하는 방법을 선택했다.