이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다
Intlayer MCP 서버를 통해 ChatGPT, DeepSeek, Cursor, VSCode 등에서 직접 문서를 검색할 수 있습니다.
MCP 서버 문서 보기이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.
영어 원본 내용의 최신 버전을 보기이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.
문서에 대한 GitHub 링크문서의 Markdown을 클립보드에 복사
번역
번역 정의하기
intlayer의 t 함수는 여러 언어로 콘텐츠를 선언할 수 있게 해줍니다. 이 함수는 타입 안전성을 보장하며, 번역이 누락된 경우 오류를 발생시켜 특히 TypeScript 환경에서 유용합니다.
다음은 번역이 포함된 콘텐츠를 선언하는 예시입니다.
코드를 클립보드에 복사
import { t, type Dictionary } from "intlayer";interface Content { welcomeMessage: string;}export default { key: "multi_lang", content: { welcomeMessage: t({ en: "Welcome to our application", fr: "Bienvenue dans notre application", es: "Bienvenido a nuestra aplicación", }), },} satisfies Dictionary<Content>;
로케일 구성
적절한 번역 처리를 보장하기 위해 intlayer.config.ts에서 허용되는 로케일을 구성할 수 있습니다. 이 구성은 애플리케이션이 지원하는 언어를 정의할 수 있게 합니다:
코드를 클립보드에 복사
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;
로케일 구성
적절한 번역 처리를 보장하기 위해 intlayer.config.ts에서 허용되는 로케일을 구성할 수 있습니다. 이 구성은 애플리케이션이 지원하는 언어를 정의할 수 있게 해줍니다:
코드를 클립보드에 복사
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;
React 컴포넌트에서 번역 사용하기
react-intlayer를 사용하면 React 컴포넌트 내에서 번역을 사용할 수 있습니다. 다음은 예시입니다:
코드를 클립보드에 복사
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => { const content = useIntlayer("multi_lang"); return ( <div> <p>{content.welcomeMessage}</p> {/* 현재 로케일에 맞는 환영 메시지를 표시합니다 */} </div> );};export default MyComponent;
이 컴포넌트는 애플리케이션에 설정된 현재 로케일에 따라 해당 번역을 가져옵니다.
사용자 정의 콘텐츠 객체
intlayer는 번역을 위한 사용자 정의 콘텐츠 객체를 지원하여, 더 복잡한 구조를 정의하면서 타입 안전성을 보장할 수 있습니다. 다음은 사용자 정의 객체의 예시입니다:
코드를 클립보드에 복사
import { t, type Dictionary } from "intlayer";interface ICustomContent { title: string; content: string;}const customContent = { key: "custom_content", content: { profileText: t<ICustomContent>({ en: { title: "Page Title", content: "Page Content", }, fr: { title: "Titre de la Page", content: "Contenu de la Page", }, es: { title: "Título de la Página", content: "Contenido de la Página", }, }), },} satisfies Dictionary;export default customContent;
문서 이력
- 5.5.10 - 2025-06-29: 초기 이력