📌 CRA(Create-React-App) 란?
CRA란 별다른 설정 없이 react 개발환경을 구축해주는 boilerplate이다.
CRA를 활용할 경우 쉽게 환경설정을 할 수 있다는 장점이 있다.
📌 CRA 역할
- public 디렉토리에 index.html과 logo, favicon 등의 static asset 및 기본적인 리액트 코드 (index.js, app.js) 설정
- webpack, babel, eslint, jest 등 리액트 개발에 필요한 각종 환경설정
- react, react-dom, react-scripts 등 각종 라이브러리 설치
- react-scripts를 사용하여 package.json에 npm command 정의
📌 sourceMap 이란?
소스맵(source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능이다.
보통 서버에 배포를 할 때 성능최적화를 위해 HTML, CSS, JavaScript와 같은 웹 자원들을 압축한다.
만약 압축하여 배포한 파일에서 에러가 난다면, 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하여 디버깅할 수 있다.
CRA로 리액트 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링된 파일과 해당 파일에 대응되는 sourcemap이 생성된다.
📌 sourcemap 제거
크롬 기준 개발자도구 > Sources에서 보이는 것을 소스맵이라고 한다.
소스맵에서 모든게 다 보일 경우 오류가 난 상황에서는 디버깅이 편하지만 다음과 같은 이유로 인해 sourcemap을 제거해줘야 한다.
📍 sourcemap 제거 이유
1. 내부 코드 노출
내부 코드가 그대로 노출되므로, 난독화의 이점을 모두 상실한다.
노출되지 않아야 하는 프로젝트일수록 더욱 치명적이다. 즉, 보안에 취약하다.
2. 빌드 시 메모리 부족 (OOM) 이슈 발생
규모가 큰 프로젝트의 경우 빌드 시 sourcemap까지 생성하면 메모리 부족 현상이 일어날 수 있다.
📍 sourcemap 제거 방법
package.json 파일의 build 옵션에 GENERATE_SOURCEMAP=false를 주면 된다.
// package.json
"build" : "GENERATE_SOURCEMAP=false react-scripts build"<참고 : https://24hours-beginner.tistory.com/253
https://joonfluence.tistory.com/658
https://velog.io/@racoon/React-build-%EC%8B%9C-sourcemap-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0 >
