Skip to content

Commit 5d9ffaa

Browse files
i18n(ko-KR): update fonts.mdx and astro-assets.mdx (#13812)
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
1 parent 6ee3601 commit 5d9ffaa

2 files changed

Lines changed: 48 additions & 13 deletions

File tree

src/content/docs/ko/guides/fonts.mdx

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -273,23 +273,20 @@ export default defineConfig({
273273

274274
## 프로그래밍 방식으로 글꼴 데이터에 접근
275275

276-
Astro는 [`fontData`](/ko/reference/modules/astro-assets/#fontdata) 객체를 통해 글꼴 패밀리 데이터에 프로그래밍 방식으로 접근할 수 있는 저수준 API를 제공합니다. 이는 [API 라우트](/ko/guides/endpoints/#서버-엔드포인트-api-라우트)에서 [Satori](https://github.com/vercel/satori)를 사용하여 오픈 그래프 이미지를 생성하는 것과 같이 글꼴 파일에 직접 접근해야 하는 고급 사용 사례에 유용할 수 있습니다.
276+
Astro는 프로그래밍 방식으로 데이터에 액세스할 수 있는 로우레벨 API를 제공합니다:
277277

278-
이 저수준 API는 Astro가 프로젝트를 위해 다운로드한 모든 글꼴 파일과 해당 메타데이터에 접근할 수 있도록 해줍니다. 이는 필요한 특정 글꼴 파일을 찾기 위해 글꼴 파일을 필터링하고, 빌드 출력 구조를 기반으로 사용할 파일 경로를 결정하는 것은 사용자 책임이라는 것을 의미합니다.
278+
- [`fontData`](/ko/reference/modules/astro-assets/#fontdata) 객체를 통한 글꼴 패밀리 데이터
279+
- [`experimental_getFontFileURL()`](/ko/reference/modules/astro-assets/#experimental_getfontfileurl) 함수를 통한 글꼴 파일 URL
279280

280-
:::note
281-
현재 API에는 빌드 시 출력 경로에서 [글꼴 파일을 수동으로 로드해야 하는 알려진 제한](https://github.com/withastro/astro/issues/16139)이 있습니다.
281+
이는 [API 라우트](/ko/guides/endpoints/#서버-엔드포인트-api-라우트)에서 [Satori](https://github.com/vercel/satori)를 사용하여 오픈 그래프 이미지를 생성하는 경우와 같이 글꼴 파일에 직접 액세스해야 하는 고급 사용 사례에서 유용할 수 있습니다.
282282

283-
이 과정을 간소화하기 위한 새로운 API가 개발 중이며 향후 릴리스에서 제공될 예정입니다. GitHub 이슈를 구독하여 진행 상황을 확인할 수 있습니다.
284-
:::
283+
`fontData` 객체를 사용하면 Astro가 프로젝트를 위해 다운로드한 모든 글꼴 파일과 메타데이터에 액세스할 수 있습니다. 즉, 필요한 특정 파일을 찾기 위해 글꼴 파일을 필터링하고 URL 확인 후 데이터를 가져오는 과정은 사용자가 직접 처리해야 합니다.
285284

286285
다음 예시는 [하나의 글꼴과 그 형식이 구성되었으며](/ko/reference/configuration-reference/#fontformats), [Satori가 지원하는 형식](https://github.com/vercel/satori?tab=readme-ov-file#fonts)이라고 가정하고 정적 파일 엔드포인트에서 오픈 그래프 이미지를 생성합니다:
287286

288-
```tsx title="src/pages/og.png.ts" {2} "fontData[\"--font-roboto\"]"
287+
```tsx title="src/pages/og.png.ts" {2,14-15} "fontData[\"--font-roboto\"]"
289288
import type { APIRoute } from "astro";
290-
import { fontData } from "astro:assets";
291-
import { outDir } from "astro:config/server";
292-
import { readFile } from "node:fs/promises";
289+
import { fontData, experimental_getFontFileURL } from "astro:assets";
293290
import satori from "satori";
294291
import { html } from "satori-html";
295292
import sharp from "sharp";
@@ -301,9 +298,8 @@ export const GET: APIRoute = async (context) => {
301298
throw new Error("Cannot find the font path.");
302299
}
303300

304-
const data = import.meta.env.DEV
305-
? await fetch(new URL(fontPath, context.url.origin)).then(async (res) => res.arrayBuffer())
306-
: await readFile(new URL(`.${fontPath}`, outDir));
301+
const url = experimental_getFontFileURL(fontPath, context.url);
302+
const data = await fetch(url).then((res) => res.arrayBuffer());
307303

308304
const svg = await satori(
309305
html`<div style="color: black;">hello, world</div>`,

src/content/docs/ko/reference/modules/astro-assets.mdx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
getConfiguredImageService,
2929
imageConfig,
3030
fontData,
31+
experimental_getFontFileURL,
3132
} from 'astro:assets';
3233
```
3334

@@ -707,6 +708,44 @@ import { fontData } from "astro:assets"
707708
const data = fontData["--font-roboto"]
708709
```
709710

711+
### `experimental_getFontFileURL()`
712+
713+
<p>
714+
715+
**타입:** `(url: string, requestUrl?: URL) => Promise<string>`
716+
<Since v="6.2.0" />
717+
</p>
718+
719+
[`fontData`](#fontdata)에서 가져온 글꼴 파일 URL을 확인합니다:
720+
721+
```ts " experimental_getFontFileURL " {9}
722+
import { fontData, experimental_getFontFileURL } from "astro:assets";
723+
724+
const fontPath = fontData["--font-roboto"][0]?.src[0]?.url;
725+
726+
if (fontPath === undefined) {
727+
throw new Error("Cannot find the font path.");
728+
}
729+
730+
const url = experimental_getFontFileURL(fontPath);
731+
const buffer = await fetch(url).then((res) => res.arrayBuffer());
732+
```
733+
734+
[요청 시 렌더링](/ko/guides/on-demand-rendering/)되는 라우트에서 호출할 때는 요청 URL을 제공해야 합니다:
735+
736+
```ts "context.url"
737+
import type { APIRoute } from "astro";
738+
import { fontData, experimental_getFontFileURL } from "astro:assets"
739+
740+
export const prerender = false; // 'server' 모드에서는 필요하지 않습니다.
741+
742+
export const GET: APIRoute = async (context) => {
743+
// ...
744+
const url = experimental_getFontFileURL(fontPath, context.url);
745+
// ...
746+
};
747+
```
748+
710749
## `astro:assets` 타입
711750

712751
다음 타입은 가상 assets 모듈에서 가져옵니다.

0 commit comments

Comments
 (0)