StrictMode, 리액트 빌드

StrictMode

• 불완전한 렌더링을 막기 위해서 한번 더 렌더링한다.
• useEffect 사용시 Effect 클린업이 누락되어 발생한 버그를 찾기위해서 Effect를 한번 더 실행한다.
• 지원 중단된 API의 사용여부를 확인한다.
• 위의 작동들은 개발환경 전용이며, 상용 빌드에는 영향을 주지 않는다.

리액트 빌드

리액트 어플리케이션을 빌드할 때, npm run build 명령어를 실행하면 웹팩과 같은 번들러가 어플리케이션 코드를 번들링한다. 이 과정에서 불필요한 코드나 주석은 최적화 단계에서 제거된다. 자세한 과정을 살펴보면

1. 트리쉐이킹
   트리쉐이킹은 모듈 번들링 과정에서 사용되지 않는 코드를 제거하는 최적화 기법이다. 이로 인해서 실제로 사용하지 않는 함수, 변수 등이 최종 번들 파일에서 제외된다.

2. Uglify난독화 / Minify압축
   빌드 과정에서는 코드 압축 (Uglify/Minify)이 이루어지며, 이 과정에서 주석, 공백 및 불필요한 코드가 제거된다.

난독화

• js 코드 자체를 분석하기 어렵게 만드는 과정
• 난독화를 했다고 해서 보안 처리 없이 중요정보를 js에 직접 넣는 것은 매우 위험하다.
• 난독화의 단계를 높일 수록 루틴을 알아보기 어렵게 만들 수 있음.
• 변수, 함수명 등이 줄어서 용량이 감소하지만, 난독화 단계를 높일수록 코드를 해석하고 실행하는 속도가 느려질 수 있으므로, 프로젝트에 맞게 선택하여 적용한다.

코드압축 시

• 모든 들여쓰기와 공백이 제거되고, 전체코드가 한줄로 병합된다.

3. 환경변수
   리액트 어플리케이션에서는 process.env.NODE_ENV를 이용하여 개발모드와 프로덕션모드를 구분한다. npm run build는 보통 NODE_ENV를 production으로 설정하여 실행되며, 이 때 프로덕션 모드에 맞게 최적화가 진행된다.