이슈 (어떤 문제가 있었죠?)

Netlify에 배포하고 곧 이어 백엔드로부터 들어온 요청

netlify의 404 페이지

그렇습니다. 현재 우리 클라이언트는 메인페이지를 제외하면 새로고침을 했을 때 404에러가 뜨는 구조적 한계를 안고 있습니다. 이 문제를 해결해봅시다.

시도

먼저 우리의 현재 상태를 바닥부터 점검해 보겠습니다.

웹사이트는 단순히 index.html일 뿐이다

배경 지식으로 웹사이트를 배포하는 방법들을 살펴봅시다.

웹페이지가 클라이언트에게 도달하기까지의 구조는 다음과 같습니다.

많이 생략하자면 index.html 을 서빙하는 웹 서버가 존재하며 웹 서버 뒤로는 클라이언트는 알 수 없는 심연이 연결되어 있습니다. 심연에서 뭐가 일어나든 결국 웹서버는 유저에게 서빙할 index.html 을 만들게 되고 index.html 이 브라우저에 도착하면 렌더링이 일어나며 비로소 화면이 보이게 됩니다.

그렇다면 여러 페이지를 가진 웹서비스가 있다면 각 페이지들은 어떻게 구현할 수 있을까요? 현재까지는 다음 3가지의 방법이 사용되고 있습니다. (물론 이들을 섞어 사용하기도 합니다)

1. 다른 경로로 접근하면 그에 해당하는 다른 index.html을 미리 들고 있다가 반환한다.
2. 다른 경로로 접근하면 그에 해당하는 다른 index.html을 생성해 반환한다.
3. 다른 경로에 접근하면 실제로 접근하지 않고 JS로 페이지를 그린다.