Skip to content

i18n(ko-KR): update images.mdx #10285

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
Dec 8, 2024
Merged

i18n(ko-KR): update images.mdx #10285

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fa3f75
i18n(ko-KR): update `images.mdx`
jsparkdev Dec 8, 2024
e901fee
Merge branch 'main' into images
yanthomasdev Dec 8, 2024
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
28 changes: 6 additions & 22 deletions src/content/docs/ko/guides/images.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,17 +355,15 @@ coverAlt: "A photograph of a sunset behind a mountain range."
This is a blog post
```

콘텐츠 컬렉션 스키마의 `image` 도우미를 사용하면 Zod를 사용하여 이미지 메타데이터의 유효성을 검사할 수 있습니다.
콘텐츠 컬렉션 스키마의 `image` 도우미를 사용하면 이미지를 검증하고 가져올 수 있습니다.

```ts title="src/content/config.ts"
```ts title="src/content.config.ts"
import { defineCollection, z } from "astro:content";

const blogCollection = defineCollection({
schema: ({ image }) => z.object({
title: z.string(),
cover: image().refine((img) => img.width >= 1080, {
message: "Cover image must be at least 1080 pixels wide!",
}),
cover: image(),
coverAlt: z.string(),
}),
});
Expand Down Expand Up @@ -402,7 +400,7 @@ const allBlogPosts = await getCollection("blog");

다른 Astro 컴포넌트와 마찬가지로 `<Image />` 컴포넌트는 UI 프레임워크 컴포넌트에서 사용할 수 없습니다.

그러나 `<Image />`에서 생성된 정적 콘텐츠를 `.astro` 파일의 프레임워크 컴포넌트에 자식으로 전달하거나 [명명된 `<slot/>`](/ko/guides/framework-components/#프레임워크-컴포넌트에서-astro-컴포넌트를-사용할-수-있나요)]을 사용하여 전달할 수 있습니다:
그러나 `<Image />`에서 생성된 정적 콘텐츠를 `.astro` 파일의 프레임워크 컴포넌트에 [자식으로](/ko/guides/framework-components/#프레임워크-컴포넌트에-자식-요소-전달) 전달하거나 [명명된 `<slot/>`](/ko/guides/framework-components/#프레임워크-컴포넌트에서-astro-컴포넌트를-사용할-수-있나요)]을 사용하여 전달할 수 있습니다:

```astro title="src/components/ImageWrapper.astro"
---
Expand Down Expand Up @@ -467,25 +465,11 @@ pnpm add sharp
```
:::

### Squoosh 구성

[Squoosh](https://github.com/GoogleChromeLabs/squoosh)를 사용하여 이미지를 변환하려면 다음과 같이 구성을 업데이트하세요.

```js title="astro.config.mjs" ins={4-6}
import { defineConfig, squooshImageService } from 'astro/config';

export default defineConfig({
image: {
service: squooshImageService(),
},
});
```

### 무작동 패스스루 서비스 구성

[`server` 또는 `hybrid` 모드용 어댑터](https://astro.build/integrations/?search=&categories%5B%5D=adapters)가 Astro의 내장 Squoosh 및 Sharp 이미지 최적화를 지원하지 않는 경우 (예: Deno, Cloudflare) `<Image />` 및 `<Picture />` 컴포넌트를 사용할 수 있도록 무작동 이미지 서비스를 구성할 수 있습니다. Astro는 이러한 환경에서 이미지 변환 및 처리를 수행하지 않습니다. 그러나 CLS (Cumulative Layout Shift) 없음, 강제된 `alt` 속성 및 일관된 작성 환경을 포함하여 `astro:assets` 사용의 다른 이점을 계속 누릴 수 있습니다.
[어댑터](https://astro.build/integrations/?search=&categories%5B%5D=adapters)가 Astro의 내장 Sharp 이미지 최적화를 지원하지 않는 경우 (예: Deno, Cloudflare) `<Image />` 및 `<Picture />` 컴포넌트를 사용할 수 있도록 무작동 이미지 서비스를 구성할 수 있습니다. Astro는 이러한 환경에서 이미지 변환 및 처리를 수행하지 않습니다. 그러나 CLS (Cumulative Layout Shift) 없음, 강제된 `alt` 속성 및 일관된 작성 환경을 포함하여 `astro:assets` 사용의 다른 이점을 계속 누릴 수 있습니다.

Squoosh 및 Sharp 이미지 처리를 모두 방지하려면 `passthroughImageService()`를 구성하세요.
Sharp의 이미지 처리를 방지하려면 `passthroughImageService()`를 구성하세요.

```js title="astro.config.mjs" ins={4-6} "passthroughImageService"
import { defineConfig, passthroughImageService } from 'astro/config';
Expand Down