브라우저에서 ReactJS 코드 숨기기

개발자 여러분, 안녕하세요.

이 블로그 게시물에서는 프로덕션 서버에서 ReactJS 코드를 숨기는 방법에 대해 알려드리겠습니다.

내용의 테이블

Introduction

What makes your source code visible in the browser

Hide your ReactJS code using .env file

Hide ReactJS code using package.json file

Hide ReactJS code using cross-env library

Custom JavaScript file to hide ReactJS code

Conclusion

1. 소개

I am assuming that you have developed a ReactJS application using create-react-app (CLI tool for setting up a boilerplate setup to make React apps.)or your own webpack configuration and also deployed it in some hosting platform like Netlify, Vercel, Heroku, Azure, AWS etc.
But have you ever opened your website and in developers tool of your browser, have you ever checked the source tab of it.
If not! Please go to your website and check whether your ReactJS codes are visible to public or not like below.

코드가 이와 같이 표시되면 이 행성에서 ReactJS 코드를 숨길 수 있는 올바른 위치에 있는 것입니다.
이 블로그 게시물이 끝날 때까지 프로덕션 환경에서 ReactJS 코드를 숨길 수 있는 다양한 방법과 장단점을 보여드리겠습니다.
ReactJS 코드를 숨기는 방법을 이미 알고 있다면 이 블로그와 다른 가능한 방법을 한 눈에 보고 알고 있는지 여부를 댓글로 알려주세요.

2. 브라우저에서 ReactJS 소스 코드를 볼 수 있게 만드는 요소

Its map files, but what are they ?

If you are in hurry to remove only hide your reactjs code from production then go to next topic Hide your ReactJS Code

reactjs 코드를 빌드할 때 babel은 JSX을 네이티브 JavaScript 코드(최소화된 JavaScript 파일)로 변환하므로 오류가 발생하면 구성 요소로 디버깅하기 어렵습니다. 인간이 읽을 수 있음).
sourcemap은 생성/변환/축소된 JavaScript 파일과 하나 이상의 원본 소스 파일 간의 매핑입니다. sourcemaps의 주요 목적은 디버깅을 돕는 것입니다. 기본적으로 생성된 코드 파일에 오류가 있는 경우 맵이 원본 소스 파일 위치를 알려줄 수 있습니다.

이제 코드로 돌아가서
npm run build 명령을 실행하여 프로덕션에서 애플리케이션을 실행하기 위해 배포하는 ReactJS 앱의 빌드 폴더를 만듭니다.

이 빌드 폴더가 무엇으로 구성되어 있는지 확인한 적이 있습니까?
빌드 폴더는 HTML, CSS 및 JavaScript 파일을 포함하는 ReactJS 애플리케이션의 축소된 버전으로 구성됩니다. 또한 map개의 파일이 포함되어 있습니다.

build\static\js 내부의 맵 파일을 확인하십시오.

참고: 이 빌드 파일을 배포하면 코드가 브라우저에 표시됩니다.
따라서 지도 파일을 수동으로 삭제한 다음 빌드 폴더를 배포할 수 있지만 이는 올바른 방법이 아니며 모든 개발자가 좋아하는 방법이 아닙니다.

localhost(개발 환경)에서 웹팩은 자동으로 sourcemap 파일을 생성하므로 코드에서 오류(있는 경우)의 줄 번호를 볼 수 있습니다.

자, 시간 낭비하지 않고 시작하겠습니다.

다음은 브라우저에서 ReactJS 코드를 숨기는 다양한 방법입니다.

3. .env 파일을 사용하여 ReactJS 코드를 숨깁니다.

create .env file in the root of your ReactJS application (the place where src folder is there not inside the src folder or else in the same path where package.json is defined)

Now, add below line of code in it

GENERATE_SOURCEMAP = false;

and then make a build of your ReactJS app using command npm run build

What it will do is, it will create a build folder without the map files[link of above topic of map file]. You can go inside the build\static\js

빌드 폴더를 생성하는 이 방법은 운영 체제에 의존하지 않습니다.

지금 앱을 배포하면 브라우저 개발자 도구의 소스 탭에서 코드를 볼 수 없습니다.

4.package.json 파일 사용.

The way of remove map files using this way is OS dependent
lets open the package.json file and go to script object and change your build command like below,

2.1 In Windows OS:

"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"
//The && DOES NOT work in the PowerShell but WORKS in cmd, so make sure in which CLI you are writing npm run build

2.2 In Linux OS:

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

2.3 configure build command to auto delete the map files.

2.3.1

"build": "react-scripts build && rm build/static/js/\*.map",
//creating and deleting .map files

2.3.2

"build": "rimraf ./build && react-scripts build && rimraf ./build/\*_/_.map"

2.3.3

"build":"react-script build && del build/static/js/\*.map"

2.4 use postBuild command to auto delete map files.

"build":"react-script build"
"postBuild":"rimraf build /\*_/_ .map"
//this will delete all the .map file post build generation
//not the recommened way becaue why to generate the map file if you are deleting it again

NOTE: What is prebuild and postbuild ?

"prebuild": "echo I run before the build script",
"build": "react-scripts build",
"postbuild": "echo I run after the build script",
 //prebuild and postbuild runs automatically before and after build command respectively

2.5 using regex to delete the map files from build folder

"build": "node scripts/build.js && yarn run delete-maps",
"delete-maps": "yarn run delete-map-files && yarn run delete-references-to-map-files",
"delete-map-files": "find ./build -name '_.map' -delete",
"delete-references-to-map-files": "find ./build -regex '._\\.\\(js\\|css\\)' -exec sed -i -E '\\/[\\*\\/]#\\ssourceMappingURL=main(\\.[0-9a-f]+)?\\.(css|js)\\.map(\\\*\\/)?/g' {} +"

NOTE: "Removing only the .map files" sadly isn't enough. The build also enerates a asset-manifest.json file that contains references to that map files.

5. 교차 환경 라이브러리 사용

install cross-env library in devDependency

npm install --save-dev cross-env

Just use NPM package cross-env. Super easy. Works on Windows, Linux, and all environments.
then ,

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

Notice that you don't use && to move to the next task.

"scripts": {
"build": "cross-env NODE_ENV=production OTHERFLAG=myValue webpack --config build/webpack.config.js"
}

Notice that if you want to set multiple global vars, you just state them in succession, followed by your command to be executed.

6. 사용자 정의 js 파일을 빌드하여 지도 파일을 삭제합니다.

"build": "react-scripts build",
"postbuild": "node ./delete-sourcemap.js",

Create a new script called delete-sourcemap.js in your project's root folder:
const fs = require('fs')

function deleteMaps(dir) {
  fs.readdir(dir, function (err, files) {
    files.forEach((file) => {
      if (/\.map$/.test(file)) {
        fs.unlinkSync(dir + file);
      } else {
        fs.readFile(dir + file, "utf8", (err, data) => {
          let result = data.split("\n");
          console.log(result.length);
          if (result[result.length - 1] !== undefined && result.length > 1) {
            fs.writeFileSync(
              dir + file,
              result.slice(0, result.length - 1).join("\n")
            );
          }
        });
      }
    });
  });
}

["./build/static/css/", "./build/static/js/"].map(deleteMaps);

Source

결론

대박! 이제 프로덕션 환경에서 ReactJS 코드를 숨기는 데 전문가가 됩니다. 이제 ReactJS 코드가 브라우저에 표시되는 이유와 그 뒤에 있는 기본 이유에 대해 매우 명확하게 이해하셨기를 바랍니다.

여기까지 읽어주셔서 감사합니다. 프로덕션 환경에서 ReactJS 코드 숨기기에 대한 간략한 소개입니다.

이 기사가 유용하다고 생각되면 이 기사를 공유하십시오. 누군가도 유용하다고 생각할 수 있습니다. 기술적으로 부정확한 내용이 있으면 언제든지 issue 을 작성하십시오.

그것이 당신을 위한 멋지고 유익한 읽기를 바랍니다.
자세한 내용을 보려면 https://www.capscode.in/blog을 방문하세요...
다음 블로그 기사에서 뵙겠습니다. 건강하세요!!

감사,
CapsCode

Reference

이 문제에 관하여(브라우저에서 ReactJS 코드 숨기기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/capscode/hide-reactjs-code-from-browser-1nl0

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)