window.location.href vs window.location.replace 비교

 

로그인 한 유저가 세션이 만료가 되었을 때, 새로 로그인을 할 수 있도록 리다이렉트 처리를 해야한다.

 

레거시 코드에서는 페이지 이동을 할 때 마다 세션을 체크하고 있으므로 세션이 만료가 되면 강제로 새로고침을 하여 새로 고침에 의해 로그인 페이지로 강제 이동 시키고 있었다. (보안 상의 이유로...)

 window.location.href = window.location.href

 

자바스크립트에서 현재 페이지의 URL을 다시 로드하는 코드로 대체로 페이지를 강제로 새로 고침하고 싶을 때 사용될 수 있다.

 

그렇다면 브라우저에서 자바스크립트를 사용하여 페이지 이동하는 방법들을 살펴보자.





 

window.location.href

 

페이지의 URL을 설정하거나 변경할 수 있다.

// 다른 페이지로 이동
window.location.href = 'https://example.com';

// 페이지 새로 고침
window.location.href = window.location.href;
window.location.href = ''

 

window.location.href는 일반적인 페이지 이동시 사용하면 된다.

 

또한, 사용자가 뒤로가기를 통해 다시 접근 할 수 있게 하거나 다른 사람에게 이전 페이지를 허용하고 싶을 때 사용한다.

 

window.location.replace()

 

현재 페이지를 다른 URL로 대체하여 이동한다.

window.location.replace('https://example.com');

 

window.location.replace()는 replace의 뜻 그대로 현재 페이지를 대체하여 새로운 URL로 이동시킨다. 히스토리에 기록을 남기고 싶지 않을 때 사용하면 된다.

 

• 뒤로 가기를 방지해야 하는 경우에 사용 할 수 있다. 예를 들어, 로그인 후 자동 리다이렉션 할 때 사용한다.
• 세션이나 임시 리다이렉션하는 경우에 사용 할 수 있다. 예를 들어, 로그인 후 사용자가 로그인 페이지로 다시 돌아가지 않도록 하거나, 한 번만 이동하고 뒤로 가기를 막아야 할 때이다.
• 결제 페이지의 경우에 보안상의 이유로 사용 할 수 있다. 예를 들어, 결제 완료 후 사용자가 결제 페이지로 다시 돌아가지 않도록 할 수 있다.

 

그 외 페이지와 관련된 방법들

window.location.assign()

 

URL을 지정하여 해당 페이지로 이동한다.

window.location.assign('https://example.com');

 

window.location.href와 유사하지만, 메서드를 사용한다는 것만 다르다.

 

window.location.reload()

 

현재 페이지를 새로 고침한다.

window.location.reload();

 

사용자는 페이지가 새로 로드된 것을 경험하게 되며, 서버에서 최신 데이터를 다시 받아온다. (우리가 알고 있는 일반적인 새로고침)