웹 브라우저에서 사용자 혹은 기능적으로 페이지로 이동시키는 기능은 필수적이고 가장 보편적으로 사용하는 기능입니다. JavaScript에서는 history.go(-1)을 통해 이를 쉽게 구현할 수 있습니다. history.go(-1)의 개념과 함께, 비슷한 동작을 하는 여러 JavaScript API들을 정리해봅니다.
1. history.go(-1)란?
history.go(-1);
- 브라우저의 히스토리 스택에서 이전 페이지로 이동
go(n)의n값에 따라 이동 방향 결정-1: 뒤로1: 앞으로0: 현재 페이지 새로고침
예시:
<button onclick="history.go(-1)">뒤로가기</button>
2. history.back() – 가장 직관적인 대안
history.back();
history.go(-1)과 기능적으로 동일- 브라우저에서 한 단계 뒤로 이동
- 가장 자주 쓰이는 방식 중 하나
예시:
<a href="javascript:history.back()">뒤로 가기</a>
3. history.forward()
history.forward();
- 앞으로 한 단계 이동 (
history.go(1)과 동일) - 사용자가 뒤로 갔다가 다시 앞으로 가는 기능을 사용할 수 있음
4. location.href = document.referrer
location.href = document.referrer;
- 이전 페이지의 URL을 가져와 현재 창에서 다시 열기
history.go(-1)과 달리 정확한 URL 기반 이동- 단, 일부 브라우저 보안 설정에 따라
document.referrer값이 없을 수도 있음
예시:
if (document.referrer) {
window.location.href = document.referrer;
} else {
alert("이전 페이지 정보가 없습니다.");
}
5.window.location.replace(document.referrer)
- 현재 페이지를 이전 페이지로 덮어쓰기
- 히스토리에 기록되지 않음 (뒤로가기를 누르면 이전 이전 페이지로 이동)
차이점 요약
| 기능 | 설명 | 히스토리 스택 반영 여부 |
|---|---|---|
history.go(-1) | 한 단계 뒤로 | O |
history.back() | 한 단계 뒤로 | O |
history.forward() | 앞으로 한 단계 | O |
location.href = referrer | 이전 페이지로 새 요청 | O |
location.replace(referrer) | 현재 페이지 덮고 이전 페이지로 이동 | X |
마무리
JavaScript에서는 history.go(-1), history.back(), document.referrer 등을 통해 사용자의 이전 페이지로의 이동을 다양하게 제어할 수 있습니다. 단순한 이동 외에도 상황에 따라 location.replace()처럼 히스토리에 남기지 않는 방식도 활용하면 더욱 유연한 사용자 흐름을 만들 수 있습니다.