자바스크립트 "History API"

History API는 개발자가 실제로 전체 페이지를 요청하지 않고도 브라우저 기록을 조작하고 사용자를 다른 페이지로 이동할 수 있도록 하는 JavaScript의 기능입니다. 이것은 단일 페이지 응용 프로그램을 만들거나 더 복잡한 탐색 체계를 구현하는 데 유용할 수 있습니다.

​

다음은 History API를 사용하여 브라우저의 기록에 새 항목을 추가하고 전체 페이지 요청 없이 새 URL로 이동하는 방법의 예입니다.

​

// Push a new state to the browser's history

history.pushState({page: 'home'}, 'Home', '/home');

​

// Update the page content

document.querySelector('h1').textContent = 'Welcome to the Home page';

​

// Add an event listener to handle navigation using the back button

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

if (event.state.page === 'home') {

document.querySelector('h1').textContent = 'Welcome to the Home page';

} else if (event.state.page === 'about') {

document.querySelector('h1').textContent = 'Learn more About Us';

}

});

​

// Navigate to a new URL without making a full page request

history.pushState({page: 'about'}, 'About Us', '/about');

document.querySelector('h1').textContent = 'Learn more About Us';

​

이 예제에서는 먼저 `history.pushState()`를 사용하여 상태 개체 `{page: 'home'}` 및 제목 'Home'으로 브라우저의 기록에 새 항목을 추가하고 URL '/home'으로 이동합니다. 그런 다음 환영 메시지를 표시하도록 페이지 콘텐츠를 업데이트합니다.

​

또한 뒤로 버튼을 사용하여 탐색을 처리하는 이벤트 리스너를 추가합니다. 사용자가 뒤로 버튼을 클릭하면 `popstate` 이벤트가 발생하고 `event.state` 객체를 확인하여 사용자가 이전에 어느 페이지에 있었는지 확인할 수 있습니다. 이에 따라 페이지 콘텐츠를 업데이트합니다.

​

마지막으로 `history.pushState()`를 다시 사용하여 상태 개체 `{page: 'about'}` 및 제목 'About Us'로 브라우저 기록에 새 항목을 추가하고 URL '/about'으로 이동합니다. 우리 회사에 대한 정보를 표시하기 위해 페이지 콘텐츠를 다시 업데이트합니다.

​

History API는 대부분의 최신 브라우저에서 지원되지만 다른 브라우저에서 구현되는 방식에는 약간의 차이가 있습니다. 호환성을 보장하기 위해 여러 브라우저에서 코드를 테스트하는 것이 중요합니다.