제가 개인적으로 사이트를 만들었는데 새로고침 할 때 마다 404에러가 뜨는 문제가 생겼습니다.
한번도 이런 적이 없어 뭐가 문제인지 찾아보았는데 알고보니 라우터에 관한 문제였습니다.
리액트 라우터에서는 두 가지 라우터를 제공합니다. BrowserRouter와 HashRouter입니다.
브라우저 라우터 (Browser Router)
BrowserRouter는 HTML5의 History API를 이용해서 UI를 업데이트합니다. History API를 사용하면 웹 페이지를 다시 로드하지 않고 URL을 업데이트할 수 있습니다. 예를 들어, 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 브라우저는 이전 페이지로 돌아가지만 페이지를 다시 로드하지 않습니다.
BrowserRouter는 서버에서 URL을 요청할 때, 서버는 어떤 페이지도 찾을 수 없다는 404 Not Found 오류를 보내야 합니다. 그 이유는 BrowserRouter는 클라이언트 측에서만 작동하기 때문입니다. 따라서 서버 측에서 모든 요청에 대해 항상 index.html 파일을 반환하도록 설정해야 합니다. 서버가 미리 렌더링된 초기페이지를 반환할 수 있어서 SSR에 이용하기 알맞습니다.
BrowserRouter를 사용하면 URL에서 해시(#) 기호가 제거됩니다. 그래서 URL 이 깔끔해지고 SEO 에 친화적입니다.
HashRouter
HashRouter는 URL의 해시(#) 기호를 이용해서 UI를 업데이트합니다. 해시(#) 기호는 URL에서 경로와 쿼리 문자열을 구분하는 문자입니다. 예를 들어, localhost:3000/#/home과 같은 URL을 가집니다. 서버측 라우팅 구성이 필요 없고 히스토리 API 없이도 구형 브라우저를 포함한 거의 모든 브라우저에서 작동합니다. 즉 새로고침을 해도 오류가 나지 않습니다. 하지만 SEO에 좋지 않고 SSR에 적합하지 않습니다.
즉, 서버가 따로 없고 개인 프로젝트에는 HashRouter가 적합하고 서버가 있거나 SSR, SEO에 적합한 건 BrowserRouter 입니다.
