웹 관련해서 질문을 보다보면 위와 같은 질문이 꽤나 자주 보이는데.

리액트를 배우고 프로젝트를 실행보다가 이런 문제를 겪고 질문을 하는 듯 하다.

원인

리액트뿐만 아니라 Vue나 Svelte같은 SPA에 대한 특성을 놓치고 있기 때문에 이러한 이슈에 대해서 당황하게 되는 것으로 보인다.

SPA는 Single Page Application이다.

페이지의 레이아웃이 바뀌더라도 해당 부분만 새롭게 교체해주는 것이며 페이지를 새롭게 로드한다던가 하는 일은 발생하지 않는다.

아무리 react-route 같은 것을 사용해도 변하지 않는 사실이며 히스토리를 기반으로 주소가 바뀌어서 페이지가 이동한 것처럼 보여줄 뿐이지 실제로 페이지를 완전히 새로고침한다거나 하는 일은 일어나지 않는다.

예시

바닐라 웹 페이지 예시

React 같은 것을 사용하지 않고 기본적인 웹 페이지를 작성한다고 가정해보자.

두 경로(파일)가 있다.

index.html
new.html

간단한 시나리오로 index.html로 처음 접속한 뒤 new.html로 이동하는 a태그를 클릭하여 페이지를 옮기는 것을 생각해보자.

그러면 브라우저에서 다음 요청을 보내고 응답을 받을 것이다.

GET /index.html 200
GET /new.html 200

완전히 페이지를 이동한 것이므로 서버에서 new.html을 받아와서 보여준다.

이어서 /new.html로 바로 접속하는 시나리오를 생각해보자.

GET /new.html 200

당연하게도 정상적으로 접근이 될 것 이다.

SPA 예시

만약 SPA라면 어떨까?

index.html
src.js

진입할 페이지인 index.html이 있을 것이고 빌드된 자바스크립트 파일이 있을 것이다.

기타 라이브러리 같은 것은 예시이므로 생략하고 간략하게 살펴보자.

이번에도 같은 시나리오로 index.html로 접속하고 new.html을 라우팅기능을 이용해서 처리해놓았다.

GET /index.html 200
GET /src.js 200

이러한 결과가 나올 것 이다.

실제로 요청이 발생하는 것이 아닌 클라이언트에서 새롭게 그려준것에 불과하기 때문이다.

그렇다면 여기서 new.html로 처음 접속하는 시나리오를 생각해보자.

GET /new.html 404

/new.html이라는 파일은 실존하지 않으므로 파일을 찾을 수 없다.

이제 맨 처음의 질문이 무엇이 문제인지 감이 올 것이다.

해결

1. 웹 서버에서 라우팅

몹시 간단하게도 라우팅한 모든 경로에 대해서 index.html을 반환하면 해결되는 문제이다.

웹 서버에서든 백엔드에서든 처리할 서버단에서 라우팅한 대상 경로로 들어오는 요청에 대해서 index.html 파일을 반환해주면 해결된다.

2. SSG

SSG(Static Site Generation)는 모든 라우팅 경로에 대해서 미리 정적파일로 생성 해놓는 방식이다.

빌드 당시에 모든 경로에 대해서 미리 생성해놓고 클라이언트에 이를 보내주는 방식으로 검색엔진의 검색이나 속도측면의 사용자 경험 등을 위해서 사용한다.