프로젝트에서 경우에 따라 이전 페이지로 이동시키는 기능이 필요할 때가 있다.
Vanilla JS로 프로젝트를 하면서 이 기능을 위해 사용한 방법을 정리하고자 한다.

history.go()

첫 번째 방법은 history.go() 메서드를 활용하는 것이다.
사용 방법은 아래와 같다.

history.go(-1); // 이전 페이지로 이동
history.go(-2); // 2 페이지 전으로 이동
history.go(-3); // 3 페이지 전으로 이동

인자로 원하는 숫자를 넣어서 사용하면 된다.

history.back()

굳이 숫자를 입력해서, 몇 페이지 전으로 돌아가는게 아니라면
history.back() 메서드를 사용해보자.

history.back(); // 이전 페이지로 이동

history.go(-1)과 동일한 기능을 담당하기 때문에, 편한걸 사용하면 될 것 같다.

document.referrer

이번에는 history 객체가 아니라, document 객체를 사용하는 방법이다.

const before = document.referrer; // 이전 페이지의 URI 정보

단, 주의해야 할 것이 있다.
앞서 살펴본 두 방법은 필자가 "이동"이라는 단어로 주석을 작성했지만,
여기서는 "정보"라는 단어를 사용했다.

즉, 이 기능은 이전 페이지의 URI 정보를 가져올 뿐, 그 어떤 동작도 하지 않는다.
따라서, 이렇게 얻은 URI를 직접 사용해줘야 한다.

window.location.href = before;

window.location.href에 이 값을 넣어 페이지를 직접 이동시켜줘야한다.

또한, URI 정보를 담고 있기 때문에,
쿼리 스트링이 불필요한 경우에는 문자열을 적절히 처리해서 URL만 뽑아내서 사용하도록 하자.

참고 자료

homzzang님 블로그
webisfree 게시글