[배포] 코드 노출 이슈

blcklamb commented 2 years ago

개발자 도구에서 코드 노출되는 문제를 빌드 설정을 다시 해서 숨기는 작업에 대해 정리하겠습니다.

blcklamb commented 2 years ago

깔끔 깔끔

blcklamb commented 2 years ago

문제 상황

개발자 도구 중 Source탭에서 저희의 전체 소스 코드를 열람할 수 있게 되어 있습니다.

내부 코드가 그대로 노출되어 보안 측면에서 위험합니다.

react를 빌드할 때, babel은 jsx/tsx 파일을 JS코드(최소화된 JS파일)로 변환합니다. 여기서 에러 발생 시 컴포넌트 내에 디버그하기 어렵습니다. 그래서 react 측 webpack과 babel이 자동으로 map file을 만듭니다.

sourcemap은 원본 jsx/tsx 파일과 최소화된 JS 파일 간의 매핑입니다. sourcemap의 주 목적은 디버깅입니다. 기본적으로 생성된 코드 파일에 에러가 있다면 맵은 원본 소스의 위치를 알려줍니다.

-> 운영 체제 불문 사용 가능

GENERATE_SOURCEMAP = false;를 추가한 후

npm run build

-> 운영 체제 별 상이

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

&& 연산자는 powershell에서는 안 먹히고, cmd에서는 먹힙니다. npm run build할 CLI를 확인하고 적용하기!

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

그 외 다른 방법은 출처 타고 들어가서 확인하기