React를 개발한 것을 배포할 때 브라우저의 DevTools에서 소스 코드를 볼 수 있다는 경험이 있습니까?
소스 코드가 보이는 것은 보안적으로는 좋지 않고, 게다가 괄호 나쁘다! ! 그래서 어떻게 든합시다!

방법 1: Server Side Rendering(SSR)

근본적으로 Frontend 측이 아니라 Backend 측에서 처리를 쓰면 좋다는 것입니다.
소스 코드 은닉을 할 수 있을 뿐만 아니라, Single Page Application (SPA)의 단점을 극복할 수도 있습니다.

FirstView 표시 시간 단축:
SPA에서는, 「Backend측으로부터 응답을 돌려주는→Frontend측에서 JavaScript를 실행→표시」라고 하는 흐름이므로, FirstView 표시 시간은 종래의 방법보다 길어집니다. SSR과 결합하면 FirstView 표시 시간을 단축할 수 있습니다.

SEO 개선 :
SPA에서는 Backend가 응답을 반환하면 아직 Html이 생성되지 않으므로 Search Engine의 Clawler가 콘텐츠를 인식하기가 어렵습니다. SSR과 결합하면 이 문제도 개선됩니다.

Isomophic (Universal) JavaScript 실현 :
"Frontend와 Backend를 분리하면 다양한 이점이 생깁니다만, 대신 Frontend와 Backend와의 논리의 공유를 할 수 없게 됩니다. SSR과 결합하면 Isomophic (Universal) JavaScript를 구현할 수 있으며 Frontend와 Backend 간의 논리 공유가 가능합니다.
Isomophic (Universal) JavaScript에 대해 더 알고 싶은 분은 여기를 참조하십시오.

SSR을 실현하기 위해서는 여러가지 방법이 있다고 생각합니다만, Vercel사(구명:Zeit사)가 개발하고 있는 Next.js 를 사용하면 간단하게 할 수 있습니다.

방법 2: Create-react-app의 GENERATE_SOURCEMAP

SSR을 도입하는 것은 힘들다는 분은 Create-react-app의 GENERATE_SOURCEMAP를 무효화하는 방법도 있습니다.
Create-react-app로 빌드하고 있다면 아래와 같이 스크립트에 추가하면 됩니다.

package.json

scripts: {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}

또는 .env 파일에 다음을 추가할 수 있습니다.

GENERATE_SOURCEMAP=false

위는 React에서 소스 코드를 숨기는 방법을 소개했습니다.
잘못된 곳 등이 있으면 꼭 지적해 주십시오. 또 다른 방법을 아시는 분은 가르쳐 주시면 감사하겠습니다.