-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into project-structure
- Loading branch information
Showing
17 changed files
with
656 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 없이 클라이언트 측에서 값을 검사할 수 있는 방법을 제공합니다. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
src/content/docs/ko/reference/errors/render-undefined-entry-error.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| --- | ||
| title: Attempted to render an undefined content collection entry. | ||
| i18nReady: true | ||
| githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts | ||
| --- | ||
|
|
||
| ## 무엇이 잘못되었나요? | ||
| Astro에서 정의되지 않은 콘텐츠 컬렉션 항목을 렌더링하려고 했습니다. 존재하지 않는 항목을 렌더링하려고 하면 이 오류가 발생할 수 있습니다. | ||
|
|
||
|
|
||
|
|
Oops, something went wrong.