Skip to content

Commit

Permalink
i18n(ko-KR): update view-transitions.mdx (#7349)
Browse files Browse the repository at this point in the history
* i18n(ko-KR): update `view-transitions.mdx`

* Update src/content/docs/ko/guides/view-transitions.mdx

Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>

---------

Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
  • Loading branch information
3 people authored Mar 15, 2024
1 parent 8da16d2 commit 4c7c7b2
Showing 1 changed file with 40 additions and 6 deletions.
46 changes: 40 additions & 6 deletions src/content/docs/ko/guides/view-transitions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -110,12 +110,16 @@ Astro는 이전 페이지와 새 페이지 모두에서 발견된 해당 요소

[Astro 아일랜드](/ko/concepts/islands/) ([`client:` 지시어가 있는 UI 프레임워크 컴포넌트](/ko/reference/directives-reference/#클라이언트-지시어)에 지시어를 배치할 수도 있습니다. ). 해당 컴포넌트가 다음 페이지에 있는 경우 새 페이지의 아일랜드로 바꾸는 대신 이전 페이지의 아일랜드가 **현재 상태**로 계속 표시됩니다.

아래 예시에서는 `transition:persist` 속성이 있는 `<Counter />` 컴포넌트가 포함된 페이지를 앞뒤로 탐색할 때 `count` 재설정되지 않습니다.
아래 예시에서는 `transition:persist` 속성이 있는 `<Counter />` 컴포넌트가 포함된 페이지를 앞뒤로 탐색할 때 컴포넌트의 내부 상태인 count가 재설정되지 않습니다.

```astro title="components/Header.astro" "transition:persist"
<Counter client:load transition:persist count={5} />
<Counter client:load transition:persist initialCount={5} />
```

:::note[알려진 제한사항]
이런 방식으로 모든 상태를 보존할 수 있는 것은 아닙니다. `transition:persist`를 사용하는 경우에도 view transitions 중에 CSS 애니메이션의 재시작 및 iframe을 다시 불러오는 것을 피할 수 없습니다.
:::

아일랜드/요소가 두 페이지 사이의 다른 컴포넌트에 있는 경우 [해당 요소를 수동으로 식별](#전환-이름-지정)할 수도 있습니다.

```astro title="src/pages/old-page.astro" "Video" 'transition:name="media-player"'
Expand All @@ -132,6 +136,15 @@ Astro는 이전 페이지와 새 페이지 모두에서 발견된 해당 요소
<video controls="" autoplay="" transition:persist="media-player">
```

#### `transition:persist-props`
<p><Since v="4.5.0" /></p>

이를 통해 탐색 시 아일랜드의 props를 유지할지 여부를 제어할 수 있습니다.

기본적으로 `transition:persist`를 아일랜드에 추가하면 탐색 시 상태가 유지되지만 컴포넌트는 새 props로 다시 렌더링됩니다. 예를 들어 컴포넌트가 현재 페이지의 `title`과 같은 페이지별 props를 수신할 때 유용합니다.

`transition:persist-props`를 사용하여 이 동작을 재정의할 수 있습니다. 이 지시어를 추가하면 아일랜드의 기존 상태를 유지하는 것 외에도 아일랜드의 기존 props (새 값으로 다시 렌더링하지 않음)도 유지됩니다.

### 내장 애니메이션 지시어

Astro에는 기본 `fade` 전환을 재정의하기 위한 몇 가지 내장 애니메이션이 함께 제공됩니다. 특정 전환의 동작을 맞춤설정하려면 개별 요소에 `transition:animate` 지시어을 추가하세요.
Expand Down Expand Up @@ -446,11 +459,34 @@ import { ViewTransitions } from 'astro:transitions';
7. 라우터는 페이지에 추가된 새 스크립트를 실행합니다.
8. `astro:page-load` 이벤트가 발생합니다. 이것이 탐색 프로세스의 끝입니다.

## 페이지 탐색 중 스크립트 동작
## view transitions을 통한 스크립트 동작

기존 Astro 프로젝트에 view transitions를 추가하면 브라우저에서 전체 페이지를 새로고침 할 때처럼 페이지 탐색 후 일부 스크립트가 더 이상 다시 실행되지 않을 수 있습니다. 다음 정보를 사용하여 스크립트가 예상대로 실행되는지 확인하세요.

### 스크립트 순서

`<ViewTransitions />` 컴포넌트가 있는 페이지를 탐색할 때 스크립트는 브라우저 동작과 일치하는 순서대로 실행됩니다.

전역 상태를 설정하는 코드가 있는 경우 이 상태는 스크립트가 두 번 이상 실행될 수 있다는 점을 고려해야 합니다. `<script>` 태그에서 전역 상태를 확인하고 가능한 경우 조건부로 코드를 실행합니다.

### 스크립트 재실행

Astro의 기본 스크립트인 번들 [모듈 스크립트](/ko/guides/client-side-scripts/#스크립트-처리)는 한 번만 실행됩니다. 초기 실행 후에는 전환 후 새 페이지에 스크립트가 존재하더라도 무시됩니다.

번들 모듈 스크립트와 달리 여러 번 방문한 페이지에 [인라인 스크립트](/ko/guides/client-side-scripts/#처리-거부)가 존재하는 경우 사용자가 사이트를 방문하는 동안 다시 실행될 가능성이 있습니다. 인라인 스크립트는 방문자가 스크립트 없는 페이지를 탐색한 다음 스크립트가 있는 페이지로 돌아갈 때 다시 실행될 수도 있습니다.

#### `data-astro-rerun`

<p><Since v="4.5.0" /></p>

모든 전환 후에 인라인 스크립트를 강제로 다시 실행하려면 `data-astro-rerun` 속성을 추가하세요. 스크립트에 속성을 추가하면 `is:inline`도 암시적으로 추가되므로 번들링되지 않은 스크립트나 Astro에 의해 처리되지 않는 스크립트에만 사용할 수 있습니다.

```astro
<script is:inline data-astro-rerun>...</script>
```

클라이언트 측 탐색 중에 페이지가 로드될 때마다 스크립트가 실행되도록 하려면 [수명주기 이벤트](#수명-주기-이벤트)에 의해 실행되어야 합니다. 예를 들어 `DOMContentLoaded`에 대한 이벤트 리스너는 [`astro:page-load`](/ko/guides/view-transitions/#astropage-load) 수명 주기 이벤트에 의해 대체될 수 있습니다.

인라인 스크립트에 전역 상태를 설정하는 코드가 있는 경우 이 상태는 스크립트가 두 번 이상 실행될 수 있다는 점을 고려해야 합니다. `<script>` 태그에서 전역 상태를 확인하고 가능한 경우 조건부로 코드를 실행하세요. 이는 `window`가 보존되기 때문에 작동합니다.

```astro
<script is:inline>
Expand All @@ -460,8 +496,6 @@ import { ViewTransitions } from 'astro:transitions';
</script>
```

`DOMContentLoaded`에 대한 이벤트 리스너를 추가하는 스크립트를 포함한 모듈 스크립트는 브라우저가 이미 로드된 모듈을 추적하기 때문에 한 번만 실행됩니다. 클라이언트 측 페이지 탐색 중 스크립트를 다시 실행하려면 [수명 주기 이벤트](#수명-주기-이벤트)에 대한 리스너를 추가해야 합니다.

프로젝트의 기존 스크립트를 업데이트하는 예시는 [View Transitions 추가 튜토리얼](/ko/tutorials/add-view-transitions/#스크립트-업데이트)을 참조하세요.

## 수명 주기 이벤트
Expand Down

0 comments on commit 4c7c7b2

Please sign in to comment.