React · Build

React 앱 빌드 산출물 읽기

React 앱 빌드는 개발 서버를 끄고 끝나는 단계가 아니라, 브라우저가 받을 HTML·JS·CSS·asset을 압축하고 캐시 가능한 파일명으로 만드는 과정이다.

01

환경 고정

운영 API 주소와 공개 환경 변수가 올바른 prefix로 설정됐는지 확인한다.

02

빌드 실행

번들러가 모듈 그래프를 분석해 JS, CSS, 이미지 산출물을 만든다.

03

산출물 점검

파일 크기, chunk 분리, source map 노출 여부를 확인한다.

04

호스팅 연결

SPA라면 모든 route가 index.html로 fallback되도록 서버를 설정한다.

index.html
앱 진입 문서 hash가 붙은 JS와 CSS를 참조
캐시는 짧게
assets
정적 산출물 content hash로 장기 캐시 가능
파일명 변경이 무효화 역할
env
빌드 시 값 VITE_ 또는 REACT_APP_처럼 공개 prefix가 필요
비밀키 금지
fallback
SPA 라우팅 /settings 새로고침도 index.html 반환
정적 호스트 rewrite 설정

비밀값 · 크기 · 라우트 점검

비밀값 브라우저 번들에 서버 비밀키가 들어가지 않는다.
크기 초기 chunk가 과도하게 커지지 않았는지 확인한다.
라우트 배포 후 깊은 URL 새로고침이 동작한다.
소스맵 운영 source map 공개 여부를 의도적으로 결정한다.