페이지를 다시 로드하지 않고 JavaScript에서 URL 수정

JavaScript를 사용하여 동적으로 URL 변경

최신 웹 애플리케이션으로 작업할 때 페이지를 다시 로드하지 않고 URL을 수정해야 할 수도 있습니다. 이는 원활한 사용자 경험을 만드는 데 특히 유용할 수 있습니다.

이 가이드에서는 해시(#) 기호 앞 부분에 액세스할 수 있는 기술을 포함하여 도메인 뒤의 URL 부분을 변경하는 방법을 살펴보겠습니다. 이렇게 하면 원하는 URL 수정을 달성하면서 교차 도메인 정책을 준수할 수 있습니다.

JavaScript의 URL 수정에 대한 자세한 설명

첫 번째 스크립트는 history.pushState() History API의 일부인 메서드입니다. 이 명령을 사용하면 개발자는 브라우저의 세션 기록 스택에 새 항목을 추가하여 페이지를 다시 로드하지 않고도 주소 표시줄에 표시된 URL을 효과적으로 변경할 수 있습니다. 스크립트에서는 const newURL = "/page2.php"; 새로운 경로를 설정하고 history.pushState(null, "", newURL); URL을 이 새 경로로 변경합니다. 포장해서 삼 다음과 같은 함수의 명령 function changeURL(newPath), 필요에 따라 URL을 동적으로 업데이트할 수 있습니다. 이 기술은 전체 페이지를 다시 로드하지 않고 콘텐츠가 동적으로 변경되는 단일 페이지 애플리케이션(SPA)에 특히 유용합니다.

두 번째 스크립트는 다음을 사용하여 URL 해시를 변경하는 방법을 다룹니다. window.location.hash. 이 속성은 해시 기호(#) 뒤에 오는 URL의 앵커 부분을 가져오거나 설정합니다. 설정으로 const hashValue = "newSection"; 그리고 window.location.hash = hashValue;, 페이지를 다시 로드하지 않고도 URL 해시가 #newSection으로 변경됩니다. 이 접근 방식은 동일한 페이지 내에서 탐색하거나 문서 내의 특정 섹션에 연결하는 데 유용합니다. 추가적으로, 기능 function updateHash(newHash) 이 기능을 캡슐화하여 URL의 해시 부분을 동적으로 쉽게 변경할 수 있습니다. 두 스크립트 모두 불필요한 페이지 다시 로드를 방지하여 URL을 수정하고 사용자 경험을 향상시키는 원활한 방법을 제공합니다.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

다시 로드하지 않고 URL을 수정하는 추가 방법 탐색

페이지를 다시 로드하지 않고 URL을 수정하는 또 다른 측면은 replaceState() History API의 메서드입니다. 하는 동안 pushState() 새로운 기록 항목을 추가하고, replaceState() 현재 기록 항목을 수정합니다. 이는 여러 상태로 인해 사용자 기록을 복잡하게 만들지 않고 URL을 변경하려는 경우 특히 유용할 수 있습니다. 예를 들어 콘텐츠가 자주 변경되는 단일 페이지 애플리케이션이 있는 경우 각 변경 사항을 기록에 추가하지 않고 현재 상태를 반영하도록 URL을 업데이트할 수 있습니다. 이렇게 하면 뒤로 버튼 기능이 깔끔하고 사용자 친화적으로 유지됩니다.

사용 replaceState(), 다음과 유사한 함수를 작성할 수 있습니다. changeURL() 하지만 대신 전화해 history.replaceState() 그 안에. 예를 들어, function replaceURL(newPath) 활용할 수 있다 history.replaceState(null, "", newPath); URL을 업데이트합니다. 이 기술은 불필요한 기록 항목을 생성하지 않고 URL을 애플리케이션 상태와 동기화하여 사용자 경험을 향상시키는 데 유용합니다. 또한 특히 동적 웹 애플리케이션에서 브라우저 기록을 관리하는 보다 효율적인 방법을 제공합니다.