HTML Location assign() 메서드 – 브라우저 히스토리를 유지하며 새 문서 불러오기

HTML Location assign() 메서드란?

HTML의 Location assign() 메서드는 현재 문서에 새로운 HTML 문서를 불러오는(로드하는) 자바스크립트 메서드입니다. 이 메서드의 가장 큰 특징은 브라우저의 문서 히스토리(document history)에서 현재 URL을 대체하지 않고 새 항목으로 추가한다는 점입니다. 따라서 페이지가 이동한 후에도 사용자가 브라우저의 '뒤로 가기' 버튼을 누르면 이전 페이지로 돌아올 수 있습니다.

참고로, 히스토리에 흔적을 남기지 않고 이동해야 하는 경우에는 location.replace(URL) 메서드를 사용하는 것이 좋습니다. 반대로 일반적인 페이지 이동이나 리디렉션 처리에는 assign()이 적합합니다.

문법(Syntax)

Location assign() 메서드의 기본 문법은 다음과 같습니다.

location.assign(URL)

URL 매개변수에는 이동하고자 하는 페이지 주소를 문자열 형태로 전달합니다.

예제 코드

버튼을 클릭하면 assign() 메서드를 통해 새 문서를 불러오는 간단한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 20px;
        width: 330px;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>HTML Location assign() Method Demo</h1>
<button class="btn" onclick="display()">Load Tutorialspoint</button>
<script>
    function display() {
        location.assign("https://tutorialspoint.com/");
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 그라데이션 배경 위에 버튼이 하나 표시된 화면을 볼 수 있습니다.

HTML Location assign() 메서드 – 브라우저 히스토리를 유지하며 새 문서 불러오기

여기서 "Load Tutorialspoint" 버튼을 클릭하면, 현재 문서가 그대로 유지되는 대신 해당 위치에 tutorialspoint 문서가 새로 로드됩니다.

HTML Location assign() 메서드 – 브라우저 히스토리를 유지하며 새 문서 불러오기

정리

Location assign() 메서드는 새 URL을 히스토리에 추가하면서 문서를 이동시키는 간단하면서도 유용한 방법입니다. 뒤로 가기 탐색을 지원해야 하는 일반적인 페이지 이동 상황이라면 assign()을, 히스토리를 남기고 싶지 않다면 replace()를 선택하는 것이 좋습니다.