From dc79b6caf05159036d5fe7d4be7256f14c504a16 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 2 May 2024 09:32:48 +0900 Subject: [PATCH 1/9] i18n(ko-KR): update `framework-components.mdx` --- .../docs/ko/guides/framework-components.mdx | 59 +++++++++---------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/src/content/docs/ko/guides/framework-components.mdx b/src/content/docs/ko/guides/framework-components.mdx index 00f4d33a96dfe..22341f64d1718 100644 --- a/src/content/docs/ko/guides/framework-components.mdx +++ b/src/content/docs/ko/guides/framework-components.mdx @@ -10,7 +10,7 @@ import ReadMore from '~/components/ReadMore.astro' ## 공식 UI 프레임워크 통합 -Astro는 [React](https://ko.react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://ko.vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/), [Lit](https://lit.dev/) 공식 통합이 포함되어 있습니다. +Astro에는 [React](https://ko.react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://ko.vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/), [Lit](https://lit.dev/) 공식 통합이 포함되어 있습니다. 통합 디렉터리에서 더 많은 [커뮤니티에서 관리하는 프레임워크 통합](https://astro.build/integrations/?search=&categories%5B%5D=frameworks) (예: Angular, Qwik, Elm)을 찾아보세요. @@ -18,19 +18,19 @@ Astro는 [React](https://ko.react.dev/), [Preact](https://preactjs.com/), [Svelt ## 통합 설치 -이러한 Astro 통합 중 하나 이상을 프로젝트에 설치하고 구성할 수 있습니다. +하나 이상의 Astro 통합을 프로젝트에 설치하고 구성할 수 있습니다. Astro 통합 설치 및 구성에 대한 자세한 내용은 [통합 안내서](/ko/guides/integrations-guide/)를 참조하세요. :::tip -선택한 프레임워크의 예시를 보고 싶으십니까? [astro.new](https://astro.new/latest/frameworks)를 방문하여 프레임워크 템플릿 중 하나를 선택하세요. +선택한 프레임워크의 예시를 보고 싶나요? [astro.new](https://astro.new/latest/frameworks)를 방문하여 프레임워크 템플릿 중 하나를 선택하세요. ::: -## 프레임워크 컴포넌트 사용하기 +## 프레임워크 컴포넌트 사용 -Astro 컴포넌트와 마찬가지로 자바스크립트 프레임워크 컴포넌트를 Astro 페이지, 레이아웃, 컴포넌트에서 사용할 수 있습니다! 모든 컴포넌트는 `/src/components`에 모아두거나 원하는 대로 구성할 수 있습니다. +Astro 컴포넌트와 마찬가지로 자바스크립트 프레임워크 컴포넌트를 Astro 페이지, 레이아웃, 컴포넌트에서 사용할 수 있습니다! 모든 컴포넌트는 `/src/components` 디렉터리에 모아두거나 원하는 대로 구성할 수 있습니다. -프레임워크 컴포넌트를 사용하려면 Astro 컴포넌트 스크립트에서 상대 경로를 지정하여 가져옵니다. 그리고 컴포넌트 템플릿에서 다른 컴포넌트, HTML 요소, JSX와 같은 표현식과 함께 사용합니다. +프레임워크 컴포넌트를 사용하기 위해 Astro 컴포넌트 스크립트에서 상대 경로를 지정하여 가져옵니다. 그리고 컴포넌트 템플릿에서 다른 컴포넌트, HTML 요소, JSX와 같은 표현식과 함께 사용합니다. ```astro title="src/pages/static-components.astro" ins={2,7} --- @@ -44,14 +44,13 @@ import MyReactComponent from '../components/MyReactComponent.jsx'; ``` -기본적으로 프레임워크 컴포넌트는 서버에서 정적 HTML로 렌더링 됩니다. 이는 비대화형 컴포넌트를 템플릿화하는데 유용하며, 필요하지 않은 자바스크립트를 클라이언트에 전송하는 것을 방지합니다. +기본적으로 프레임워크 컴포넌트는 서버에서 정적 HTML로 렌더링 됩니다. 이는 비대화형 컴포넌트를 템플릿으로 만드는데 유용하며, 필요하지 않은 자바스크립트를 클라이언트에 전송하는 것을 방지합니다. +## 인터랙티브 컴포넌트 하이드레이션 -## 인터랙티브 컴포넌트 하이드레이션하기 +프레임워크 컴포넌트는 [`client:*` 지시어](/ko/reference/directives-reference/#클라이언트-지시어)를 이용하여 대화형으로 만들 수 있습니다 (하이드레이션). 이는 컴포넌트의 자바스크립트가 브라우저로 전송되는 시기를 결정하는 컴포넌트 속성입니다. -프레임워크 컴포넌트는 [`client:*` 지시어](/ko/reference/directives-reference/#클라이언트-지시어)를 이용하여 대화형(하이드레이션)으로 만들 수 있습니다. 이는 컴포넌트의 자바스크립트가 브라우저로 전송되는 시기를 결정하는 컴포넌트 속성입니다. - -`client:only`를 제외한 모든 클라이언트 지시어를 사용하면 컴포넌트는 먼저 서버에서 렌더링 되어 정적 HTML을 생성합니다. 자바스크립트 컴포넌트는 지시어에 따라 브라우저로 전송됩니다. 이후 컴포넌트가 하이드레이트 되어 인터랙티브하게 됩니다. +`client:only`를 제외한 모든 클라이언트 지시어를 사용하면 컴포넌트는 먼저 서버에서 렌더링 되어 정적 HTML을 생성합니다. 자바스크립트 컴포넌트는 지시어에 따라 브라우저로 전송됩니다. 그러면 컴포넌트에 하이드레이션이 추가되어 인터랙티브 컴포넌트가 됩니다. ```astro title="src/pages/interactive-components.astro" /client:\S+/ --- @@ -70,10 +69,10 @@ import InteractiveModal from "../components/InteractiveModal.svelte" ``` -컴포넌트를 렌더링하는 데 필요한 자바스크립트 프레임워크(React, Svelte 등)는 컴포넌트 자체의 자바스크립트와 함께 브라우저로 전송됩니다. 페이지의 여러 컴포넌트가 동일한 프레임워크를 사용하는 경우, 프레임워크는 한 번만 전송됩니다. +컴포넌트를 렌더링하는 데 필요한 자바스크립트 프레임워크 (React, Svelte 등)는 컴포넌트 자체 자바스크립트와 함께 브라우저로 전송됩니다. 페이지의 여러 컴포넌트가 동일한 프레임워크를 사용하는 경우, 프레임워크는 한 번만 전송됩니다. :::note[접근성] -이 컴포넌트들을 Astro 에서 사용할 경우, 프레임워크별 접근성 패턴이 동일하게 작동해야 합니다. 접근성 관련 자바스크립트가 제대로 로드되고 실행되도록 클라이언트 지시어를 반드시 설정해야 합니다. +이러한 컴포넌트를 Astro 에서 사용하는 경우, 프레임워크별 접근성 패턴이 동일하게 작동해야 합니다. 접근성 관련 자바스크립트가 제대로 로드되고 실행되도록 클라이언트 지시어를 반드시 설정해야 합니다. ::: ### 사용 가능한 하이드레이션 지시어 @@ -82,13 +81,13 @@ UI 프레임워크 컴포넌트에서 사용할 수 있는 하이드레이션 하이드레이션 지시어에 대한 자세한 설명과 사용법은 [지시어 참조](/ko/reference/directives-reference/#클라이언트-지시어) 페이지를 참조하세요. -## 프레임워크 혼합하기 +## 프레임워크 혼합 -동일한 Astro 컴포넌트 내에서 여러 프레임워크에서 만든 컴포넌트를 가져와 렌더링할 수 있습니다. +동일한 Astro 컴포넌트에서 여러 프레임워크 컴포넌트를 가져와 렌더링할 수 있습니다. ```astro title="src/pages/mixing-frameworks.astro" --- -// 예: 한 페이지에 여러 프레임워크의 구성요소를 혼합하는 경우 +// 예시: 한 페이지에서 여러 프레임워크 컴포넌트 혼합 import MyReactComponent from '../components/MyReactComponent.jsx'; import MySvelteComponent from '../components/MySvelteComponent.svelte'; import MyVueComponent from '../components/MyVueComponent.vue'; @@ -101,10 +100,10 @@ import MyVueComponent from '../components/MyVueComponent.vue'; ``` :::caution -**Astro** 컴포넌트(`.astro`)만 여러 프레임워크의 컴포넌트를 포함할 수 있습니다. +오직 **Astro** 컴포넌트 (`.astro`)만이 여러 프레임워크 컴포넌트를 포함할 수 있습니다. ::: -## 프레임워크 컴포넌트에 Props 전달하기 +## 프레임워크 컴포넌트에 Props 전달 Astro 컴포넌트에서 프레임워크 컴포넌트로 props를 전달할 수 있습니다. @@ -120,15 +119,15 @@ import Counter from '../components/Counter.svelte'; ``` :::caution[함수를 props로 전달하기] -프레임워크 컴포넌트에 함수를 프로퍼티로 전달할 수 있지만, 이 함수는 서버 렌더링 중에만 작동합니다. 이 함수를 하이드레이션 컴포넌트(예: 이벤트 핸들러)에서 사용하려고 하면 오류가 발생합니다. +프레임워크 컴포넌트에 함수를 전달할 수 있지만, 이 함수는 서버 렌더링 중에만 작동합니다. 이 함수를 하이드레이션 컴포넌트 (예: 이벤트 핸들러)에서 사용하면 오류가 발생합니다. -이는 Astro 에서 함수를 직렬화(서버에서 클라이언트로 전송)할 수 없기 때문입니다. +이는 Astro 에서 함수를 직렬화 (서버에서 클라이언트로 전송)할 수 없기 때문입니다. ::: -## 프레임워크 컴포넌트에 자식 요소 전달하기 +## 프레임워크 컴포넌트에 자식 요소 전달 -Astro 컴포넌트에서는 프레임워크 컴포넌트에 자식 요소를 전달할 수 있습니다. 각 프레임워크마다 이러한 자식 요소를 참조하는 고유한 패턴이 있는데, React, Preact, Solid는 `children`이라는 특별한 속성을 사용하고, Svelte와 Vue는 ``라는 요소를 사용합니다. +Astro 컴포넌트에서 프레임워크 컴포넌트로 자식 요소를 전달할 수 있습니다. 각 프레임워크마다 이러한 자식 요소를 참조하는 고유한 패턴이 있는데, React, Preact, Solid는 `children`이라는 특별한 속성을 사용하고, Svelte와 Vue는 ``라는 요소를 사용합니다. ```astro title="src/pages/component-children.astro" {5} --- @@ -181,9 +180,9 @@ Svelte와 Vue에서 이러한 슬롯은 `` 요소에 `name` 속성을 붙 ``` -## 프레임워크 컴포넌트 중첩하기 +## 프레임워크 컴포넌트 중첩 -Astro 파일 내에서는 프레임워크 컴포넌트의 자식 요소도 하이드레이션된 컴포넌트로 만들 수 있습니다. 즉, 프레임워크의 모든 컴포넌트를 재귀적으로 중첩할 수 있습니다. +Astro 파일에서 프레임워크 컴포넌트의 자식 요소를 하이드레이션 컴포넌트로 만들 수 있습니다. 즉, 프레임워크의 모든 컴포넌트를 재귀적으로 중첩할 수 있습니다. ```astro title="src/pages/nested-components.astro" {10-11} --- @@ -202,20 +201,20 @@ import MySvelteButton from '../components/MySvelteButton.svelte'; ``` :::caution -프레임워크의 컴포넌트 자체(예: `.jsx`, `.svelte`)는 여러 프레임워크를 혼용할 수 없습니다. +프레임워크 컴포넌트 (예: `.jsx`, `.svelte`)는 여러 프레임워크를 혼용할 수 없습니다. ::: 이를 통해 원하는 자바스크립트 프레임워크로 전체 '앱'을 구축하고 상위 컴포넌트를 통해 Astro의 페이지로 렌더링할 수 있습니다. :::note -Astro 컴포넌트는 하이드레이션되는 프레임워크 컴포넌트를 포함하더라도 항상 정적 HTML로 렌더링 됩니다. 즉, Astro 컴포넌트에서 프레임워크 컴포넌트에 React의 'render props'를 전달하면, Astro 컴포넌트는 이 패턴이 요구하는 클라이언트 런타임 동작을 제공하지 못하기 때문에 작동하지 않습니다. 대신 이름을 가진 슬롯을 사용합니다. +Astro 컴포넌트는 하이드레이션 프레임워크 컴포넌트를 포함하더라도 항상 정적 HTML로 렌더링 됩니다. 즉, Astro 컴포넌트에서 프레임워크 컴포넌트에 React의 'render props'를 전달하면, Astro 컴포넌트는 이 패턴이 요구하는 클라이언트 런타임 동작을 제공하지 못하기 때문에 작동하지 않습니다. 대신 이름을 가진 슬롯을 사용합니다. ::: -## 프레임워크 컴포넌트 중 Astro 컴포넌트를 사용할 수 있나요? +## 프레임워크 컴포넌트에서 Astro 컴포넌트를 사용할 수 있나요? -UI 프레임워크 컴포넌트는 해당 프레임워크의 '아일랜드 (섬)'가 됩니다. 이러한 컴포넌트는 해당 프레임워크의 유효한 코드로서 자체 가져오기 또는 패키지를 사용하여 완전히 작성해야 하며, UI 프레임워크 컴포넌트(예: `.jsx` 또는 `.svelte`) 내에서 .astro 컴포넌트를 가져올 수 없습니다. +UI 프레임워크 컴포넌트는 해당 프레임워크의 '아일랜드'가 됩니다. 이러한 컴포넌트는 해당 프레임워크의 유효한 코드로서 자체 가져오기 또는 패키지를 사용하여 작성해야 하며, UI 프레임워크 컴포넌트 (예: `.jsx` 또는 `.svelte`)에서 .astro 컴포넌트를 가져올 수 없습니다. -하지만 [Astro의 `` 패턴](/ko/basics/astro-components/#슬롯)을 이용하여 Astro 컴포넌트가 생성한 정적 콘텐츠를 **.astro 컴포넌트 내에서** 프레임워크 컴포넌트에 자식 요소로 전달할 수 있습니다. +하지만 [Astro의 `` 패턴](/ko/basics/astro-components/#슬롯)을 사용하여 Astro 컴포넌트가 생성한 정적 콘텐츠를 **.astro 컴포넌트에서** 프레임워크 컴포넌트에 자식 요소로 전달할 수 있습니다. ```astro title="src/pages/astro-children.astro" {6} --- @@ -227,7 +226,7 @@ import MyAstroComponent from '../components/MyAstroComponent.astro'; ``` -## Astro 컴포넌트에 하이드레이션을 할 수 있나요? +## Astro 컴포넌트를 하이드레이션 할 수 있나요? `client:` 지시어를 사용하여 Astro 컴포넌트에 하이드레이션을 시도하면 오류가 발생합니다. From cc7491825151c9553103c74ee24db77b3059a2f2 Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Thu, 2 May 2024 09:45:31 +0900 Subject: [PATCH 2/9] fix: broken links --- src/content/docs/ko/basics/astro-components.mdx | 2 +- src/content/docs/ko/basics/astro-syntax.mdx | 2 +- src/content/docs/ko/guides/images.mdx | 2 +- src/content/docs/ko/guides/integrations-guide/lit.mdx | 2 +- src/content/docs/ko/guides/integrations-guide/markdoc.mdx | 2 +- src/content/docs/ko/guides/integrations-guide/preact.mdx | 2 +- src/content/docs/ko/guides/integrations-guide/react.mdx | 2 +- src/content/docs/ko/guides/integrations-guide/solid-js.mdx | 2 +- src/content/docs/ko/guides/integrations-guide/svelte.mdx | 2 +- src/content/docs/ko/guides/integrations-guide/vue.mdx | 2 +- src/content/docs/ko/guides/markdown-content.mdx | 2 +- src/content/docs/ko/guides/troubleshooting.mdx | 2 +- src/content/docs/ko/recipes/sharing-state-islands.mdx | 4 ++-- src/content/docs/ko/reference/errors/no-client-entrypoint.mdx | 2 +- src/content/docs/ko/tutorial/6-islands/1.mdx | 2 +- 15 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/docs/ko/basics/astro-components.mdx b/src/content/docs/ko/basics/astro-components.mdx index 2c0cab0ca1994..912e1a977531e 100644 --- a/src/content/docs/ko/basics/astro-components.mdx +++ b/src/content/docs/ko/basics/astro-components.mdx @@ -10,7 +10,7 @@ Astro 컴포넌트는 매우 유연합니다. Astro 컴포넌트에는 헤더나 Astro 컴포넌트에 대해 알아야 할 가장 중요한 점은 **클라이언트에서 렌더링되지 않는다**는 것입니다. 기본적으로 빌드 시 HTML로 렌더링되며, [서버 측 렌더링 (SSR)](/ko/guides/server-side-rendering/)을 사용하는 경우에는 사용자의 요청을 받을 때마다 HTML로 렌더링 됩니다. 컴포넌트 프런트매터에 JavaScript 코드를 포함할 수 있으며, 모든 내용은 사용자의 브라우저로 전송되는 최종 페이지에서 제거됩니다. 그 결과, JavaScript가 추가되지 않아 사이트가 더 빨라집니다. -Astro 컴포넌트가 클라이언트 측에서 상호작용 해야하는 경우, Astro 컴포넌트에 [표준 HTML `