개발자가 React 앱을 정적 호스팅에 배포했을 때 빈 화면이 표시되는 문제를 격음

Context

React Router는 기본적으로 서버 사이드 라우팅을 가정하며, BrowserRouter가 경로 처리 시 현재 도메인 기준 상대 경로를 사용한다. 정적 호스팅 환경에서는 서버가 경로 요청을 처리하지 않으므로, index.html에서 모든 경로를 직접 해결해야 한다.

Technical Solution

• BrowserRouter에 basename prop을 추가하여 배포 경로 기준점을 설정함
• package.json에 homepage 필드를 정확한 배포 URL로 설정함
• npm run build && serve build 명령어로 프로덕션 빌드를 로컬에서 사전 테스트함

Impact

없음

Key Takeaway

프로덕션 환경은 개발 환경과 실행 컨텍스트가 다르므로, 배포 전 반드시 대상 환경의 제약 조건을 확인해야 한다.