페이지 A의 버튼 클릭 → 페이지 B로 가는 경우에, 페이지 B로 갔을 때 페이지 A가 스택에 쌓이게 된다. 그래서 페이지 B에서 뒤로가기를 하면 페이지 A로 가게 된다.

특정 조건에서 A에서 B로의 진입을 서버에서 막고 얼럿 메세지를 내려주는 경우에, B에서는 얼럿을 띄워주고 이전 페이지로 돌아가도록 다음과 같이 에러 처리를 할 수 있다.

try {
	// ...
}.catch((e) => {
	alert(e)
	location.href = "/A"
}).finally {
	// ...
}

하지만 위의 방식으로 코드를 작성하니, 진입 시도 후 얼럿의 확인 버튼을 여러번 클릭했을 때 페이지가 무한 로딩되는 에러가 발생했다.

location.href를 사용한 아래 코드를

location.href = "/A"

location.replace로 아래처럼 변경했더니

location.replace("/A")

히스토리를 남기지 않아 무한로딩되는 이슈가 해결되었다.

Location

MDN 문서 에 따르면, Location 인터페이스는 객체가 연결된 장소(URL)를 표현한다고 한다. Document와 Window 인터페이스가 이런 Location을 가지고 있는데, 각각 Document.location과 Window.location으로 접근할 수 있다.

location.href 와 location.replace 는 완전히 대비되는 개념이라고 할 순 없다. href는 location의 속성이고 replace는 location의 메서드이기 때문이다. 그래서 사용하는 방법도 위와 같이 다르다.

location.href 에 주어지는 URL은 다음으로 안내된다.

반면, location.replace 는 현재 리소스를 주어진 URL로 교체한다. 현재 페이지는 히스토리에 남게 되지 않고, 뒤로가기로 이전 페이지로 돌아갈 수 없게 된다.

마치며

location.href 를 사용해서 다음 URL로 연결하곤 하는데, 상황에 따라 이전 페이지로 갈 필요가 없는 경우에는 location.replace() 메서드를 사용해서 현재 페이지를 파라미터로 제공된 URL로 교체해서 히스토리를 남기지 않을 수 있다.