Skip to content

[스크롤 endless 과제] 번역 #874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[스크롤 endless 과제] 번역 #874

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a0b066c
스크롤 번역
SwimingKim Oct 5, 2020
66f3965
revert
SwimingKim Oct 5, 2020
45bbc76
맞춤법 검사
SwimingKim Oct 5, 2020
e88ca3c
솔루션 맞춤법
SwimingKim Oct 5, 2020
ff9748e
[신규번역] 스크롤하기
SwimingKim Oct 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
솔루션 맞춤법
  • Loading branch information
@SwimingKim
SwimingKim committed Oct 5, 2020
commit e88ca3cee3ecdcbf6bc4565d47b6323fc10d017e
58 changes: 30 additions & 28 deletions 2-ui/3-event-details/8-onscroll/1-endless-page/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,68 @@
The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end.
해결방법의 핵심은 페이지의 마지막 부분에 도달하기까지 페이지까지 더 많은 날짜(혹은 실제로 더 많은 상품을 불러오기)를 추가하는 함수입니다.

We can call it immediately and add as a `window.onscroll` handler.
즉각적으로 호출할 수 있고 `window.onscroll` 핸들러로서 추가할 수 있습니다.

The most important question is: "How do we detect that the page is scrolled to bottom?"
가장 중요한 질문은: "어떻게 페이지가 마지막 부분으로 스크롤이 되었는지 감지할 수 있는가?"

Let's use window-relative coordinates.
윈도우 기반의 좌표를 사용해봅시다.

The document is represented (and contained) within `<html>` tag, that is `document.documentElement`.
이 문서는 `<html>` 태그 즉 `document.documentElement` 내부에 표시(포함)되었습니다.

We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom.
우리는 전체 문서의 윈도우 기반의 상대 좌표를 `document.documentElement.getBoundingClientRect()`로 얻을 수 있고, `bottom` 프로퍼티 문서 아래로부터의 윈도우 기반 상대 좌표가 될 것입니다.

For instance, if the height of the whole HTML document is `2000px`, then:
예를 들어, 전체 HTML 문서의 높이가 `2000px`이라고 한다면:

```js
// when we're on the top of the page
// window-relative top = 0
// 페이지의 상단에 도달하게 되면
// 윈도우 기준 상단 = 0
document.documentElement.getBoundingClientRect().top = 0;

// window-relative bottom = 2000
// the document is long, so that is probably far beyond the window bottom
// 윈도우 기준 하단 = 2000
// 문서가 길면, 아마도 윈도우 아래보다도 멀리 나가게 됩니다
document.documentElement.getBoundingClientRect().bottom = 2000;
```

If we scroll `500px` below, then:
만약에 `500px` 스크롤 하게 된다면:

```js
// document top is above the window 500px
// 문서 상단이 윈도우보다 500px 더 위에 있습니다
document.documentElement.getBoundingClientRect().top = -500;
// document bottom is 500px closer
// 문서 하단이 윈도우보다 1500px 더 가깝습니다
document.documentElement.getBoundingClientRect().bottom = 1500;
```

When we scroll till the end, assuming that the window height is `600px`:
맨 아래까지 스크롤 하게 된다면, 윈도우의 높이가 `600px`로 추정하게 됩니다:

```js
// document top is above the window 1400px
// 문서 상단이 윈도우보다 1400px 위에 있습니다
document.documentElement.getBoundingClientRect().top = -1400;
// document bottom is below the window 600px
// 문서 하단이 윈도우보다 600px 아래에 있습니다
document.documentElement.getBoundingClientRect().bottom = 600;
```

Please note that the `bottom` can't be `0`, because it never reaches the window top. The lowest limit of the `bottom` coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up.
`bottom`은 `0`이 될 수 없음을 명심합시다, 왜냐하면 윈도우의 상단에 절대로 도달할 수 없습니다. `bottom` 좌표의 최소한의 한계는 윈도우의 높이입니다(`600`으로 예상합니다), 조금이라도 더 스크롤 할 수 없습니다.

We can obtain the window height as `document.documentElement.clientHeight`.
윈도우의 높이는 `document.documentElement.clientHeight`로 얻을 수 있습니다.

For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`).
과제를 위해, 문서 하단이 `100px`보다 더 떨어져 있지 않음을 알고 있어야 합니다. (즉: `600-700px`, 만일 높이가 `600`이라면)

So here's the function:
그래서 이것이 구현부입니다:

```js
function populate() {
while (true) {
// document bottom
// 문서의 아랫 부분
let windowRelativeBottom = document.documentElement.getBoundingClientRect()
.bottom;

// if the user hasn't scrolled far enough (>100px to the end)
if (windowRelativeBottom > document.documentElement.clientHeight + 100)
break;

// let's add more data
document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
// 만약 사용자가 충분히 멀리 스크롤 했다면 (끝까지 100px 미만)
if (windowRelativeBottom < document.documentElement.clientHeight + 100) {
// 더 많은 정보를 추가합시다
document.body.insertAdjacentHTML(
"beforeend",
`<p>Date: ${new Date()}</p>`
);
}
}
}
```