JavaScript에서 window 객체는 현재 브라우저 창을 나타내며, 그 안에는 페이지 주소와 관련된 정보를 담고 있는 location 객체가 포함되어 있습니다. location 객체는 페이지 이동이나 URL 확인에 자주 사용되는데, 대표적인 속성과 메서드로는 href, replace(), assign()이 있습니다.
1. window.location.href
window.location.href는 현재 페이지의 전체 URL을 반환하는 속성입니다. 값을 읽으면 현재 문서의 URL을 얻을 수 있고, 새로운 URL을 할당하면 해당 페이지로 이동합니다. 이동 시 브라우저 히스토리에 기록이 남기 때문에 사용자가 '뒤로 가기' 버튼으로 이전 페이지로 돌아올 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 현재 페이지의 전체 URL을 확인할 수 있습니다.</p>
<button onclick = "display()">URL 확인</button>
<script>
function display() {
var res = location.href;
document.write(res);
}
</script>
</body>
</html>2. window.location.replace()
window.location.replace()는 현재 문서를 새로운 문서로 교체할 때 사용하는 메서드입니다. 가장 큰 특징은 페이지를 이동하더라도 브라우저 히스토리에 기록되지 않는다는 점입니다. 따라서 사용자가 '뒤로 가기' 버튼을 눌러도 이전 페이지로 돌아갈 수 없습니다. 로그인 후 이전 인증 페이지로의 복귀를 막고 싶을 때 유용하게 활용됩니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<button onclick = "display()">현재 문서 교체</button>
<script>
function display() {
location.replace("https://www.qries.com")
}
</script>
</body>
</html>3. window.location.assign()
window.location.assign()은 새로운 문서를 불러오고 싶을 때 사용하는 메서드입니다. 지정한 URL로 페이지를 이동하며, replace()와 달리 브라우저 히스토리에 기록이 남습니다. 즉, 사용자가 '뒤로 가기' 버튼을 누르면 이전 페이지로 정상적으로 되돌아갈 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<button onclick = "display()">새 문서 열기</button>
<script>
function display() {
location.assign("https://www.qries.com")
}
</script>
</body>
</html>세 가지 방법 비교 정리
| 구분 | 역할 | 히스토리 기록 |
|---|---|---|
location.href | 현재 URL 반환 및 페이지 이동 | 기록됨 (뒤로 가기 가능) |
location.assign() | 새 문서 로드 | 기록됨 (뒤로 가기 가능) |
location.replace() | 현재 문서 교체 | 기록 안 됨 (뒤로 가기 불가) |
정리하면, 단순히 URL을 확인하거나 일반적인 페이지 이동이 필요하다면 href나 assign()을 사용하고, 히스토리에 흔적을 남기지 않고 페이지를 전환해야 한다면 replace()를 사용하는 것이 좋습니다.