React 코드가 안전하지 않을 수 있습니다!

반응 애플리케이션을 생성하기 위해 create-react-app를 사용하고 빌드를 얻기 위해 yarn build를 사용하는 경우 반응 코드가 안전하지 않을 수 있습니다.

지정하지 않고 yarn build 명령을 실행하면 소스 맵도 생성되기 때문입니다.

그리고 소스 맵을 삭제하지 않고 빌드된 파일을 서버에 넣으면 누구나 전체 리액트 프로젝트 코드를 볼 수 있습니다.

추신: 모든 사람이 JS 파일을 볼 수 있다는 것을 알고 있지만 그 사이에는 차이가 있습니다. 소스 맵이 없으면 컴파일된 버전을 볼 수 있으며 미화하려고 해도 정확히 무엇을 했는지 이해할 수 없습니다. 그러나 소스 맵 파일을 남겨두면 개발 과정에서 보는 것처럼 전체 프로젝트를 볼 수 있습니다.

얼마나 나쁩니 까?

이 웹사이트https://svgeditoronline.com/editor/로 이동하여 개발자 도구를 열고 "소스"탭을 선택합니다. 그러면 슬프게도 모든 프로젝트 코드를 볼 수 있습니다.

우리가 무엇을 해야 합니까?

.map 폴더에 있는 빌드된 파일에서 build/static/js 파일을 삭제해야 합니다.

그리고 다음 빌드를 위해 package.json 빌드 명령을 변경해야 합니다.

이 줄 찾기

...
"build": "react-scripts build",
...

이것으로 변경

...
"build": "GENERATE_SOURCEMAP=false react-scripts build",
...

이제 코드는 안전합니다. 작지만 중요한 생각입니다.

많은 라이브 리액트 프로젝트를 확인했고, codecanyon에서 리액트 스크립트를 판매하는 것도 확인했고, 무엇을 찾았는지 추측해보세요. 거의 모든 프로젝트가 static/js 폴더에 .map 파일을 남겼습니다.

TL; DR

.map 폴더에서 모든 build/static/js 파일을 삭제합니다.

다음 빌드를 위해 package.json의 빌드 명령을 이"build": "react-scripts build",에서 이"build": "GENERATE_SOURCEMAP=false react-scripts build",로 변경합니다.

이제 안전하셨으면 좋겠습니다 :)