작가:

생성:2026-01-20마지막 업데이트:2026-03-24

이 문서를 원하는 AI 어시스턴트에 참조하세요ChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다

버전 기록

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.02026. 3. 24.
"{{framework}}-intlayer에서 {{framework}}-intlayer/html으로 임포트 이동"
v8.5.02026. 3. 24.
"HTMLRenderer / useHTMLRenderer / renderHTML 유틸리티 추가"
v8.0.02026. 1. 22.
"HTML 파싱 지원 추가"
v8.0.02026. 1. 20.

이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.

영어 원본 내용의 최신 버전을 보기

문서 수정

이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.

문서에 대한 GitHub 링크

복사

문서의 Markdown을 클립보드에 복사

HTML 콘텐츠 / Intlayer의 HTML

Name: Intlayer
Author: Intlayer

Intlayer는 HTML 콘텐츠를 지원하여 사전(dictionary) 내에 풍부하고 구조화된 콘텐츠를 포함할 수 있습니다. 이 콘텐츠는 표준 HTML 태그로 렌더링되거나 런타임에 커스텀 컴포넌트로 교체될 수 있습니다.

HTML 콘텐츠 선언

HTML 콘텐츠는 html 함수를 사용하거나 단순 문자열로 선언할 수 있습니다.

HTML 콘텐츠를 명시적으로 선언하려면 html 함수를 사용하세요. 자동 감지가 비활성화된 경우에도 표준 태그가 올바르게 매핑되도록 보장합니다.

htmlDictionary.content.ts

코드 복사

코드를 클립보드에 복사

import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // 설정 파일에서 설정할 수 있음  content: {    myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

문자열에 일반적인 HTML 태그(예: <p>, <div>, <strong> 등)가 포함되어 있으면 Intlayer가 자동으로 변환합니다.

htmlDictionary.content.ts

코드 복사

코드를 클립보드에 복사

export default {  key: "app",  contentAutoTransformation: true, // 설정 파일에서 설정할 수 있음  content: {    myHtmlContent:  "<p>Hello <strong>World</strong></p>",  },};

파일에서 HTML 콘텐츠를 가져옵니다. 현재 file() 함수는 문자열을 반환하며, 해당 문자열에 태그가 포함된 경우 HTML로 자동 감지됩니다.

htmlDictionary.content.ts

코드 복사

코드를 클립보드에 복사

import { html, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),    }),  },};

`html()` 노드

html() 함수는 Intlayer v8의 새로운 기능으로, 사전에서 HTML 콘텐츠를 명시적으로 정의할 수 있게 해줍니다. Intlayer는 종종 HTML 콘텐츠를 자동으로 감지할 수 있지만, html() 함수를 사용하면 다음과 같은 몇 가지 장점이 있습니다:

타입 안전성: html() 함수를 사용하면 커스텀 컴포넌트에 필요한 props를 정의할 수 있어, 에디터에서 더 나은 자동 완성 및 타입 체크를 제공합니다.
명시적 선언: 자동 감지를 트리거하는 표준 HTML 태그가 포함되어 있지 않더라도 문자열이 항상 HTML로 처리되도록 보장합니다.
커스텀 컴포넌트 정의: html()의 두 번째 인자로 커스텀 컴포넌트와 예상되는 prop 타입을 정의하여 전달할 수 있습니다.

typescript

코드 복사

코드를 클립보드에 복사

import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='안녕하세요'>세계</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

HTML 노드에서 .use() 메서드를 사용할 때, 제공하는 컴포넌트는 html() 함수에 제공된 정의(사용 가능한 경우)에 따라 확인됩니다.

HTML 렌더링

렌더링은 Intlayer의 콘텐츠 시스템을 통해 자동으로 처리하거나, 전문 도구를 사용해 수동으로 처리할 수 있습니다.

자동 렌더링 (`useIntlayer` 사용)

useIntlayer로 콘텐츠에 접근하면 HTML 노드는 이미 렌더링 준비가 되어 있습니다.

HTML 노드는 JSX로 직접 렌더링할 수 있습니다. 표준 태그는 자동으로 작동합니다.

App.tsx

코드 복사

코드를 클립보드에 복사

import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

.use() 메서드를 사용하여 커스텀 컴포넌트를 제공하거나 태그를 오버라이드할 수 있습니다:

tsx

코드 복사

코드를 클립보드에 복사

{myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

Vue에서는 HTML 콘텐츠를 내장된 component를 사용하여 렌더링할 수 있습니다.

App.vue

코드 복사

코드를 클립보드에 복사

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

오버라이드를 적용하려면 .use()를 사용하세요:

vue

코드 복사

코드를 클립보드에 복사

<component :is="myHtmlContent.use({ h1: 'h2' })" />

Svelte는 HTML 노드를 문자열로 렌더링합니다. 이를 렌더링하려면 {@html}을 사용하세요.

svelte

코드 복사

코드를 클립보드에 복사

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}

Preact는 JSX에서 HTML 노드를 직접 지원합니다.

App.tsx

코드 복사

코드를 클립보드에 복사

import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Solid는 JSX에서 HTML 노드를 직접 지원합니다.

App.tsx

코드 복사

코드를 클립보드에 복사

import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Angular는 HTML 콘텐츠를 렌더링하기 위해 [innerHTML] 디렉티브를 사용합니다.

app.component.ts

코드 복사

코드를 클립보드에 복사

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

.use() 메서드를 사용하여 커스텀 컴포넌트를 제공하거나 태그를 오버라이드할 수 있습니다:

typescript

코드 복사

코드를 클립보드에 복사

content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})

`HTMLProvider`를 사용한 전역 구성

애플리케이션 전체에 대해 HTML 렌더링을 전역으로 구성할 수 있습니다. 이는 모든 HTML 콘텐츠에서 사용 가능해야 하는 커스텀 컴포넌트를 정의할 때 이상적입니다.

AppProvider.tsx

코드 복사

코드를 클립보드에 복사

import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);

나만의 HTML 렌더러를 사용할 수도 있습니다:

AppProvider.tsx

코드 복사

코드를 클립보드에 복사

import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);

HTML 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.

main.ts

코드 복사

코드를 클립보드에 복사

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  components: {    p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),    CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),  },});app.mount("#app");

나만의 HTML 렌더러를 사용할 수도 있습니다:

main.ts

코드 복사

코드를 클립보드에 복사

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  renderHTML: async (html) => {    const { renderHTML } = await import('vue-intlayer/html');    return renderHTML(html);  },});app.mount("#app");

HTML 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.

App.svelte

코드 복사

코드를 클립보드에 복사

<script lang="ts">  import { HTMLProvider } from "svelte-intlayer/html";  import MyCustomP from "./MyCustomP.svelte";</script><HTMLProvider  components={{    p: MyCustomP,  }}>  <slot /></HTMLProvider>

나만의 HTML 렌더러를 사용할 수도 있습니다:

App.svelte

코드 복사

코드를 클립보드에 복사

<script lang="ts">  import { HTMLProvider } from "svelte-intlayer/html";</script><HTMLProvider  renderHTML={async (html) => {    const { renderHTML } = await import('svelte-intlayer/html');    return renderHTML(html);  }}>  <slot /></HTMLProvider>

HTML 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.

AppProvider.tsx

코드 복사

코드를 클립보드에 복사

import { HTMLProvider } from "preact-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,    }}  >    {children}  </HTMLProvider>);

나만의 HTML 렌더러를 사용할 수도 있습니다:

AppProvider.tsx

코드 복사

코드를 클립보드에 복사

import { HTMLProvider } from "preact-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('preact-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);

HTML 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.

AppProvider.tsx

코드 복사

코드를 클립보드에 복사

import { HTMLProvider } from "solid-intlayer/html";export const AppProvider = (props) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,    }}  >    {props.children}  </HTMLProvider>);

나만의 HTML 렌더러를 사용할 수도 있습니다:

AppProvider.tsx

코드 복사

코드를 클립보드에 복사

import { HTMLProvider } from "solid-intlayer/html";export const AppProvider = (props) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('solid-intlayer/html');      return renderHTML(html);    }}  >    {props.children}  </HTMLProvider>);

HTML 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.

app.config.ts

코드 복사

코드를 클립보드에 복사

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};

나만의 HTML 렌더러를 사용할 수도 있습니다:

app.config.ts

코드 복사

코드를 클립보드에 복사

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      renderHTML: async (html) => {        const { renderHTML } = await import('angular-intlayer/html');        return renderHTML(html);      },    }),  ],};

HTML 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.

수동 렌더링 및 고급 도구

원시 HTML 문자열을 렌더링하거나 컴포넌트 매핑을 더 세밀하게 제어해야 하는 경우, 다음 도구들을 사용하세요.

`<HTMLRenderer />` 컴포넌트

tsx

코드 복사

코드를 클립보드에 복사

import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

`useHTMLRenderer()` 훅

미리 구성된 렌더러 함수를 얻습니다.

tsx

코드 복사

코드를 클립보드에 복사

import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Hello <strong>World</strong></p>");

`renderHTML()` 유틸리티

컴포넌트 외부에서 렌더링할 때 사용하는 독립 유틸리티입니다.

tsx

코드 복사

코드를 클립보드에 복사

import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

`<HTMLRenderer />` 컴포넌트

vue

코드 복사

코드를 클립보드에 복사

<script setup>import { HTMLRenderer } from "vue-intlayer/html";</script><template>  <HTMLRenderer content="<p>Hello World</p>" /></template>

`<HTMLRenderer />` 컴포넌트

svelte

코드 복사

코드를 클립보드에 복사

<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Hello World</p>" />

`useHTMLRenderer()` 훅

svelte

코드 복사

코드를 클립보드에 복사

<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Hello World</p>")}

`renderHTML()` 유틸리티

svelte

코드 복사

코드를 클립보드에 복사

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

`<HTMLRenderer />` 컴포넌트

tsx

코드 복사

코드를 클립보드에 복사

import { HTMLRenderer } from "preact-intlayer/html";<HTMLRenderer>  {"<p>Hello World</p>"}</HTMLRenderer>

`useHTMLRenderer()` 훅

tsx

코드 복사

코드를 클립보드에 복사

import { useHTMLRenderer } from "preact-intlayer/html";const render = useHTMLRenderer();return <div>{render("<p>Hello World</p>")}</div>;

`renderHTML()` 유틸리티

tsx

코드 복사

코드를 클립보드에 복사

import { renderHTML } from "preact-intlayer/html";return <div>{renderHTML("<p>Hello World</p>")}</div>;

`<HTMLRenderer />` 컴포넌트

tsx

코드 복사

코드를 클립보드에 복사

import { HTMLRenderer } from "solid-intlayer/html";<HTMLRenderer>  {"<p>Hello World</p>"}</HTMLRenderer>

`useHTMLRenderer()` 훅

tsx

코드 복사

코드를 클립보드에 복사

import { useHTMLRenderer } from "solid-intlayer/html";const render = useHTMLRenderer();return <div>{render("<p>Hello World</p>")}</div>;

`renderHTML()` 유틸리티

tsx

코드 복사

코드를 클립보드에 복사

import { renderHTML } from "solid-intlayer/html";return <div>{renderHTML("<p>Hello World</p>")}</div>;

`IntlayerHTMLService` 서비스

서비를 사용하여 HTML 문자열을 렌더링합니다.

typescript

코드 복사

코드를 클립보드에 복사

import { IntlayerHTMLService } from "angular-intlayer/html";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderHTML(html);  }}

옵션 참조

이 옵션들은 HTMLProvider, HTMLRenderer, useHTMLRenderer, 및 renderHTML에 전달할 수 있습니다.

테이블의 모든 내용 표시

테이블을 모달로 열어 모든 데이터를 명확하게 확인

옵션	타입	기본값	설명
`components`	`Record<string, any>`	`{}`	HTML 태그 또는 커스텀 컴포넌트 이름을 컴포넌트에 매핑한 맵.
`renderHTML`	`Function`	`null`	기본 HTML 파서를 완전히 대체하는 커스텀 렌더링 함수 (Vue/Svelte 프로바이더에만 해당).

참고: React 및 Preact의 경우 표준 HTML 태그가 자동으로 제공됩니다. 태그를 재정의하거나 커스텀 컴포넌트를 추가하려는 경우에만 components prop을 전달하면 됩니다.

Markdown 함수 가져오기

버전 기록

HTML 콘텐츠 / Intlayer의 HTML

HTML 콘텐츠 선언

html() 노드

HTML 렌더링

자동 렌더링 (useIntlayer 사용)

HTMLProvider를 사용한 전역 구성

수동 렌더링 및 고급 도구

<HTMLRenderer /> 컴포넌트

useHTMLRenderer() 훅

renderHTML() 유틸리티

옵션 참조

`html()` 노드

자동 렌더링 (`useIntlayer` 사용)

`HTMLProvider`를 사용한 전역 구성

`<HTMLRenderer />` 컴포넌트

`useHTMLRenderer()` 훅

`renderHTML()` 유틸리티