ChatGPT가 알려주는 window.history

기술이 된 상상/TIL

by Indigo_Pure 2024. 8. 8. 17:37

728x90

window.history

브라우저의 세션 기록 스택을 조작할 수 있는 API를 제공합니다. 이를 통해 사용자는 브라우저의 뒤로, 앞으로 가기 기능을 제어하고, 현재 URL을 변경하지 않고도 히스토리를 조작할 수 있습니다.

주요 메서드 및 속성

history.length:
- 현재 세션의 히스토리 스택에 있는 항목의 수를 반환합니다.
```
console.log(history.length);
```
history.back():
- 히스토리 스택에서 이전 페이지로 이동합니다.
```
history.back();
```
history.forward():
- 히스토리 스택에서 다음 페이지로 이동합니다.
```
history.forward();
```
history.go(n):
- 히스토리 스택에서 상대적인 위치로 이동합니다. n이 음수이면 뒤로, 양수이면 앞으로 이동합니다.
```
history.go(-1); // 이전 페이지로 이동
history.go(1);  // 다음 페이지로 이동
```
history.pushState(state, title, url):
- 히스토리 스택에 새로운 상태를 추가하고 URL을 변경합니다. 실제 페이지를 새로 고침하지 않고도 URL을 변경할 수 있습니다.
```
history.pushState({ page: 1 }, "title 1", "page1.html");
```
history.replaceState(state, title, url):
- 현재 히스토리 엔트리를 새로운 상태로 대체합니다.
```
history.replaceState({ page: 2 }, "title 2", "page2.html");
```
popstate 이벤트:
- 히스토리 스택에서 활성 상태가 변경될 때 발생합니다. 예를 들어, back, forward 또는 go 메서드가 호출될 때 발생합니다.
```
window.addEventListener('popstate', (event) => {
    console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state));
});
```

히스토리 스택의 구성 요소

히스토리 엔트리:
- 각 히스토리 엔트리는 사용자가 방문한 페이지를 나타냅니다. 엔트리는 URL과 관련 상태 데이터를 포함할 수 있습니다.
현재 위치 (Current Position):
- 히스토리 스택 내에서 현재 사용자가 위치한 엔트리를 가리킵니다. 이 위치는 사용자가 페이지를 탐색할 때마다 업데이트됩니다.

히스토리 스택의 동작 원리

페이지 방문:
- 사용자가 페이지를 방문할 때마다 해당 페이지가 히스토리 스택에 새로운 엔트리로 추가됩니다.
- 현재 위치는 스택의 맨 위로 이동합니다.
뒤로 가기 (history.back()):
- 현재 위치가 한 단계 뒤로 이동합니다. 이전 페이지로 이동하여 해당 페이지를 다시 표시합니다.
앞으로 가기 (history.forward()):
- 현재 위치가 한 단계 앞으로 이동합니다. 앞으로 방문했던 페이지로 이동하여 해당 페이지를 다시 표시합니다.
특정 위치로 이동 (history.go(n)):
- n이 양수이면 앞으로, 음수이면 뒤로 이동합니다. 현재 위치는 n만큼 이동합니다.
- history.go(-1)은 history.back()과 동일하고, history.go(1)은 history.forward()와 동일합니다.

예제 시나리오

1. A 페이지 방문 (history.length = 1, 현재 위치 = 0)
2. B 페이지 방문 (history.length = 2, 현재 위치 = 1)
3. C 페이지 방문 (history.length = 3, 현재 위치 = 2)
4. 뒤로 가기 (`history.back()`) - 현재 위치 = 1, B 페이지
5. 다시 뒤로 가기 (`history.back()`) - 현재 위치 = 0, A 페이지
6. 앞으로 가기 (`history.forward()`) - 현재 위치 = 1, B 페이지

추가 기능

pushState와 replaceState

history.pushState(state, title, url):
- 새로운 엔트리를 히스토리 스택에 추가합니다. 이 메서드는 페이지를 다시 로드하지 않고 URL을 변경할 수 있습니다.
```
history.pushState({ page: 1 }, "Title 1", "page1.html");
```
history.replaceState(state, title, url):
- 현재 히스토리 엔트리를 새로운 데이터로 교체합니다.
```
history.replaceState({ page: 2 }, "Title 2", "page2.html");
```

popstate 이벤트

사용자가 뒤로 가기나 앞으로 가기 버튼을 클릭하거나, history.back(), history.forward(), history.go() 메서드를 호출할 때 발생합니다.
이 이벤트를 통해 현재 히스토리 상태를 감지하고 필요한 작업을 수행할 수 있습니다.

window.addEventListener('popstate', (event) => {
    if (event.state) {
        console.log('Popstate event:', event.state);
        // 상태에 따라 페이지 콘텐츠를 업데이트합니다.
    }
});

히스토리 스택의 예제 코드

다음은 히스토리 스택을 관리하고 pushState와 popstate를 사용하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>History API Example</title>
</head>
<body>
    <h1>History API Example</h1>
    <button onclick="navigate('page1.html')">Go to Page 1</button>
    <button onclick="navigate('page2.html')">Go to Page 2</button>

    <script>
        function navigate(url) {
            // 새 상태를 히스토리 스택에 추가
            history.pushState({ page: url }, "", url);
            console.log('Navigated to:', url);
        }

        window.addEventListener('popstate', (event) => {
            if (event.state) {
                console.log('popstate event:', event.state.page);
                // 여기에서 URL에 따라 페이지 콘텐츠를 변경할 수 있습니다.
            } else {
                console.log('popstate event with no state');
            }
        });
    </script>
</body>
</html>

이 코드를 통해 히스토리 스택의 동작 방식을 이해하고, pushState와 popstate 이벤트를 활용하여 SPA(Single Page Application)에서 페이지 전환을 구현할 수 있습니다.

history.replaceState

현재 히스토리 스택의 항목을 대체합니다. 이로 인해 히스토리 스택의 현재 페이지가 변경되지만, 히스토리 스택에 새로운 항목이 추가되지는 않습니다. 이 동작이 히스토리 탐색에 어떤 영향을 미치는지 살펴보겠습니다.

시나리오 설명

초기 상태:
- 페이지 A, B, C가 히스토리 스택에 있다고 가정합니다.
- 현재 페이지는 B입니다.
replaceState 호출:
- 현재 페이지 B에서 replaceState를 호출하여 상태를 변경합니다.
결과:
- 페이지 B는 새로운 상태와 URL로 대체됩니다.
- 히스토리 스택은 여전히 페이지 A, 새로운 B, 페이지 C입니다.
- 사용자가 다음 페이지(C)로 이동하고 다시 이전 페이지(B)로 이동할 때, 새로운 상태와 URL이 적용된 B 페이지로 돌아옵니다.

예제 코드

초기 상태

// Initial pages: A -> B -> C
history.pushState({ page: 'A' }, 'A', 'a.html');
history.pushState({ page: 'B' }, 'B', 'b.html');
history.pushState({ page: 'C' }, 'C', 'c.html');

현재 페이지 B에서 replaceState 호출

// 현재 페이지는 B입니다.
history.replaceState({ page: 'B-Modified' }, 'B Modified', 'b_modified.html');

히스토리 탐색

// 다음 페이지(C)로 이동
history.forward(); // Now on page C

// 이전 페이지(B)로 이동
history.back(); // Now on page B-Modified

요약

replaceState를 호출하면 현재 페이지(B)의 상태와 URL이 변경됩니다.
히스토리 스택에는 새로운 항목이 추가되지 않고, 기존 항목이 대체됩니다.
사용자가 다음 페이지로 이동한 후 다시 이전 페이지로 돌아올 때, replaceState로 변경된 상태와 URL이 적용된 페이지로 돌아오게 됩니다.

따라서, replaceState를 사용하여 페이지를 갱신하면 이후 히스토리 탐색 시 해당 페이지는 갱신된 상태와 URL을 유지합니다. 이 동작은 사용자 경험을 향상시키고, 페이지 상태와 URL을 관리하는 데 유용합니다.

history.pushState

브라우저의 히스토리 스택에 새로운 상태와 URL을 추가하는 데 사용됩니다. 이 메서드를 호출하면 히스토리 스택에 새로운 항목이 추가되고, 브라우저의 주소 표시줄이 새로운 URL로 업데이트됩니다. 새로운 항목이 추가된 후에는 뒤로 가기 버튼을 눌러 이전 상태로 돌아갈 수 있습니다.

사용 시나리오

동적 페이지 탐색:
- SPA에서 사용자가 링크를 클릭할 때, 전체 페이지를 다시 로드하지 않고 URL과 상태를 업데이트하여 탐색을 시뮬레이트합니다.
상태 저장:
- 페이지 내에서 특정 작업 후 해당 상태를 히스토리 스택에 저장하여 사용자가 뒤로 가기 버튼을 통해 해당 상태로 돌아갈 수 있도록 합니다.
폼 제출 후 상태 추가:
- 폼을 제출한 후 페이지를 새로 고침하지 않고도 URL을 변경하여 사용자에게 현재 상태를 반영합니다.

예제

동적 페이지 탐색

<!DOCTYPE html>
<html>
<head>
    <title>pushState Example</title>
</head>
<body>
    <h1 id="title">Home Page</h1>
    <button onclick="navigate('about', 'About Us', 'about.html')">About</button>
    <button onclick="navigate('contact', 'Contact Us', 'contact.html')">Contact</button>
    <button onclick="navigate('home', 'Home Page', 'home.html')">Home</button>

    <script>
        function navigate(page, title, url) {
            document.getElementById('title').innerText = title;
            history.pushState({ page: page }, title, url);
            console.log(`Navigated to ${url} with title ${title}`);
        }

        window.addEventListener('popstate', (event) => {
            if (event.state) {
                document.getElementById('title').innerText = event.state.page;
                console.log(`Popped state: ${JSON.stringify(event.state)}`);
            }
        });
    </script>
</body>
</html>

이 예제에서는 버튼을 클릭하여 동적으로 페이지를 탐색하며, history.pushState를 사용하여 히스토리 스택에 새로운 상태와 URL을 추가합니다. 사용자가 뒤로 가기 버튼을 클릭하면 popstate 이벤트가 발생하여 페이지 상태를 복원합니다.

주요 개념 요약

1. pushState의 구조:

stateObject: 새 상태와 연관된 객체. 이 객체는 나중에 popstate 이벤트를 통해 복원할 수 있습니다.
title: 상태 제목. 대부분의 브라우저는 현재 이 값을 무시합니다.
url: 새 상태와 연관된 URL. URL은 현재 도메인 내에서만 변경할 수 있습니다.

history.pushState(stateObject, title, url);

2. pushState 동작:

pushState를 호출하면 히스토리 스택에 새로운 항목이 추가됩니다.
주소 표시줄이 새 URL로 업데이트되지만 페이지는 다시 로드되지 않습니다.
사용자가 뒤로 가기 버튼을 클릭하면 popstate 이벤트가 발생하여 이전 상태로 돌아갑니다.

3. 히스토리 스택 관리:

pushState를 여러 번 호출하면 히스토리 스택에 여러 항목이 추가됩니다.
사용자가 뒤로 가기 버튼을 클릭하면 가장 최근의 pushState 호출 이전의 상태로 돌아갑니다.

예제 동작 시나리오

초기 상태:
- 사용자가 페이지를 방문하여 Home Page를 봅니다.
pushState 호출:
- 사용자가 "About" 버튼을 클릭하여 navigate('about', 'About Us', 'about.html')을 호출하면, 히스토리 스택에 새로운 항목이 추가됩니다.
- 브라우저 주소 표시줄이 about.html로 업데이트됩니다.
히스토리 스택:
- [Home Page] -> [About Us]
뒤로 가기:
- 사용자가 뒤로 가기 버튼을 클릭하면 popstate 이벤트가 발생하여 Home Page로 돌아갑니다.

요약

history.pushState는 히스토리 스택에 새로운 상태와 URL을 추가하는 메서드입니다. 이를 통해 SPA와 같은 동적 웹 애플리케이션에서 페이지 탐색을 보다 자연스럽게 구현할 수 있습니다. pushState를 사용하면 페이지를 다시 로드하지 않고도 URL을 변경하고 상태를 관리할 수 있습니다.

728x90

저작자표시 비영리 변경금지

'기술이 된 상상 > TIL' 카테고리의 다른 글

ChatGPT가 알려주는 HTML meta viewport(뷰포트) (0)	2024.08.06
ChatGPT가 알려주는 Javascript ArrayBuffer (0)	2024.08.05
[Javascript] 업로드한 한글 파일 이름이 다운로드 시 깨질 때 (0)	2023.11.11
[HTML] 전화걸기, 통화 연결 기능 (0)	2023.11.09

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

One more thinking

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문