Skip to content

i18n(ko-KR): update client-side-scripts.mdx #11629

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

Merged
yanthomasdev merged 2 commits into from
May 8, 2025
Merged

i18n(ko-KR): update client-side-scripts.mdx #11629

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
901373c
i18n(ko-KR): update `client-side-scripts.mdx`
jsparkdev May 7, 2025
a0eb47a
Merge branch 'main' into script
yanthomasdev May 8, 2025
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
8 changes: 4 additions & 4 deletions src/content/docs/ko/guides/client-side-scripts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,11 +184,11 @@ Astro는 [스크립트 처리 규칙](#스크립트-처리)에 따라 이러한
</script>
```

여기에서 맞춤 요소를 사용하면 두 가지 이점이 있습니다.
여기에서 사용자 정의 요소를 사용하면 두 가지 이점이 있습니다.

1. `document.querySelector()`를 사용하여 전체 페이지를 검색하는 대신 현재 사용자 정의 요소 인스턴스에서만 검색하는 `this.querySelector()`를 사용할 수 있습니다. 이렇게 하면 한 번에 하나의 컴포넌트 인스턴스의 하위 항목으로만 작업하는 것이 더 쉬워집니다.

2. `<script>`는 한 번만 실행되지만 브라우저는 페이지에서 `<astro-heart>`를 찾을 때마다 맞춤 요소의 `constructor()` 메서드를 실행합니다. 즉, 한 페이지에서 이 컴포넌트를 여러 번 사용하려는 경우에도 한 번에 하나의 컴포넌트에 대한 코드를 안전하게 작성할 수 있습니다.
2. `<script>`는 한 번만 실행되지만 브라우저는 페이지에서 `<astro-heart>`를 찾을 때마다 사용자 정의 요소의 `connectedCallback()` 메서드를 실행합니다. 즉, 한 페이지에서 이 컴포넌트를 여러 번 사용하려는 경우에도 한 번에 하나의 컴포넌트에 대한 코드를 안전하게 작성할 수 있습니다.

<ReadMore>[web.dev의 재사용 가능한 웹 컴포넌트 안내서](https://web.dev/custom-elements-v1/)와 [MDN의 사용자 정의 요소 소개](https://developer.mozilla.org/ko/docs/Web/API/Web_components/Using_custom_elements)에서 사용자 정의 요소에 대해 자세히 알아볼 수 있습니다.</ReadMore>

Expand All @@ -198,7 +198,7 @@ Astro 컴포넌트에서 `---` 펜스 사이의 [프런트매터](/ko/basics/ast

이를 수행하는 한 가지 방법은 [`data-*` 속성](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes)을 사용하여 HTML 결과물에 변수 값을 저장하는 것입니다. 사용자 정의 요소를 포함한 스크립트는 HTML이 브라우저에 로드되면 요소의 `dataset` 속성을 사용하여 이러한 속성을 읽을 수 있습니다.

이 예시 컴포넌트에서 `message` prop은 `data-message` 속성에 저장되므로 맞춤 요소는 `this.dataset.message`를 읽고 브라우저에서 prop 값을 가져올 수 있습니다.
이 예시 컴포넌트에서 `message` prop은 `data-message` 속성에 저장되므로 사용자 정의 요소는 `this.dataset.message`를 읽고 브라우저에서 prop 값을 가져올 수 있습니다.

```astro title="src/components/AstroGreet.astro" {2} /data-message={.+}/ "this.dataset.message"
---
Expand Down Expand Up @@ -236,7 +236,7 @@ import AstroGreet from '../components/AstroGreet.astro';
<!-- 기본 메시지인 "Welcome, world!"를 사용하세요. -->
<AstroGreet />

<!-- props로 전달된 맞춤 메시지를 사용하세요. -->
<!-- props로 전달된 사용자 정의 메시지를 사용하세요. -->
<AstroGreet message="Lovely day to build components!" />
<AstroGreet message="Glad you made it! 👋" />
```
Expand Down