주소는 바뀌는데 왜 새로고침이 안 될까? : SPA 라우팅

요즘 웹사이트(SPA)는 페이지를 이동해도 화면이 ‘깜빡’이지 않는다. 분명 주소창의 URL은 바뀌는데, 브라우저는 새로고침을 하지 않는다.

이건 단순한 최적화가 아니다. 브라우저의 기본 동작을 가로채고 있기 때문이다.

이 마법의 핵심은 History API에 있다. 브라우저를 속이는 History API 원래 주소창에 새로운 URL을 입력하면 브라우저는 서버에 요청을 보낸다.

"이 주소에 해당하는 페이지를 줘." 하지만 SPA는 이 흐름을 끊는다. history.pushState()를 사용하면 서버 요청 없이 주소창의 URL만 변경할 수 있다.

즉, URL은 바뀌었지만 페이지 이동은 일어나지 않는다 사용자 입장에서는 페이지가 이동한 것처럼 보이지만, 실제로는 자바스크립트가 화면의 일부(Component)만 교체하고 있을 뿐이다. "뒤로 가기"는 어떻게 감지할까?

문제는 여기서 시작된다. 우리가 URL을 직접 바꿨기 때문에, 브라우저의 “뒤로 가기”는 더 이상 자연스럽게 동작하지 않...