웹 개발을 하다 보면 버튼 클릭 한 번으로 사용자를 이전 페이지로 되돌려 보내야 하는 경우가 자주 있습니다. 이럴 때 JavaScript의 history 객체를 활용하면 아주 간단하게 구현할 수 있습니다.
window.history.go(-1)란?
버튼 클릭 시 이전 페이지로 이동하려면 다음 코드를 사용합니다.
window.history.go(-1)
history.go(-1)는 브라우저의 히스토리 스택에서 한 단계 뒤로 이동하는 메서드입니다. 마치 브라우저의 '뒤로 가기' 버튼을 누른 것과 동일한 효과를 냅니다. 숫자를 변경하면 원하는 만큼 여러 단계를 이동할 수도 있습니다. 예를 들어 history.go(-2)는 두 단계 전의 페이지로 이동합니다.
전체 예제 코드
아래는 HTML 버튼에 onclick 이벤트를 적용하여 이전 페이지로 이동하는 완전한 예제입니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>이전 페이지로 이동하기</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> </style> </head> <body> <input action="gotoPreviousPage" onclick="window.history.go(-1); return false;" type="submit" value="버튼을 클릭하면 이전 페이지로 이동합니다" /> <script> </script> </body> </html>
코드에서 핵심 부분은 onclick 속성입니다. 클릭 이벤트가 발생하면 window.history.go(-1)이 실행되어 브라우저 히스토리상 바로 앞 페이지로 이동하고, return false;는 폼 제출 등 기본 동작이 추가로 실행되지 않도록 막아줍니다.
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 후, 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기를 사용 중이라면 'Open with Live Server' 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면, 저장한 HTML 파일을 브라우저에서 직접 열어도 동일하게 테스트할 수 있습니다.
실행 결과
위 코드를 실행하면 화면에 다음과 같은 버튼이 나타납니다.
'버튼을 클릭하면 이전 페이지로 이동합니다' 버튼을 누르면, 아래 스크린샷처럼 브라우저가 자동으로 이전 페이지로 돌아갑니다.
참고: history.back()과의 차이
비슷한 기능을 하는 메서드로 window.history.back()이 있습니다. back()은 정확히 한 단계만 뒤로 가며, 내부적으로 go(-1)과 동일하게 동작합니다. 반면 go(n)은 인자 값에 따라 여러 단계를 자유롭게 이동할 수 있어 더 유연하게 활용할 수 있습니다.