SPA 라우팅 기초

왜 새로고침에서 404가 날까?

브라우저 새로고침은 서버에 현재 경로를 직접 요청합니다. 서버가 해당 파일을 모르면 404를 반환합니다.

해결 방식

1. 정적 파일이 없는 경로는 index.html로 fallback
2. 프론트 라우터가 경로를 받아 올바른 화면 렌더링

Cloudflare Pages 예시

/* /index.html 200

Nginx 예시

location / {
  try_files $uri $uri/ /index.html;
}

60분 챌린지 연결 지점

• 배포 단계: 라우팅 정책 반영
• SPA 404 트러블슈팅: 플랫폼별 상세 설정

초심자 실수 TOP 3

• 로컬 개발 서버에서는 되는데 배포 서버 fallback 누락
• 정적 파일 경로(/assets)까지 fallback에 걸어 리소스 깨짐
• 서버 설정 수정 후 캐시 때문에 이전 동작만 확인