JavaScript window.location으로 페이지를 다른 URL로 리디렉션하는 방법

URL을 클릭해 X 페이지에 접속하려고 했는데, 실제로는 전혀 다른 Y 페이지로 이동된 경험이 있으신가요? 이러한 현상은 페이지 리디렉션(Page Redirection) 때문에 발생합니다.

클라이언트 측에서 자바스크립트(JavaScript)를 활용하면 페이지 리디렉션을 아주 간단하게 구현할 수 있습니다. 사이트 방문자를 새 페이지로 자동으로 이동시키려면 문서의 head 섹션에 한 줄의 코드만 추가하면 됩니다.

window.location 리디렉션 예제

아래 예제 코드를 실행해 보면 window.location 객체를 사용해 HTML 페이지를 다른 주소로 리디렉션하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 버튼을 클릭하면 홈페이지로 이동하도록 구현했습니다.

<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>

window.location 리디렉션 방식 비교

window.location 객체에는 리디렉션을 수행하는 몇 가지 방법이 있으며, 상황에 따라 적절한 방식을 선택하는 것이 좋습니다.

window.location.assign(url): 지정한 URL로 이동하며 브라우저 히스토리에 기록되므로, 뒤로 가기 버튼으로 이전 페이지에 돌아올 수 있습니다.
window.location.replace(url): 지정한 URL로 이동하지만 히스토리에 기록되지 않아 뒤로 가기가 불가능합니다. 로그인 후 이전 인증 페이지로 돌아가지 않도록 처리할 때 유용합니다.
window.location.href = url: assign()과 동일하게 동작하며, 가장 널리 사용되는 간결한 방식입니다.

또한 자바스크립트 없이 서버 측에서 리디렉션하고 싶다면 HTTP 상태 코드 301(영구 이동) 또는 302(임시 이동)를 활용하는 방법도 고려할 수 있습니다.