Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
20 changes: 14 additions & 6 deletions src/content/docs/ko/reference/modules/astro-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -450,6 +450,11 @@ import myImage from '../assets/my_image.png';
기본적으로 Sharp는 이미지를 평면화할 때 검은색 배경을 사용합니다. 다른 배경색을 지정하는 것은 투명한 배경을 가진 이미지를 투명도를 지원하지 않는 형식 (예: `.jpeg`)으로 변환할 때 특히 유용합니다.

```astro title="src/components/MyComponent.astro" "background"
---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---

<Image
src={myImage}
alt="A description of my image"
Expand Down Expand Up @@ -735,12 +740,13 @@ const buffer = await fetch(url).then((res) => res.arrayBuffer());

```ts "context.url"
import type { APIRoute } from "astro";
import { fontData, experimental_getFontFileURL } from "astro:assets"
import { fontData, experimental_getFontFileURL } from "astro:assets";

export const prerender = false; // 'server' 모드에서는 필요하지 않습니다.

export const GET: APIRoute = async (context) => {
// ...
const fontPath = fontData["--font-roboto"][0]?.src[0]?.url;
const url = experimental_getFontFileURL(fontPath, context.url);
// ...
};
Expand Down Expand Up @@ -855,11 +861,13 @@ import {
import { baseService } from "astro/assets";

const newImageService = {
getURL: baseService.getURL,
parseURL: baseService.parseURL,
getHTMLAttributes: baseService.getHTMLAttributes,
async transform(inputBuffer, transformOptions) {...}
}
getURL: baseService.getURL,
parseURL: baseService.parseURL,
getHTMLAttributes: baseService.getHTMLAttributes,
async transform(inputBuffer, transformOptions) {
/* ... */
},
};
```

### `getConfiguredImageService()`
Expand Down
12 changes: 10 additions & 2 deletions src/content/docs/ko/reference/renderer-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,16 @@ import type {

렌더러는 이 값을 사용하여 조건부로 클라이언트 측 하이드레이션 상태를 포함할 수 있습니다. 예를 들어, 렌더러는 하이드레이션되지 않을 컴포넌트에 대한 전송 상태 직렬화를 건너뛸 수 있습니다:

```ts
async function renderToStaticMarkup(Component, props, children, metadata) {
```ts title="my-renderer/server.ts"
import type { AstroComponentMetadata } from 'astro';
import { render } from './custom-render';

async function renderToStaticMarkup(
Component: any,
props: Record<string, unknown>,
slots: Record<string, string>,
metadata?: AstroComponentMetadata,
) {
const willHydrate = !!metadata?.hydrate;
// 하이드레이션되지 않을 컴포넌트의 경우 전송 상태 직렬화 건너뛰기
return render(Component, props, { includeTransferState: willHydrate });
Expand Down
Loading