Skip to content
Merged
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: 6 additions & 14 deletions src/content/docs/ko/guides/integrations-guide/mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -301,14 +301,14 @@ export default defineConfig({

<p>

**타입:** `MarkdownProcessor`<br />
**타입:** [`MarkdownProcessor`](/ko/reference/markdown-processors/unified/#markdownprocessor)<br />
**기본값:** [`markdown.processor`](/ko/reference/configuration-reference/#markdownprocessor)에서 상속됨<br />
<Since v="6.0.0" pkg="@astrojs/mdx" />
</p>

기본적으로 `.mdx` 파일은 `.md` 파일과 동일한 [Markdown 프로세서](/ko/guides/markdown-content/#markdown-프로세서)를 통해 렌더링됩니다. MDX 파일에 다른 프로세서를 구성하거나 동일한 프로세서에 다른 옵션을 지정할 수 있습니다.

예를 들어, `.md` 파일에는 기본 [Sätteri](https://satteri.bruits.org/) 프로세서를 사용하고 `.mdx` 파일은 `@astrojs/markdown-remark`를 통해 remark 및 rehype로 렌더링하려면 다음과 같이 설정합니다.
예를 들어, `.md` 파일에는 기본 [Sätteri](https://satteri.bruits.org/) 프로세서를 사용하고 `.mdx` 파일은 [`@astrojs/markdown-remark`](/ko/reference/markdown-processors/unified/)를 통해 remark 및 rehype로 렌더링하려면 다음과 같이 설정합니다.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
Expand All @@ -326,9 +326,9 @@ export default defineConfig({

<p><Since v="8.0.0" pkg="@astrojs/mdx" /></p>

recma 플러그인은 출력되는 [estree](https://github.com/estree/estree)를 직접 수정합니다. 이는 MDX 파일에서 JavaScript 변수를 수정하거나 삽입하는 데 유용하며, `.md` 파일에는 영향을 주지 않습니다.
recma 플러그인은 [unified 프로세서](/ko/reference/markdown-processors/unified/#unified)를 사용할 때 출력되는 [ESTree](https://github.com/estree/estree)를 직접 수정합니다. 이는 MDX 파일에서 JavaScript 변수를 수정하거나 삽입하는 데 유용하며, `.md` 파일에는 영향을 주지 않습니다.

recma 플러그인은 [Unified 프로세서](/ko/guides/markdown-content/#unified를-사용하는-경우)에서만 지원됩니다. `recmaPlugins` 옵션을 사용하여 `@astrojs/markdown-remark`의 `unified()`에 전달하세요.
기본적으로 MDX는 Markdown 구성을 [확장](#extendmarkdownconfig)합니다. 즉, [`markdown.processor`를 설정할 때 `unified()`](/ko/guides/markdown-content/#markdown-프로세서-설정하기)에 직접 전달할 수 있습니다. Markdown 구성을 확장하지 않으려면 MDX용으로 독립적으로 구성할 수도 있습니다:

```js title="astro.config.mjs" {3-4,8}
import { defineConfig } from 'astro/config';
Expand All @@ -343,8 +343,6 @@ export default defineConfig({
});
```

대신 [`markdown.processor`](/ko/reference/configuration-reference/#markdownprocessor)에 이러한 플러그인을 설정할 수도 있습니다. MDX는 기본적으로 Markdown 구성을 [확장](#extendmarkdownconfig)하므로 `.mdx` 파일에서도 해당 플러그인이 실행됩니다.

estree 출력을 실험하려면 [AST Explorer를 사용](https://astexplorer.net/)하고, JavaScript 노드 전체에서 검색하려면 [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/)를 사용해 보세요.

### `extendMarkdownConfig`
Expand Down Expand Up @@ -412,9 +410,7 @@ export default defineConfig({
### `recmaPlugins`

:::caution[지원 중단]
이 옵션은 지원 중단되었으며 향후 메이저 버전에서 제거될 예정입니다. 구성된 [`processor`](#processor)에 대신 `recmaPlugins`를 전달하세요.

[recma 플러그인 사용하기](#recma-플러그인-사용하기)에서 자세히 알아보세요.
이 옵션은 지원 중단되었으며 향후 메이저 버전에서 제거될 예정입니다. [`unified()` 프로세서](/ko/guides/markdown-content/#markdown-프로세서-설정하기)를 설치하고 recma 플러그인을 전달하세요.
:::

<p>
Expand All @@ -424,11 +420,7 @@ export default defineConfig({
<Since v="0.11.5" pkg="@astrojs/mdx" />
</p>

출력되는 [estree](https://github.com/estree/estree)를 직접 수정하는 플러그인입니다. 이는 MDX 파일에서 JavaScript 변수를 수정하거나 삽입하는 데 유용합니다.

Astro v7부터 기본 Markdown 프로세서는 recma 플러그인을 지원하지 않습니다. 프로젝트에서 recma 플러그인을 사용하는 경우, 대신 [`unified()` 프로세서](/ko/guides/markdown-content/#markdown-프로세서-설정하기)를 사용할 수 있습니다.

[AST Explorer를 사용](https://astexplorer.net/)하여 estree 출력을 수행하고 [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/)를 사용하여 JavaScript 노드를 검색하는 것이 좋습니다.
[`unified()`의 `recmaPlugins` 옵션](/ko/reference/markdown-processors/unified/#optionsrecmaplugins)에 대한 참조를 확인하세요. [MDX 구성에서 직접 사용할](#recma-플러그인-사용하기) 수도 있습니다.

### `optimize`

Expand Down
16 changes: 10 additions & 6 deletions src/content/docs/ko/guides/markdown-content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -228,13 +228,17 @@ Sätteri는 Astro v7부터 기본 Markdown 프로세서입니다. 다음과 같
- 빠른 Rust 기반 Markdown 및 MDX 컴파일러의 이점을 활용하려는 경우
- 프로젝트에 플러그인이 필요하지 않거나 직접 플러그인을 작성할 수 있는 경우

<ReadMore>[`satteri()` 참조](/ko/reference/markdown-processors/satteri/#satteri)에서 전체 옵션 및 기능 목록을 확인하세요.</ReadMore>

#### Unified를 사용하는 경우

Unified는 이전 Astro 버전에서 사용하던 프로세서입니다. 다음과 같은 경우에 사용하세요.

- 방대한 [remark](https://remark.js.org/) 또는 [rehype](https://github.com/rehypejs/rehype) 플러그인 생태계를 활용하려는 경우, 또는 [MDX 파일에서 recma 플러그인](/ko/guides/integrations-guide/mdx/#recma-플러그인-사용하기)이 필요한 경우
- 기존 Unified 플러그인을 Sätteri로 포팅할 준비가 되지 않은 경우

<ReadMore>[`unified()` 참조](/ko/reference/markdown-processors/unified/#unified)에서 전체 옵션 목록을 확인하세요.</ReadMore>

### Markdown 프로세서 설정하기

Astro는 [구문 강조](/ko/guides/syntax-highlighting/)와 Markdown 프로세서를 제어할 수 있는 [Markdown 구성 옵션](/ko/reference/configuration-reference/#markdown-옵션)을 제공합니다. 또한 각 Markdown 프로세서는 [구성 가능한 기능](#내장-기능)을 제공하며, Markdown 렌더링을 사용자 지정할 [플러그인](#markdown-프로세서-플러그인)을 추가할 수 있습니다.
Expand All @@ -245,7 +249,7 @@ Astro는 [구문 강조](/ko/guides/syntax-highlighting/)와 Markdown 프로세

<Steps>

1. [`@astrojs/markdown-satteri`](https://www.npmjs.com/package/@astrojs/markdown-satteri) 패키지를 설치합니다.
1. [`@astrojs/markdown-satteri`](/ko/reference/markdown-processors/satteri/) 패키지를 설치합니다.
<PackageManagerTabs>
<Fragment slot="npm">
```shell
Expand All @@ -264,7 +268,7 @@ Astro는 [구문 강조](/ko/guides/syntax-highlighting/)와 Markdown 프로세
</Fragment>
</PackageManagerTabs>

2. `@astrojs/markdown-satteri`에서 `satteri`를 가져와 Astro 구성의 [`markdown.processor`](/ko/reference/configuration-reference/#markdownprocessor) 옵션에 전달합니다.
2. [`satteri()` (`@astrojs/markdown-satteri`)](/ko/reference/markdown-processors/satteri/#satteri)를 가져와 Astro 구성의 [`markdown.processor`](/ko/reference/configuration-reference/#markdownprocessor) 옵션에 전달합니다.
```js title="astro.config.mjs"
import { defineConfig } from "astro/config";
import { satteri } from "@astrojs/markdown-satteri";
Expand All @@ -283,7 +287,7 @@ Astro는 [구문 강조](/ko/guides/syntax-highlighting/)와 Markdown 프로세

<Steps>

1. [`@astrojs/markdown-remark`](https://www.npmjs.com/package/@astrojs/markdown-remark) 패키지를 설치합니다.
1. [`@astrojs/markdown-remark`](/ko/reference/markdown-processors/unified/) 패키지를 설치합니다.
<PackageManagerTabs>
<Fragment slot="npm">
```shell
Expand All @@ -302,7 +306,7 @@ Astro는 [구문 강조](/ko/guides/syntax-highlighting/)와 Markdown 프로세
</Fragment>
</PackageManagerTabs>

2. `@astrojs/markdown-remark`에서 `unified`를 가져와 Astro 구성의 [`markdown.processor`](/ko/reference/configuration-reference/#markdownprocessor) 옵션에 전달합니다.
2. [`unified()` (`@astrojs/markdown-remark`)](/ko/reference/markdown-processors/unified/#unified)를 가져와 Astro 구성의 [`markdown.processor`](/ko/reference/configuration-reference/#markdownprocessor) 옵션에 전달합니다.
```js title="astro.config.mjs"
import { defineConfig } from "astro/config";
import { unified } from "@astrojs/markdown-remark";
Expand Down Expand Up @@ -502,7 +506,7 @@ Markdown 프로세서 플러그인을 사용하면 [목차 자동 생성](https:

<MarkdownProcessorTabs>
<Fragment slot="satteri">
[mdast](https://satteri.bruits.org/docs/plugins/#mdast-plugins) 또는 [hast](https://satteri.bruits.org/docs/plugins/#hast-plugins) 플러그인이 동작을 구성하는 옵션을 허용하는 경우, 플러그인 함수에 옵션 객체로 전달할 수 있습니다.
[mdast](/ko/reference/markdown-processors/satteri/#optionsmdastplugins) 또는 [hast](/ko/reference/markdown-processors/satteri/#optionshastplugins) 플러그인이 동작을 구성하는 옵션을 허용하는 경우, 플러그인 함수에 옵션 객체로 전달할 수 있습니다.

다음 예시는 Markdown 파일에 [`satteri-imgattr`](https://www.npmjs.com/package/satteri-imgattr)와 [`satteri-callouts`](https://www.npmjs.com/package/satteri-callouts)를 적용합니다.

Expand All @@ -527,7 +531,7 @@ Markdown 프로세서 플러그인을 사용하면 [목차 자동 생성](https:
```
</Fragment>
<Fragment slot="unified">
[remark](https://github.com/remarkjs/remark) 또는 [rehype](https://github.com/rehypejs/rehype) 플러그인이 동작을 구성하는 옵션을 허용하는 경우, 중첩 배열로 전달할 수 있습니다. 첫 번째 요소는 플러그인이고 두 번째 요소는 옵션 객체입니다.
[remark](/ko/reference/markdown-processors/unified/#optionsremarkplugins) 또는 [rehype](/ko/reference/markdown-processors/unified/#optionsrehypeplugins) 플러그인이 동작을 구성하는 옵션을 허용하는 경우, 중첩 배열로 전달할 수 있습니다. 첫 번째 요소는 플러그인이고 두 번째 요소는 옵션 객체입니다.

다음 예시는 Markdown 파일에 [`remark-imgattr`](https://www.npmjs.com/package/remark-imgattr)와 [`rehype-github-alerts`](https://www.npmjs.com/package/rehype-github-alerts)를 적용합니다.

Expand Down
Loading
Loading