From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/history/back/index.html | 70 ++++++++++++++++++ files/ko/web/api/history/forward/index.html | 69 ++++++++++++++++++ files/ko/web/api/history/go/index.html | 82 +++++++++++++++++++++ files/ko/web/api/history/index.html | 85 ++++++++++++++++++++++ files/ko/web/api/history/length/index.html | 50 +++++++++++++ files/ko/web/api/history/pushstate/index.html | 84 +++++++++++++++++++++ files/ko/web/api/history/replacestate/index.html | 68 +++++++++++++++++ .../web/api/history/scrollrestoration/index.html | 72 ++++++++++++++++++ files/ko/web/api/history/state/index.html | 67 +++++++++++++++++ 9 files changed, 647 insertions(+) create mode 100644 files/ko/web/api/history/back/index.html create mode 100644 files/ko/web/api/history/forward/index.html create mode 100644 files/ko/web/api/history/go/index.html create mode 100644 files/ko/web/api/history/index.html create mode 100644 files/ko/web/api/history/length/index.html create mode 100644 files/ko/web/api/history/pushstate/index.html create mode 100644 files/ko/web/api/history/replacestate/index.html create mode 100644 files/ko/web/api/history/scrollrestoration/index.html create mode 100644 files/ko/web/api/history/state/index.html (limited to 'files/ko/web/api/history') diff --git a/files/ko/web/api/history/back/index.html b/files/ko/web/api/history/back/index.html new file mode 100644 index 0000000000..2b5ee8475a --- /dev/null +++ b/files/ko/web/api/history/back/index.html @@ -0,0 +1,70 @@ +--- +title: History.back() +slug: Web/API/History/back +tags: + - API + - HTML DOM + - History + - History API + - Method + - Reference + - Web +translation_of: Web/API/History/back +--- +
{{APIRef("DOM")}}
+ +

History.back() 메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시합니다. {{domxref("History.go", "history.go(-1)")}}와 같습니다. 이전 페이지가 없는 경우 아무것도 하지 않습니다.

+ +

이 메서드는 비동기적입니다. {{event("popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다.

+ +

구문

+ +
history.back()
+ +

예제

+ +

다음 예제는 클릭했을 때 뒤로 가는 버튼을 생성합니다.

+ +

HTML

+ +
<button id="go-back">뒤로 가기!</button>
+ +

JavaScript

+ +
document.getElementById('go-back').addEventListener('click', () => {
+  window.history.back();
+});
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "history.html#history", "History.back()")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#dom-history-back", "History.back()")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.History.back")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/history/forward/index.html b/files/ko/web/api/history/forward/index.html new file mode 100644 index 0000000000..52ab61f70b --- /dev/null +++ b/files/ko/web/api/history/forward/index.html @@ -0,0 +1,69 @@ +--- +title: History.forward() +slug: Web/API/History/forward +tags: + - API + - HTML DOM + - History + - History API + - Method + - Reference +translation_of: Web/API/History/forward +--- +
{{APIRef("DOM")}}
+ +

History.forward() 메서드는 브라우저가 세션 기록의 바로 앞 페이지로 이동하도록 지시합니다. {{domxref("History.go", "history.go(1)")}}과 같습니다. 다음 페이지가 없는 경우 아무것도 하지 않습니다.

+ +

이 메서드는 비동기적입니다. {{event("popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다.

+ +

구문

+ +
history.forward()
+ +

예제

+ +

다음 예제는 클릭했을 때 앞으로 가는 버튼을 생성합니다.

+ +

HTML

+ +
<button id='go-forward'>앞으로 가기!</button>
+ +

JavaScript

+ +
document.getElementById('go-forward').addEventListener('click', e => {
+  window.history.forward();
+})
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.History.forward")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/history/go/index.html b/files/ko/web/api/history/go/index.html new file mode 100644 index 0000000000..3f90100ea8 --- /dev/null +++ b/files/ko/web/api/history/go/index.html @@ -0,0 +1,82 @@ +--- +title: History.go() +slug: Web/API/History/go +translation_of: Web/API/History/go +--- +
{{APIRef("History API")}}
+ +

History.go() 메서드는 history 세션에서 특정한 페이지를 로딩합니다. 인자로 전달하는 파라미터 값에 따라 history를 통해서 페이지를 앞 뒤로 이동할 수 있습니다. 

+ +

이 메서드는 {{glossary("asynchronous")}}(비동기)로 동작합니다. 페이지 앞, 뒤 이동이 언제 이뤄지는지 알려면 {{event("popstate")}} event에 대한 listener를 등록합니다.

+ +

구문

+ +
history.go([delta])
+ +

Parameters

+ +
+
delta {{optional_inline}}
+
현재 페이지에서 상대적으로 이동하려고 하는 history의 위치 값. 음수 값은 뒤로 이동하고, 양수 값은 앞으로 이동합니다. 예를 들면 history.go(2) 는 현재 페이지에서 2 페이지 앞으로 이동하고, history.go(-2) 는 현재 페이지에서 2 페이지 뒤로 이동합니다. 만약 값을 전달하지 않거나, delta 값을 0으로 전달한다면, 이는 location.reload()를 동작시켰을 때와 동일한 결과를 보입니다. (새로고침)
+
+ +

예제

+ +

한 페이지 뒤로 가기 ({{domxref("History.back", "back()")}}를 호출한 것과 동일):

+ +
history.go(-1)
+ +

{{domxref("History.forward", "forward()")}}와 동일한 한 페이지 앞으로 가기:

+ +
history.go(1)
+ +

두 페이지 앞으로 가기:

+ +
history.go(2);
+ +

두 페이지 뒤로 가기:

+ +
history.go(-2);
+ +

마지막으로, 아래 구문들은 현재 페이지를 새로고침 합니다:

+ +
history.go();
+history.go(0);
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "history.html#dom-history-go", "History.go()")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#dom-history-go", "History.go()")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.History.go")}}

+ +

See also

+ + diff --git a/files/ko/web/api/history/index.html b/files/ko/web/api/history/index.html new file mode 100644 index 0000000000..37fabc2c98 --- /dev/null +++ b/files/ko/web/api/history/index.html @@ -0,0 +1,85 @@ +--- +title: History +slug: Web/API/History +tags: + - API + - HTML DOM + - History API + - Interface + - Reference + - Web +translation_of: Web/API/History +--- +
{{APIRef("HTML DOM")}}
+ +

History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.

+ +

속성

+ +

History 인터페이스는 어떤 속성도 상속하지 않습니다.

+ +
+
{{domxref("History.length")}} {{readOnlyInline}}
+
현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다.
+
{{domxref("History.scrollRestoration")}}
+
기록 탐색 시 스크롤 위치 복원 여부를 명시할 수 있습니다. 가능한 값은 auto와 manual입니다.
+
{{domxref("History.state")}} {{readOnlyInline}}
+
기록 스택 최상단의 스테이트를 나타내는 값을 반환합니다. {{event("popstate")}} 이벤트를 기다리지 않고 현재 기록의 스테이트를 볼 수 있는 방법입니다.
+
+ +

메서드

+ +

History 인터페이스는 어떤 메서드도 상속하지 않습니다.

+ +
+
{{domxref("History.back()")}}
+
세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드입니다. 브라우저의 뒤로 가기 버튼을 눌렀을 때, 그리고 history.go(-1)을 사용했을 때와 같습니다. +
참고: 세션 기록의 제일 첫 번째 페이지에서 호출해도 오류는 발생하지 않습니다.
+
+
{{domxref("History.forward()")}}
+
세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드입니다. 브라우저의 앞으로 가기 버튼을 눌렀을 때, 그리고 history.go(1)을 사용했을 때와 같습니다. +
참고: 세션 기록의 제일 마지막 페이지에서 호출해도 오류는 발생하지 않습니다.
+
+
{{domxref("History.go()")}}
+
현재 페이지를 기준으로, 상대적인 위치에 존재하는 세션 기록 내 페이지로 이동하는 비동기 메서드입니다. 예를 들어, 매개변수로 -1을 제공하면 바로 뒤로, 1을 제공하면 바로 앞으로 이동합니다. 세션 기록의 범위를 벗어나는 값을 제공하면 아무 일도 일어나지 않습니다. 매개변수를 제공하지 않거나, 0을 제공하면 현재 페이지를 다시 불러옵니다.
+
{{domxref("History.pushState()")}}
+
주어진 데이터를 지정한 제목(제공한 경우 URL도)으로 세션 기록 스택에 넣습니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 title 매개변수를 무시합니다.
+
{{domxref("History.replaceState()")}}
+
세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체합니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 title 매개변수를 무시합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML WHATWG')}}Adds the scrollRestoration attribute.
{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.History")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/history/length/index.html b/files/ko/web/api/history/length/index.html new file mode 100644 index 0000000000..0e26279b5c --- /dev/null +++ b/files/ko/web/api/history/length/index.html @@ -0,0 +1,50 @@ +--- +title: History.length +slug: Web/API/History/length +tags: + - API + - HTML + - HTML DOM + - History API + - Property + - Read-only + - Reference +translation_of: Web/API/History/length +--- +
{{ APIRef("HTML DOM") }}
+ +

History.length 읽기 전용 속성은 현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다. 예를 들어, 새로운 탭에 막 불러온 페이지의 세션 기록 길이는 1입니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.History.length")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/history/pushstate/index.html b/files/ko/web/api/history/pushstate/index.html new file mode 100644 index 0000000000..a4e7af47df --- /dev/null +++ b/files/ko/web/api/history/pushstate/index.html @@ -0,0 +1,84 @@ +--- +title: History.pushState() +slug: Web/API/History/pushState +tags: + - API + - DOM + - History + - History API + - Method + - Reference + - Web +translation_of: Web/API/History/pushState +--- +
{{APIRef("DOM")}}
+ +

HTML 문서에서, history.pushState() 메서드는 브라우저의 세션 기록 스택에 상태를 추가합니다.

+ +

구문

+ +
history.pushState(state, title[, url]);
+ +

매개변수

+ +
+
state
+
새로운 세션 기록 항목에 연결할 상태 객체. 사용자가 새로운 상태로 이동할 때마다 {{event("popstate")}} 이벤트가 발생하는데, 이 때 이벤트 객체의 state 속성에 해당 상태의 복제본이 담겨 있습니다.
+
상태 객체는 직렬화 가능한 객체라면 모두 가능합니다.
+
title
+
지금은 대부분의 브라우저가 title 매개변수를 무시하지만, 미래에 쓰일 수도 있습니다. 빈 문자열을 지정하면 나중의 변경사항에도 안전할 것입니다. 아니면, 상태에 대한 짧은 제목을 제공할 수도 있습니다.
+
url {{optional_inline}}
+
새로운 세션 기록 항목의 URL. pushState() 호출 이후에 브라우저는 주어진 URL로 탐색하지 않습니다. 그러나 이후, 예컨대 브라우저를 재시작할 경우 탐색을 시도할 수도 있습니다. 상대 URL을 지정할 수 있으며, 이 땐 현재 URL을 기준으로 사용합니다. 새로운 URL은 현재 URL과 같은 {{glossary("origin", "출처")}}를 가져야 하며, 그렇지 않을 경우 예외가 발생합니다. 지정하지 않은 경우 문서의 현재 URL을 사용합니다.
+
+ +

설명

+ +

어떤 면에선 pushState()와 window.location = "#foo"가 비슷합니다. 둘 다 새로운 세션 기록 항목을 생성하고 활성화하기 때문입니다. 그러나 pushState()에는 몇 가지 장점이 있습니다.

+ + + +

다만 pushState()는 이전 URL과 신규 URL의 해시가 다르더라도 절대 {{event("hashchange")}} 이벤트를 유발하지 않습니다.

+ +

HTML 외의 문서에서는 이름공간 URI가 null인 요소를 생성합니다.

+ +

예제

+ +

다음 코드는 주어진 상태, 제목, URL을 사용해 새로운 세션 기록을 생성합니다.

+ +
const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "browsers.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.History.pushState")}}

diff --git a/files/ko/web/api/history/replacestate/index.html b/files/ko/web/api/history/replacestate/index.html new file mode 100644 index 0000000000..3b9f92ba8d --- /dev/null +++ b/files/ko/web/api/history/replacestate/index.html @@ -0,0 +1,68 @@ +--- +title: History.replaceState() +slug: Web/API/History/replaceState +translation_of: Web/API/History/replaceState +--- +
{{APIRef("History API")}}
+ +
+ +

History.replaceState() 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 stateObj, title, URL로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history의 URL을 업데이트하려는 경우에 유용합니다. 

+ +

구문

+ +
history.replaceState(stateObj, title[, url])
+ +

Parameters

+ +
+
stateObj
+
state 객체는 replaceState에 전달된 history 항목과 연관된 JavaScript 객체입니다. state object는 null일 수 있습니다.
+
title
+
나중에는 사용할 수도 있지만, 대부분의 브라우저는 현재 이 파라미터를 무시하고 있습니다. 이 부분에 빈 String을 전달하면 나중에 메소드가 변화하더라도 안전합니다. 또는, state에 짧은 title을 전달할 수도 있습니다.
+
url {{optional_inline}}
+
history 항목의 URL 입니다. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다. 그렇지 않으면 replaceState에서 예외가 발생합니다.
+
+ +

예제

+ +

https://www.mozilla.org/ 에서 아래 JavaScript를 실행한다고 가정합시다: 

+ +
const stateObj = { foo: 'bar' };
+history.pushState(stateObj, '', 'bar.html');
+ +

위 두 줄에 대한 설명은 Working with the History API 문서의 Example of pushState() method에서 확인할 수 있습니다. 그 다음, https://www.mozilla.org/bar.html에서 아래와 같은 JavaScript를 실행한다고 가정해보세요:

+ +
history.replaceState(stateObj, '', 'bar2.html');
+ +

이렇게하면 URL 표시줄에 https://www.mozilla.org/bar2.html이라고 표시되지만, 브라우저가 bar2.html을 로드하거나 bar2.html파일이 있는지 확인하지는 않습니다.

+ +

이제 사용자가 https://www.microsoft.com으로 이동한 다음, 뒤로가기 버튼을 누른다고 가정해봅시다. 이 때, URL 표시줄에는https://www.mozilla.org/bar2.html이 표시됩니다. 사용자가 다시 뒤로가기 버튼을 누르면, URL 표시줄에는 https://www.mozilla.org/foo.html이 표시되고, bar.html은 완전히 무시되어 표시되지 않습니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "history.html#dom-history-replacestate", "History.replaceState()")}}{{Spec2("HTML WHATWG")}}{{SpecName("HTML5 W3C")}} 이후 변화 없음.
{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}{{Spec2("HTML5 W3C")}}초기 정의.
+ +

브라우저 호환성

+ + + +

{{Compat("api.History.replaceState")}}

diff --git a/files/ko/web/api/history/scrollrestoration/index.html b/files/ko/web/api/history/scrollrestoration/index.html new file mode 100644 index 0000000000..a9a4923bd7 --- /dev/null +++ b/files/ko/web/api/history/scrollrestoration/index.html @@ -0,0 +1,72 @@ +--- +title: History.scrollRestoration +slug: Web/API/History/scrollRestoration +tags: + - API + - HTML DOM + - History API + - Property + - Reference +translation_of: Web/API/History/scrollRestoration +--- +
{{APIRef("HTML DOM")}}
+ +

History.scrollRestoration 속성을 사용하면 기록 탐색 시 사용할 스크롤 위치 복원 기능의 기본값을 웹 애플리케이션이 지정할 수 있습니다.

+ +

구문

+ +
let scrollRestore = history.scrollRestoration;
+ +

값

+ +
+
"auto"
+
페이지 내에서 사용자의 스크롤이 위치했던 장소로 복원합니다.
+
"manual"
+
스크롤을 복원하지 않습니다. 사용자가 직접 스크롤해야 합니다.
+
+ +

예제

+ +

현재 스크롤 복원 여부 알아내기

+ +
const scrollRestoration = history.scrollRestoration
+if (scrollRestoration === 'manual') {
+  console.log('The location on the page is not restored, user will need to scroll manually.');
+}
+
+ +

스크롤 복원 비활성화

+ +
if (history.scrollRestoration) {
+  window.history.scrollRestoration = 'manual';
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", " #scroll-restoration-mode", "History.scrollRestoration")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#dom-history-scrollrestoration", "History.scrollRestoration")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.History.scrollRestoration")}}

diff --git a/files/ko/web/api/history/state/index.html b/files/ko/web/api/history/state/index.html new file mode 100644 index 0000000000..0f889665c7 --- /dev/null +++ b/files/ko/web/api/history/state/index.html @@ -0,0 +1,67 @@ +--- +title: History.state +slug: Web/API/History/state +translation_of: Web/API/History/state +--- +
{{APIRef("History API")}}
+ +

History.state 속성은 현 history에 해당하는 state값을 나타냅니다.

+ +

{{event("popstate")}} 이벤트가 트리거될때가 아닌 상태에서 state값을 볼 수 있는 방법입니다.

+ +

문법

+ +
const currentState = history.state
+ +

값

+ +

현 history에 위치한 값입니다. 이 값은 {{domxref("History.pushState","pushState()")}} 또는 {{domxref("History.replaceState","replaceState()")}}을 사용할때까지 {{jsxref("null")}} 값을 가집니다.

+ +

예제

+ +

history.state 로 초기값을 보여준 후 {{domxref("History.pushState","pushState()")}}를 사용하여 State를 푸시합니다.

+ +

다음 코드 줄은 history.state 를 사용하여 콘솔에다 값이 푸시되었음을 보여줍니다.

+ +
// Should be null because we haven't modified the history stack yet
+console.log(`History.state before pushState: ${history.state}`);
+
+// Now push something on the stack
+history.pushState({name: 'Example'}, "pushState example", 'page3.html');
+
+// Now state has a value.
+console.log(`History.state after pushState: ${history.state}`);
+ +

SpecificationsE

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-history-state", "History.state")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "browsers.html#dom-history-state", "History.state")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.History.state")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf