JavaScript - History API

안녕하세요, 초보 프로그래머 여러분! 오늘 우리는 시간 여행을 떠납니다... 네, 브라우저 시간을 탐험하는 여행이죠! JavaScript History API의 fascineting 세계로 들어가 볼 거예요. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 친절한 가이드로, 단계별로 설명해 드릴게요. 그러니 안전벨트를 고정하고, 시작해 보세요!

Web History API

최근 여행의 사진 앨범을 넘기는 것을 상상해 보세요. 이전 페이지로 돌아가거나 앞으로 넘어갈 수 있습니다. Web History API는 비슷하게 작동하지만, 웹 브라우징 경험에 대해 작동합니다. JavaScript가 브라우저의 역사와 상호작용할 수 있게 해주어, 뒤로 가기와 앞으로 가는 导航을 제어할 수 있습니다.

이를 브라우저 페이지의 타임머신으로 생각해 보세요. 멋지죠?

JavaScript History API 사용법?

History API를 사용하는 것은 브라우저의 역사를 컨트롤하는 리모콘을 가지고 있는 것과 같습니다. 간단한 단계로 나누어 설명해 보겠습니다:

API에 접근하기
역사를 导航하기
새로운 항목을 역사에 추가하기

코드로 들어가기 전에 작은 이야기를 공유하겠습니다. 처음 이 내용을 학생들에게 가르쳤을 때, 책에 책갈피를 달는 것에 대한 비유를 사용했습니다. History API는 페이지를 넘기는(導航), 책갈피를 추가하는(새로운 상태 추가), 심지어 페이지를 다시 쓰는(현재 상태 수정) 것을 가능하게 합니다. 이 비유가 학생들에게 개념을 빠르게 이해하게 도와주었고, 여러분에게도 도움이 되길 바랍니다!

문법

이제 History API의 기본 문법을 살펴보겠습니다. 걱정하지 마세요; 각 부분을 자세히 설명해 드릴게요.

// History 객체에 접근하기
window.history

// 사용할 수 있는 메서드
history.back()
history.forward()
history.go()
history.pushState()
history.replaceState()

이제 하나씩 나누어 설명해 보겠습니다:

메서드 표

메서드	설명
back()	역사에서 이전 페이지로 로드
forward()	역사에서 다음 페이지로 로드
go()	역사에서 특정 페이지로 로드
pushState()	역사에 새로운 상태 추가
replaceState()	현재 역사 항목 수정

역사 목록에서 이전 페이지 로드

photo album의 이전 페이지를 넘기는 것을 언급했을 때, history.back()이 웹 페이지에서 정확히 그 역할을 합니다. 다음과 같이 사용합니다:

function goBack() {
window.history.back();
}

页面上有一个"Back"按钮，可以这样使用这个函数：

<button onclick="goBack()">Go Back</button>

사용자가 이 버튼을 클릭하면, 브라우저의 뒤로 가기 버튼을 누른 것과 같습니다. 마법이죠?

역사 목록에서 다음 페이지 로드

이제 앞으로 가고 싶다면? history.forward()를 사용하면 됩니다:

function goForward() {
window.history.forward();
}

"Forward" 버튼을 사용할 수 있습니다:

<button onclick="goForward()">Go Forward</button>

이 버튼을 클릭하면 브라우저의 앞으로 가기 버튼을 누른 것과 같습니다. 상상의 사진 앨범에서 앞으로 넘겨갈 때와 같습니다.

역사 목록의 길이 확인

브라우저의 역사에 몇 개의 페이지가 있는지 궁금하다면, history.length 속성을 사용하면 됩니다:

console.log(history.length);

이를 통해 현재 세션의 역사에 있는 페이지 수를 출력할 수 있습니다. 사진 앨범에 몇 장의 사진이 있는지 세는 것과 같습니다.

이를 페이지에 표시하는 재미있는 방법은 다음과 같습니다:

function showHistoryLength() {
document.getElementById('historyLength').innerHTML = 'You have ' + history.length + ' pages in your history.';
}

<button onclick="showHistoryLength()">Check History Length</button>
<p id="historyLength"></p>

이제 History API의 좀 더 고급 기능을 살펴보겠습니다.

역사에 새로운 항목 추가

occasionally, you might want to add new "pages" to the history without actually loading a new page. That's where pushState() comes in handy:

function addToHistory(state, title, url) {
history.pushState(state, title, url);
}

// Usage
addToHistory({ page: 'home' }, 'Home Page', '/home');

이는 역사에 새로운 항목을 추가합니다. 사진 앨범에 새로운 사진을 추가하는 것과 같지만, 실제로 새로운 사진을 찍지는 않습니다!

현재 역사 항목 수정

현재 항목을 변경하고 싶다면? replaceState()를 사용하면 됩니다:

function updateCurrentState(state, title, url) {
history.replaceState(state, title, url);
}

// Usage
updateCurrentState({ page: 'updated home' }, 'Updated Home Page', '/updated-home');

이는 현재 사진 앨범의 캡션을 수정하는 것과 같습니다.

역사 변경을 듣기

마지막으로, popstate 이벤트를 사용하여 역사의 변경을 듣을 수 있습니다:

window.addEventListener('popstate', function(event) {
console.log('Navigation occurred');
console.log(event.state);
});

이는 친구가 사진 앨범의 페이지를 넘길 때마다 알려주는 것과 같습니다.

그렇게 해서, JavaScript History API를 통해 기본 导航에서 역사 항목 추가 및 수정까지 탐험했습니다. 연습이 완벽을 만듭니다. 이 메서드들을 웹 프로젝트에 적용해 보세요, 그러면 곧 브라우저 역사를 마스터하게 될 것입니다!

이 튜토리얼이 유용하고, 심지어 조금은 재미있게도 되길 바랍니다. 계속 코딩하고, 배우고, 여행을 즐기세요. 결국, 웹 개발에서 우리는 모두 자신의 방식으로 시간 여행자이니까요!

Credits: Image by storyset