페이지 리디렉션이란?
어떤 URL을 클릭해서 X 페이지에 접속하려 했는데, 실제로는 내부적으로 Y라는 전혀 다른 페이지로 이동한 경험이 있으신가요? 이것은 바로 페이지 리디렉션(page redirection) 때문에 발생하는 현상입니다.
JavaScript를 활용하면 클라이언트 측에서 페이지 리디렉션을 아주 간단하게 구현할 수 있습니다. 사이트 방문자를 새로운 페이지로 이동시키려면 head 섹션에 단 한 줄의 코드만 추가하면 됩니다.
window.location을 활용한 리디렉션 예제
아래 코드를 실행하면 window.location을 사용해 다른 URL로 리디렉션하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 버튼을 클릭하면 홈페이지로 이동하도록 설정했습니다.
<html>
<head>
<script>
<!--
function Redirect() {
window.location.assign("https://www.tutorialspoint.com");
}
//-->
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 홈페이지로 이동합니다.</p>
<input type = "button" value="Redirect Me" onclick="Redirect();" />
</body>
</html>
코드 동작 원리
버튼을 클릭하면 Redirect() 함수가 호출되고, 그 안에서 window.location.assign() 메서드가 실행되어 지정된 URL로 페이지가 이동합니다. assign() 메서드는 새 문서를 로드하면서 브라우저 히스토리에 기록을 남기기 때문에, 사용자가 뒤로 가기 버튼을 눌러 원래 페이지로 돌아올 수 있다는 특징이 있습니다.
함께 알아두면 좋은 다른 리디렉션 방법
window.location 객체 외에도 JavaScript에서 페이지를 이동시키는 몇 가지 방법이 더 있습니다.
- window.location.href = "URL"; — 가장 널리 쓰이는 방식으로, assign()과 동일하게 동작하며 히스토리에 기록됩니다.
- window.location.replace("URL"); — 현재 페이지를 새 페이지로 대체하며, 히스토리에 기록되지 않아 뒤로 가기로 돌아올 수 없습니다. 로그인 후 이전 페이지로 되돌아가지 못하게 할 때 유용합니다.
- window.location.assign("URL"); — 위 예제에서 사용한 방식으로, 새 문서를 로드하고 히스토리를 유지합니다.
상황에 맞는 메서드를 선택하면 사용자 경험을 해치지 않으면서 자연스럽게 페이지를 전환할 수 있습니다.