i18n(ko-KR): create components-reference.mdx

src/content/docs/ko/reference/components-reference.mdx

@@ -0,0 +1,265 @@
+---
+title: 기본 제공 컴포넌트 참조
+i18nReady: true
+tableOfContents:
+ minHeadingLevel: 2
+ maxHeadingLevel: 2
+---
+import Since from '~/components/Since.astro';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import ReadMore from '~/components/ReadMore.astro';
+
+Astro에는 프로젝트에 사용할 수 있는 몇 가지 기본 제공 컴포넌트가 포함되어 있습니다. 모든 기본 제공 컴포넌트는 `.astro` 파일에서 사용할 수 있으며 가져오기 구문이 필요할 수 있습니다.
+
+이러한 컴포넌트의 `Props`는 [`ComponentProps` 타입](/ko/guides/typescript/#componentprops-타입) 유틸리티를 사용하여 참조할 수 있습니다.
+
+## `<Code />`
+
+```astro 'theme="dark-plus"' /wrap\b/ /(inline) \/>/ 'defaultColor={false}'
+---
+import { Code } from 'astro:components';
+---
+<!-- JavaScript 코드 구문 강조. -->
+<Code code={`const foo = 'bar';`} lang="js" />
+<!-- 선택적: 테마 사용자 정의. -->
+<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
+<!-- 선택적: 단어 줄 바꿈 사용. -->
+<Code code={`const foo = 'bar';`} lang="js" wrap />
+<!-- 선택적: 인라인 코드 출력. -->
+<p>
+ <Code code={`const foo = 'bar';`} lang="js" inline />
+ will be rendered inline.
+</p>
+<!-- 선택적: defaultColor (기본 색상) -->
+<Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />
+```
+
+이 컴포넌트는 빌드 시 코드 블록에 구문 강조 표시를 제공합니다 (클라이언트 측 JavaScript는 포함되지 않음). 이 컴포넌트는 내부적으로 Shiki에 의해 구동되며 인기 있는 모든 [테마](https://shiki.style/themes) 및 [언어](https://shiki.style/languages)를 지원합니다. 또한 사용자 정의 테마, 언어, [transformers](#transformers) 및 [기본 색상](https://shiki.style/guide/dual-themes#without-default-color)을 각각 `theme`, `lang`, `transformers`, `defaultColor` 속성에 전달하여 추가할 수 있습니다.
+
+:::note
+이 컴포넌트는 [Shiki 구성](/ko/guides/markdown-content/#shiki-구성)에서 설정을 상속하지 **않습니다**. 컴포넌트 속성을 사용하여 설정해야 합니다.
+:::
+
+### Transformers
+
+<p><Since v="4.11.0" /></p>
+
+[Shiki transformers](https://shiki.style/packages/transformers#shikijs-transformers)는 선택적으로 `transformers` 속성에 배열을 전달하여 코드에 적용할 수 있습니다. Astro v4.14.0부터는 [Shiki의 `meta` 속성](https://shiki.style/guide/transformers#meta)에 문자열을 제공하여 transformers에 옵션을 전달할 수도 있습니다.
+
+`transformers`는 클래스만 적용하므로 코드 블록의 요소를 타겟팅하려면 고유한 CSS 규칙을 제공해야 합니다.
+
+```astro title="src/pages/index.astro" {12-13}
+---
+import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers'
+import { Code } from 'astro:components'
+const code = `const foo = 'hello'
+const bar = ' world'
+console.log(foo + bar) // [!code focus]
+`
+---
+<Code
+ code={code}
+ lang="js"
+ transformers={[transformerMetaHighlight()]}
+ meta="{1,3}"
+/>
+
+<style is:global>
+ pre.has-focused .line:not(.focused) {
+ filter: blur(1px);
+ }
+</style>
+```
+
+## `<Fragment />`
+
+[`set:*` 지시어](/ko/reference/directives-reference/#sethtml)와 함께 사용하여 추가 래핑 요소 없이 HTML 콘텐츠를 렌더링하는 컴포넌트입니다:
+
+```astro title="src/components/SetHtml.astro" "Fragment"
+---
+const htmlString = '<p>Raw HTML content</p>';
+---
+<Fragment set:html={htmlString} />
+```
+
+Astro 구문에서 [프래그먼트 사용](/ko/basics/astro-syntax/#프래그먼트)에 대한 자세한 내용을 참조하세요.
+
+## `<Prism />`
+
+`Prism` 구문 강조 컴포넌트를 사용하려면 먼저 `@astrojs/prism` 패키지를 **설치**하세요:
+
+<PackageManagerTabs>
+ <Fragment slot="npm">
+ ```shell
+ npm install @astrojs/prism
+ ```
+ </Fragment>
+ <Fragment slot="pnpm">
+ ```shell
+ pnpm add @astrojs/prism
+ ```
+ </Fragment>
+ <Fragment slot="yarn">
+ ```shell
+ yarn add @astrojs/prism
+ ```
+ </Fragment>
+</PackageManagerTabs>
+
+```astro
+---
+import { Prism } from '@astrojs/prism';
+---
+<Prism lang="js" code={`const foo = 'bar';`} />
+```
+
+이 컴포넌트는 Prism의 CSS 클래스를 적용하여 코드 블록에 언어별 구문 강조 표시를 제공합니다. 구문 강조 표시를 나타내기 위해 **Prism CSS 스타일시트를 제공**하거나 직접 가져와야 한다는 점에 유의하세요! 자세한 내용은 [Prism 구성 섹션](/ko/guides/markdown-content/#prism-구성)을 참조하세요.
+
+[Prism에서 지원하는 언어 목록](https://prismjs.com/#supported-languages)에서 해당 언어의 별칭을 찾을 수 있습니다. 또한 `lang="astro"`를 사용하여 Astro 코드 블록을 표시할 수도 있습니다!
+
+## `<Image />`
+
+```astro title="src/components/MyComponent.astro"
+---
+// 이미지 컴포넌트와 이미지 가져오기
+import { Image } from 'astro:assets';
+import myImage from "../assets/my_image.png"; // 이미지는 1600x900
+---
+
+<!-- 이미지 컴포넌트에서 `alt`는 필수입니다. -->
+<Image src={myImage} alt="A description of my image." />
+```
+
+```html
+<!-- 출력 -->
+<!-- 이미지가 최적화되고 적절한 속성이 적용됩니다. -->
+<img
+ src="/_astro/my_image.hash.webp"
+ width="1600"
+ height="900"
+ decoding="async"
+ loading="lazy"
+ alt="A description of my image."
+/>
+```
+### 속성
+
+- src (필수)
+- alt (필수)
+- width and height (`public/` 및 원격 이미지에 대해 필수)
+- format
+- quality
+- densities
+- widths
+
+위의 속성 외에도 `<Image />` 컴포넌트는 HTML `<img>` 태그가 허용하는 모든 속성을 허용합니다.
+
+자세한 내용은 [이미지 가이드](/ko/guides/images/#image--astroassets)를 참조하세요.
+
+## `<Picture />`
+
+<p><Since v="3.3.0" /></p>
+
+기본으로 제공되는 `<Picture />` Astro 컴포넌트를 사용하여 다양한 형식 및/또는 크기의 반응형 이미지를 표시할 수 있습니다.
+
+```astro title="src/pages/index.astro"
+---
+import { Picture } from 'astro:assets';
+import myImage from "../assets/my_image.png"; // 이미지는 1600x900
+---
+
+<!-- Picture 컴포넌트에서 `alt`는 필수입니다. -->
+<Picture src={myImage} formats={['avif', 'webp']} alt="A description of my image." />
+```
+
+```html
+<!-- 출력 -->
+<picture>
+ <source srcset="/_astro/my_image.hash.avif" type="image/avif" />
+ <source srcset="/_astro/my_image.hash.webp" type="image/webp" />
+ <img
+ src="/_astro/my_image.hash.png"
+ width="1600"
+ height="900"
+ decoding="async"
+ loading="lazy"
+ alt="A description of my image."
+ />
+</picture>
+```
+
+자세한 내용은 [이미지 가이드](/ko/guides/images/#picture-)를 참조하세요.
+
+### 속성
+
+`<Picture />`은 `<Image />` 컴포넌트의 모든 속성과 함께 다음을 허용합니다:
+
+#### `formats`
+
+`<source>` 태그에 사용할 이미지 형식의 배열입니다. 기본적으로 `['webp']`로 설정되어 있습니다.
+
+#### `fallbackFormat`
+
+`<img>` 태그의 대체 값으로 사용할 형식입니다. 기본값은 정적 이미지의 경우 `.png`, 애니메이션 이미지의 경우 `.gif`, SVG 파일의 경우 `.svg`입니다.
+
+#### `pictureAttributes`
+
+`<picture>` 태그에 추가할 속성의 객체입니다. 이 속성을 사용하여 외부 `<picture>` 요소 자체에 속성을 적용할 수 있습니다. `<Picture />` 컴포넌트에 적용된 속성은 이미지 변환에 사용된 속성을 제외하고 내부 `<img>` 요소에 직접 적용됩니다.
+
+
+## `<Content />`
+
+[콘텐츠 컬렉션 항목](/ko/guides/content-collections/#콘텐츠-컬렉션이란-무엇입니까)의 콘텐츠를 렌더링하는 데 사용되는 일반 컴포넌트입니다.
+
+먼저 `getCollection()` 또는 `getEntry()`를 사용하여 하나 이상의 항목을 쿼리합니다. 그러면 `entry.render()` 함수는 `.astro` 파일 템플릿에서 사용할 `<Content />` 컴포넌트를 반환할 수 있습니다.
+
+```astro title="src/pages/render-example.astro" {4, 7}
+---
+import { getEntry } from 'astro:content';
+const entry = await getEntry('blog', 'post-1');
+const { Content } = await entry.render();
+---
+<p>Published on: {entry.data.published.toDateString()}</p>
+<Content />
+```
+
+## `<ViewTransitions />`
+
+<p><Since v="2.9.0" /></p>
+
+원하는 모든 페이지의 `<head>`에 `<ViewTransitions />` 라우팅 컴포넌트를 가져와 추가하여 개별 페이지에서 view transitions를 사용하도록 설정합니다.
+
+```astro title="src/pages/index.astro" ins={2,7}
+---
+import { ViewTransitions } from 'astro:transitions';
+---
+<html lang="en">
+ <head>
+ <title>My Homepage</title>
+ <ViewTransitions />
+ </head>
+ <body>
+ <h1>Welcome to my website!</h1>
+ </body>
+</html>
+```
+
+페이지 요소 및 컴포넌트에 [라우터 제어](/ko/guides/view-transitions/#라우터-제어) 및 [전환 지시어를 추가](/ko/guides/view-transitions/#전환-지시어)하는 방법에 대한 자세한 내용을 참조하세요.
+
+## `<Debug />`
+
+```astro
+---
+import { Debug } from 'astro:components';
+const serverObject = {
+ a: 0,
+ b: "string",
+ c: {
+ nested: "object"
+ }
+}
+---
+<Debug {serverObject} />
+```
+
+이 컴포넌트는 JavaScript 없이 클라이언트 측에서 값을 검사할 수 있는 방법을 제공합니다.