자바스크립트로 웹페이지 리디렉션하기: location.href vs location.replace()

웹페이지를 다른 주소로 이동시키는 리디렉션은 여러 가지 방식으로 구현할 수 있습니다. HTML의 meta 태그를 활용한 클라이언트 측 방식과 HTTP 응답 헤더를 사용하는 서버 측 방식이 대표적입니다. 이번 글에서는 그중에서도 자바스크립트(JavaScript)를 사용해 웹페이지를 리디렉션하는 방법을 예제 코드와 함께 자세히 살펴보겠습니다.

자바스크립트 리디렉션의 두 가지 방법

자바스크립트로 페이지를 리디렉션하는 방법은 크게 두 가지이며, 두 방법 모두 window 객체에 포함된 location 객체를 활용합니다.

1. location.href 사용하기

첫 번째 방법은 location 객체의 href 속성을 이용하는 것입니다. 방법은 매우 간단합니다. 이동하고 싶은 URL을 location.href에 할당하기만 하면 됩니다. 아래 예제는 페이지가 로드될 때 실행되는 함수 안에서 리디렉션을 처리하는 코드입니다.

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=handleRedirect("https://www.careerkarma.com/blog/html")>
     You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
 </body>
 <script>
   const handleRedirect = (url) => {
     location.href = url;
   }
 </script>
</html>

문서 하단, body 태그 바로 앞에 script 태그를 추가했습니다. 이곳이 자바스크립트 코드가 들어가는 위치입니다. handleRedirect 함수는 url이라는 매개변수를 하나 받아, 그 값을 location.href에 할당합니다.

body 태그에는 onload 이벤트가 설정되어 있습니다. onload 이벤트는 지정된 자바스크립트 함수를 실행하며, 여기서는 이동할 URL을 인수로 전달했습니다. 결과적으로 페이지가 로드되는 즉시 Career Karma 블로그의 HTML 관련 페이지로 이동하게 됩니다.

setTimeout으로 지연 시간 추가하기

리디렉션이 실행되기 전에 잠시 머무는 시간을 두고 싶다면 setTimeout 함수를 활용하면 됩니다. 사용 방법은 다음과 같습니다.

const handleRedirect = (url) => {
     setTimeout(() => {
       location.href = url;
     }, 2000);
   }

나머지 코드는 모두 동일합니다. 위 예제에서는 2000밀리초, 즉 2초 후에 리디렉션이 실행됩니다.

location.href 방식의 중요한 특징 하나는, 원래 페이지가 브라우저의 히스토리(history) 스택에 추가된다는 점입니다. 따라서 사용자가 브라우저의 '뒤로 가기' 버튼을 누르면 이전 페이지로 돌아갈 수 있습니다. 만약 히스토리를 남기지 않고 현재 URL을 통째로 교체하고 싶다면, 다음에 소개할 replace 메서드를 사용하는 것이 좋습니다.

2. location.replace() 사용하기

앞서 소개한 방법이 location 객체의 속성(property)에 새 URL을 할당하는 것이라면, location.replace()는 메서드(method)입니다. 이 메서드는 기존 URL을 지정한 URL로 대체(replace)합니다.

replace()는 원래 URL을 브라우저 히스토리 스택에 저장하지 않습니다. 즉, 현재 페이지가 새 URL로 직접 교체되기 때문에 '뒤로 가기' 버튼으로 이전 페이지로 되돌아갈 수 없습니다. 사용 방법은 다음과 같습니다.

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=location.replace("https://www.careerkarma.com/blog/html")>
     You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
 </body>
</html>

코드에서 볼 수 있듯이, 한 줄짜리 리디렉션에는 script 태그조차 필요하지 않습니다. 문서가 로드되면 location.replace() 메서드가 실행되어 괄호 안에 지정된 사이트로 바로 이동합니다.

마치며: 어떤 방법을 선택해야 할까?

두 방식의 차이를 간단히 정리하면 다음과 같습니다.

location.href: 히스토리에 기록이 남아 뒤로 가기가 가능. 일반적인 페이지 이동에 적합.
location.replace(): 히스토리를 덮어씀. 로그인 후 리디렉션처럼 이전 페이지로 돌아갈 필요가 없는 경우에 유용.

참고로 location.assign(url) 메서드는 location.href에 값을 할당하는 것과 거의 동일하게 동작하며, 역시 히스토리에 기록을 남깁니다.

이제 자바스크립트를 사용해 새로운 웹페이지로 리디렉션하는 두 가지 방법을 모두 익혔습니다. 상황에 맞게 href와 replace()를 적절히 선택해 활용해 보세요!