자바스크립트 "Navigation API"

JavaScript Navigation API는 브라우저의 탐색 기록을 조작할 수 있는 메서드 및 속성 집합을 제공합니다. 이 API를 사용하면 단일 페이지 내의 여러 페이지 또는 위치 사이를 프로그래밍 방식으로 탐색하고 브라우저의 뒤로 및 앞으로 버튼을 제어할 수 있습니다.

​

다음은 Navigation API를 사용하는 방법에 대한 몇 가지 예입니다.

​

1. 브라우저 기록에 새 항목 추가:

​

history.pushState({page: 1}, "Page 1", "/page1");

​

이 코드는 `{page: 1}` 상태 개체, "페이지 1" 제목 및 "/page1" URL을 사용하여 브라우저 기록에 새 항목을 추가합니다.

​

2. 페이지를 다시 로드하지 않고 현재 URL 변경:

​

history.replaceState({page: 2}, "Page 2", "/page2");

​

이 코드는 브라우저 기록의 현재 항목을 상태 객체 `{page: 2}`, 제목 "Page 2" 및 URL "/page2"로 바꿉니다. 이로 인해 페이지가 다시 로드되지 않습니다.

​

3. 새 URL로 이동:

​

window.location.href = "/page3";

​

이 코드는 브라우저를 URL "/page3"로 이동합니다. 이로 인해 페이지가 다시 로드됩니다.

​

4. 브라우저 기록에 대한 변경 사항 듣기:

​

window.addEventListener("popstate", function(event) {

console.log("State changed to:", event.state);

});

​

이 코드는 브라우저 기록에 이벤트 리스너를 추가하여 사용자가 뒤로 또는 앞으로 버튼을 클릭하거나 history.back() 또는 history.forward()가 호출될 때 리스너에 지정된 함수가 호출되도록 합니다. `event.state` 속성에는 `pushState()` 또는 `replaceState()`에 전달된 상태 개체가 포함되어 있습니다.

​

5. 브라우저 기록에서 앞뒤로 탐색:

​

history.back();

history.forward();

​

이러한 코드 스니펫은 기록에서 브라우저를 앞뒤로 탐색합니다.

​

전반적으로 Navigation API는 페이지를 새로 고칠 필요 없이 브라우저의 기록과 URL을 조작할 수 있는 동적 반응형 웹 애플리케이션을 만들 수 있는 강력한 도구입니다.