웹 개발을 하다 보면 사용자를 다른 페이지로 자동으로 이동시켜야 하는 경우가 자주 발생합니다. 예를 들어 로그인 후 대시보드로 이동하거나, 오래된 URL을 새 주소로 연결할 때가 그렇습니다. 자바스크립트에서는 window.location 객체를 사용하여 간단하게 페이지 리디렉션을 구현할 수 있습니다.
window.location 기본 사용법
가장 기본적인 방법은 window.location에 이동하고자 하는 웹사이트 주소(URL)를 할당하는 것입니다.
<html> <body> <p>다른 웹사이트로 리디렉션 중입니다</p> <script> window.location = "https://www.qries.com"; </script> <p>이 페이지는 Qries.com으로 이동합니다</p> </body> </html>
스크립트가 실행되는 즉시 브라우저는 지정된 URL로 이동합니다. window.location은 전역 객체이므로 window.를 생략하고 location = "URL" 형태로 작성해도 동일하게 동작합니다.
다양한 리디렉션 방법
1. location.href 사용
location.href는 가장 널리 쓰이는 방식으로, 위의 기본 할당 방식과 결과가 같습니다.
window.location.href = "https://www.example.com";
2. location.replace() 사용
replace() 메서드는 현재 페이지를 새 페이지로 교체하며, 브라우저 히스토리에 이전 페이지를 남기지 않습니다. 따라서 사용자가 '뒤로 가기' 버튼을 눌러도 원래 페이지로 돌아올 수 없습니다.
window.location.replace("https://www.example.com");3. location.assign() 사용
assign() 메서드는 새 페이지로 이동하면서 히스토리에 기록을 남기므로, 사용자가 '뒤로 가기'로 이전 페이지에 돌아올 수 있습니다.
window.location.assign("https://www.example.com");어떤 방법을 선택해야 할까?
일반적인 페이지 이동에는 location.href나 assign()이 적합합니다. 반면, 결제 완료 후 뒤로 가기를 통해 중복 제출을 방지하고 싶은 경우처럼 히스토리를 남기고 싶지 않다면 replace()를 사용하는 것이 좋습니다. 상황에 맞는 방법을 선택하면 더 안전하고 직관적인 사용자 경험을 제공할 수 있습니다.