애플리케이션 콘텐츠의 범위를 지정하면 대규모 애플리케이션의 유지 관리가 용이해집니다. 전체 콘텐츠 코드베이스를 검토해야 하는 정신적 부담 없이 단일 기능 폴더를 복제하거나 삭제할 수 있습니다. 또한 Intlayer는 완전히 유형되어 콘텐츠의 정확성을 보장합니다.

콘텐츠를 같은 위치에 배치하면 LLM(대형 언어 모델)에 필요한 컨텍스트가 줄어듭니다. Intlayer에는 누락된 번역을 테스트하기 위한 CLI, LSP, MCP 및 agent)와 같은 도구 모음도 함께 제공됩니다. 기술, AI 에이전트를 위한 개발자 경험(DX)을 더욱 원활하게 만듭니다.

AI 공급자의 비용으로 선택한 LLM을 사용하여 CI/CD 파이프라인을 번역하려면 자동화를 사용하세요. Intlayer는 또한 콘텐츠 추출을 자동화하는 컴파일러와 백그라운드에서 번역을 돕는 웹 플랫폼을 제공합니다.

대규모 JSON 파일을 구성 요소에 연결하면 성능 및 반응성 문제가 발생할 수 있습니다. Intlayer는 빌드 시 콘텐츠 로딩을 최적화합니다.

Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는 자체 호스팅 비주얼 편집기 및 전체 CMS를 제공합니다. 다국어 콘텐츠를 실시간으로 제공하여 번역가, 카피라이터, 기타 팀원과 원활하게 협업할 수 있습니다. 콘텐츠는 로컬 및/또는 원격으로 저장될 수 있습니다.

Vite 및 Vanilla JS 애플리케이션에서 Intlayer를 설정하는 단계별 가이드

1
종속성 설치

npm을 사용하여 필요한 패키지를 설치합니다:
bash
코드 복사
코드를 클립보드에 복사
npx intlayer@canary init --interactive # v9# npx intlayer init # v8
npx intlayer@canary init --interactive # v9# npx intlayer init # v8
--interactive 플래그는 선택 사항입니다. AI 에이전트인 경우 intlayer-cli init를 사용하세요.

이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:
bash
코드 복사
코드를 클립보드에 복사
npm install intlayer vanilla-intlayernpm install vite-intlayer --save-dev
npm install intlayer vanilla-intlayernpm install vite-intlayer --save-dev
- intlayer 구성 관리, 번역, 콘텐츠 선언, 트랜스파일 및 CLI 명령을 위한 국제화 도구를 제공하는 핵심 패키지입니다.
- vanilla-intlayer Intlayer를 순수 JavaScript / TypeScript 애플리케이션과 통합하는 패키지입니다. 펍/섭 싱글톤(IntlayerClient)과 콜백 기반 헬퍼(useIntlayer, useLocale 등)를 제공하여 UI 프레임워크에 의존하지 않고도 앱의 모든 부분에서 로케일 변경에 반응할 수 있습니다.
- vite-intlayer Intlayer를 Vite 번들러와 통합하기 위한 Vite 플러그인과 사용자의 선호 로케일 감지, 쿠키 관리 및 URL 리디렉션 처리를 위한 미들웨어를 포함합니다.
2
프로젝트 구성

애플리케이션의 언어를 구성하기 위해 설정 파일을 생성합니다:
intlayer.config.ts
코드 복사
코드를 클립보드에 복사
```
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // 기타 로케일
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
```
이 구성 파일을 통해 로컬라이즈된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자, 콘솔에서 Intlayer 로그 비활성화 등을 설정할 수 있습니다. 사용 가능한 파라미터의 전체 목록은 구성 문서를 참조하세요.
3
Vite 구성에 Intlayer 통합

구성 파일에 intlayer 플러그인을 추가합니다.
vite.config.ts
코드 복사
코드를 클립보드에 복사
```
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});
```
intlayer() Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의합니다. 또한 성능 최적화를 위한 별칭을 제공합니다.

엔트리 포인트에서 Intlayer 부트스트랩

글로벌 로케일 싱글톤이 준비되도록 콘텐츠가 렌더링되기 전에 installIntlayer()를 호출합니다.

src/main.ts

코드 복사

코드를 클립보드에 복사

import { installIntlayer } from "vanilla-intlayer";// i18n 콘텐츠를 렌더링하기 전에 호출해야 합니다.installIntlayer();// 앱 모듈을 가져와서 실행합니다.import "./app.js";

import { installIntlayer } from "vanilla-intlayer";// i18n 콘텐츠를 렌더링하기 전에 호출해야 합니다.installIntlayer();// 앱 모듈을 가져와서 실행합니다.import "./app.js";

md() 콘텐츠 선언(Markdown)을 사용하는 경우 마크다운 렌더러도 설치하세요:

src/main.ts

코드 복사

코드를 클립보드에 복사

import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";installIntlayer();installIntlayerMarkdown();import "./app.js";

import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";installIntlayer();installIntlayerMarkdown();import "./app.js";

콘텐츠 선언하기

번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리합니다:

src/app.content.ts

코드 복사

코드를 클립보드에 복사

import { insert, t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Vanilla",

    viteLogoLabel: t({
      en: "Vite Logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),

    count: insert(
      t({
        en: "count is {{count}}",
        fr: "le compte est {{count}}",
        es: "el recuento es {{count}}",
      })
    ),

    readTheDocs: t({
      en: "Click on the Vite logo to learn more",
      fr: "Cliquez sur le logo Vite pour en savoir plus",
      es: "Vite 로고를 클릭하여 더 자세히 알아보세요",
    }),
  },
} satisfies Dictionary;

export default appContent;

콘텐츠 선언은 contentDir 디렉토리(기본값 ./src)에 포함되어 있고 콘텐츠 선언 파일 확장자(기본값 .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml})와 일치하면 애플리케이션 어디에서나 정의할 수 있습니다.

자세한 내용은 콘텐츠 선언 문서를 참조하세요.

JavaScript에서 Intlayer 사용하기

vanilla-intlayer는 react-intlayer 서비스 API를 따릅니다: useIntlayer(key, locale?)는 번역된 콘텐츠를 직접 반환합니다. 결과에 .onChange()를 체이닝하여 로케일 변경을 구독할 수 있으며, 이는 React 리렌더링과 명시적으로 동일한 효과를 냅니다.

src/main.ts

코드 복사

코드를 클립보드에 복사

import { installIntlayer, useIntlayer } from "vanilla-intlayer";installIntlayer();// 현재 로케일에 대한 초기 콘텐츠를 가져옵니다.// 로케일이 변경될 때마다 알림을 받으려면 .onChange()를 체이닝합니다.const content = useIntlayer("app").onChange((newContent) => {  // 영향을 받는 DOM 노드만 다시 렌더링하거나 패치합니다.  document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(    newContent.title  );  document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =    String(newContent.readTheDocs);});// 초기 렌더링document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(  content.title);document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =  String(content.readTheDocs);

import { installIntlayer, useIntlayer } from "vanilla-intlayer";installIntlayer();// 현재 로케일에 대한 초기 콘텐츠를 가져옵니다.// 로케일이 변경될 때마다 알림을 받으려면 .onChange()를 체이닝합니다.const content = useIntlayer("app").onChange((newContent) => {  // 영향을 받는 DOM 노드만 다시 렌더링하거나 패치합니다.  document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(    newContent.title  );  document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =    String(newContent.readTheDocs);});// 초기 렌더링document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(  content.title);document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =  String(content.readTheDocs);

리프 값들을 String()으로 감싸서 문자열로 액세스하면 노드의 toString() 메서드를 호출하여 번역된 텍스트를 반환합니다.

네이티브 HTML 속성(예: alt, aria-label)에 대한 값이 필요한 경우 .value를 직접 사용하세요:
typescript
코드 복사
코드를 클립보드에 복사
img.alt = content.viteLogoLabel.value;
img.alt = content.viteLogoLabel.value;

콘텐츠의 언어 변경하기

선택사항

콘텐츠의 언어를 변경하려면 useLocale에서 노출된 setLocale 함수를 사용하세요.

src/locale-switcher.ts

코드 복사

코드를 클립보드에 복사

import { getLocaleName } from "intlayer";import { useLocale } from "vanilla-intlayer";export function setupLocaleSwitcher(container: HTMLElement): () => void {  const { locale, availableLocales, setLocale, subscribe } = useLocale();  const select = document.createElement("select");  select.setAttribute("aria-label", "Language");  const render = (currentLocale: string) => {    select.innerHTML = availableLocales      .map(        (loc) =>          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>            ${getLocaleName(loc)}          </option>`      )      .join("");  };  render(locale);  container.appendChild(select);  select.addEventListener("change", () => setLocale(select.value as any));  // 다른 곳에서 로케일이 변경될 때 드롭다운을 동기화 상태로 유지합니다.  return subscribe((newLocale) => render(newLocale));}

import { getLocaleName } from "intlayer";import { useLocale } from "vanilla-intlayer";export function setupLocaleSwitcher(container: HTMLElement): () => void {  const { locale, availableLocales, setLocale, subscribe } = useLocale();  const select = document.createElement("select");  select.setAttribute("aria-label", "Language");  const render = (currentLocale: string) => {    select.innerHTML = availableLocales      .map(        (loc) =>          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>            ${getLocaleName(loc)}          </option>`      )      .join("");  };  render(locale);  container.appendChild(select);  select.addEventListener("change", () => setLocale(select.value as any));  // 다른 곳에서 로케일이 변경될 때 드롭다운을 동기화 상태로 유지합니다.  return subscribe((newLocale) => render(newLocale));}

마크다운 및 HTML 콘텐츠 렌더링하기

선택사항

Intlayer는 md() 및 html() 콘텐츠 선언을 지원합니다. Vanilla JS에서 컴파일된 출력은 innerHTML을 통해 원시 HTML로 삽입됩니다.

HTML 컴파일 및 주입:

src/main.ts

코드 복사

코드를 클립보드에 복사

import {  compileMarkdown,  installIntlayerMarkdown,  useIntlayer,} from "vanilla-intlayer";installIntlayerMarkdown();const content = useIntlayer("app").onChange((newContent) => {  const el = document.querySelector<HTMLDivElement>(".edit-note")!;  el.innerHTML = compileMarkdown(String(newContent.editNote));});document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =  compileMarkdown(String(content.editNote));

import {  compileMarkdown,  installIntlayerMarkdown,  useIntlayer,} from "vanilla-intlayer";installIntlayerMarkdown();const content = useIntlayer("app").onChange((newContent) => {  const el = document.querySelector<HTMLDivElement>(".edit-note")!;  el.innerHTML = compileMarkdown(String(newContent.editNote));});document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =  compileMarkdown(String(content.editNote));

TIP
String(content.editNote)는 IntlayerNode에서 toString()을 호출하여 원시 마크다운 문자열을 반환합니다. 이를 compileMarkdown에 전달하여 HTML 문자열을 얻은 다음 innerHTML을 통해 설정하세요.

WARNING
신뢰할 수 있는 콘텐츠에만 innerHTML을 사용하세요. 마크다운이 사용자 입력에서 온 경우 먼저 살균(예: DOMPurify 사용) 처리하세요. 살균 렌더러를 동적으로 설치할 수 있습니다:
typescript
코드 복사
코드를 클립보드에 복사
import { installIntlayerMarkdownDynamic } from "vanilla-intlayer";await installIntlayerMarkdownDynamic(async () => {  const DOMPurify = await import("dompurify");  return (markdown) => DOMPurify.sanitize(compileMarkdown(markdown));});
import { installIntlayerMarkdownDynamic } from "vanilla-intlayer";await installIntlayerMarkdownDynamic(async () => {  const DOMPurify = await import("dompurify");  return (markdown) => DOMPurify.sanitize(compileMarkdown(markdown));});

9
애플리케이션에 로컬라이즈된 라우팅 추가하기
선택사항

각 언어에 대해 고유한 라우트를 만들려면(SEO에 유용함) Vite 구성에서 서버 측 로케일 감지를 위해 intlayerProxy를 사용할 수 있습니다.

먼저, Vite 구성에 intlayerProxy를 추가합니다:

프로덕션에서 intlayerProxy를 사용하려면 vite-intlayer를 devDependencies에서 dependencies로 이동해야 한다는 점에 유의하세요.
vite.config.ts
코드 복사
코드를 클립보드에 복사
```
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});
```

로케일 변경 시 URL 변경하기

선택사항

로케일이 변경될 때 브라우저 URL을 업데이트하려면 Intlayer를 설치한 후 useRewriteURL()을 호출하세요:

src/main.ts

코드 복사

코드를 클립보드에 복사

import { installIntlayer, useRewriteURL } from "vanilla-intlayer";installIntlayer();// 즉시 그리고 이후 로케일 변경 시마다 URL을 재정의합니다.// 정리를 위해 구독 해제 함수를 반환합니다.const stopRewriteURL = useRewriteURL();

import { installIntlayer, useRewriteURL } from "vanilla-intlayer";installIntlayer();// 즉시 그리고 이후 로케일 변경 시마다 URL을 재정의합니다.// 정리를 위해 구독 해제 함수를 반환합니다.const stopRewriteURL = useRewriteURL();

HTML 언어 및 방향 속성 전환하기

선택사항

접근성 및 SEO를 위해 <html> 태그의 lang 및 dir 속성을 현재 로케일에 맞게 업데이트하세요.

src/main.ts

코드 복사

코드를 클립보드에 복사

import { getHTMLTextDir } from "intlayer";import { installIntlayer, useLocale } from "vanilla-intlayer";installIntlayer();useLocale({  onLocaleChange: (locale) => {    document.documentElement.lang = locale;    document.documentElement.dir = getHTMLTextDir(locale);  },});

import { getHTMLTextDir } from "intlayer";import { installIntlayer, useLocale } from "vanilla-intlayer";installIntlayer();useLocale({  onLocaleChange: (locale) => {    document.documentElement.lang = locale;    document.documentElement.dir = getHTMLTextDir(locale);  },});

로케일별 딕셔너리 레이지 로딩 (Lazy-load)

선택사항

대규모 앱의 경우 각 로케일의 딕셔너리를 자체 청크로 나누고 싶을 수 있습니다. Vite의 동적 import()와 함께 useDictionaryDynamic을 사용하세요:

src/app.ts

코드 복사

코드를 클립보드에 복사

import { installIntlayer, useDictionaryDynamic } from "vanilla-intlayer";installIntlayer();const unsubscribe = useDictionaryDynamic(  {    en: () => import("../.intlayer/dictionaries/en/app.mjs"),    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),    es: () => import("../.intlayer/dictionaries/es/app.mjs"),  },  "app").onChange((content) => {  document.querySelector("h1")!.textContent = String(content.title);});

import { installIntlayer, useDictionaryDynamic } from "vanilla-intlayer";installIntlayer();const unsubscribe = useDictionaryDynamic(  {    en: () => import("../.intlayer/dictionaries/en/app.mjs"),    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),    es: () => import("../.intlayer/dictionaries/es/app.mjs"),  },  "app").onChange((content) => {  document.querySelector("h1")!.textContent = String(content.title);});

각 로케일의 번들은 해당 로케일이 활성화될 때만 가져오고 결과는 캐시됩니다. 동일한 로케일로의 후속 전환은 즉시 이루어집니다.

컴포넌트의 콘텐츠 추출하기

선택사항

기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.

이 프로세스를 쉽게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하는 컴파일러 / 추출기를 제안합니다.

이를 설정하려면 intlayer.config.ts 파일에 compiler 섹션을 추가할 수 있습니다:

intlayer.config.ts

코드 복사

코드를 클립보드에 복사

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... 나머지 구성  compiler: {    /**     * 컴파일러 사용 여부를 나타냅니다.     */    enabled: true,    /**     * 출력 파일 경로를 정의합니다.     */    output: ({ fileName, extension }) => `./${fileName}${extension}`,    /**     * 컴포넌트를 변환한 후 저장할지 여부를 나타냅니다.     * 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환하고 제거할 수 있습니다.     */    saveComponents: false,    /**     * 딕셔너리 키 접두사     */    dictionaryKeyPrefix: "",  },};export default config;

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... 나머지 구성  compiler: {    /**     * 컴파일러 사용 여부를 나타냅니다.     */    enabled: true,    /**     * 출력 파일 경로를 정의합니다.     */    output: ({ fileName, extension }) => `./${fileName}${extension}`,    /**     * 컴포넌트를 변환한 후 저장할지 여부를 나타냅니다.     * 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환하고 제거할 수 있습니다.     */    saveComponents: false,    /**     * 딕셔너리 키 접두사     */    dictionaryKeyPrefix: "",  },};export default config;

추출기를 실행하여 컴포넌트를 변환하고 콘텐츠를 추출합니다.

bash

코드 복사

코드를 클립보드에 복사

npx intlayer extract

npx intlayer extract

Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

intlayerCompiler 플러그인을 포함하도록 vite.config.ts를 업데이트합니다:

vite.config.ts

코드 복사

코드를 클립보드에 복사

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Adds the compiler plugin ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Adds the compiler plugin ],});

bash

코드 복사

코드를 클립보드에 복사

npm run build # 또는 npm run dev

npm run build # 또는 npm run dev

(선택) 사이트맵과 robots.txt(빌드 시 생성)

Intlayer는 generateSitemap과 getMultilingualUrls로 크롤러용 다국어 sitemap.xml과 robots.txt를 만들어 public/에 자동으로 쓸 수 있습니다. 보통 Vite 실행 전에 작은 Node 스크립트를 돌립니다(예: npm predev / prebuild).

Robots.txt

getMultilingualUrls로 Disallow가 민감 경로의 모든 현지화 변형에 적용되도록 하세요.

1. 프로젝트 루트에 `generate-seo.mjs` 추가

generate-seo.mjs

코드 복사

코드를 클립보드에 복사

import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

스크립트가 intlayer를 import하려면 패키지가 설치되어 있어야 합니다. 프로덕션에서는 환경 변수 SITE_URL을 설정하세요(CI 등).

Node ESM에는 generate-seo.mjs 사용을 권장합니다. generate-seo.js를 쓰면 package.json의 "type": "module" 등으로 ESM을 켜세요.

2. Vite 전에 스크립트 실행

package.json

코드 복사

코드를 클립보드에 복사

{  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

{  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

pnpm이나 yarn을 쓰면 명령을 맞게 바꾸세요. CI에서 호출해도 됩니다.

TypeScript 구성하기

TypeScript 구성에 자동 생성된 타입이 포함되어 있는지 확인하세요.

tsconfig.json

코드 복사

코드를 클립보드에 복사

{  "compilerOptions": {    // ...  },  "include": ["src", ".intlayer/**/*.ts"],}

{  "compilerOptions": {    // ...  },  "include": ["src", ".intlayer/**/*.ts"],}

Git 구성

Intlayer에서 생성된 파일은 무시하는 것이 좋습니다. 이를 통해 Git 저장소에 커밋하는 것을 방지할 수 있습니다.

이렇게 하려면 .gitignore 파일에 다음 지침을 추가할 수 있습니다:

bash

코드 복사

코드를 클립보드에 복사

# Intlayer에서 생성된 파일 무시.intlayer

# Intlayer에서 생성된 파일 무시.intlayer

VS Code 확장 프로그램

Intlayer 개발 환경을 개선하기 위해 공식 Intlayer VS Code 확장 프로그램을 설치할 수 있습니다.

VS Code Marketplace에서 설치

이 확장 프로그램은 다음을 제공합니다:

번역 키 자동 완료.
누락된 번역에 대한 실시간 오류 감지.
번역된 콘텐츠의 인라인 미리보기.
번역을 쉽게 만들고 업데이트할 수 있는 빠른 작업.

확장 프로그램 사용 방법에 대한 자세한 내용은 Intlayer VS Code 확장 프로그램 문서를 참조하세요.

더 나아가기

더 나아가려면 시각적 편집기를 구현하거나 CMS를 사용하여 콘텐츠를 외부화할 수 있습니다.

Vite 및 Preact

Vanilla JS (번들러 없음)

버전 기록

Intlayer를 사용하여 Vite 및 Vanilla JS 웹사이트 번역하기 | 국제화 (i18n)

목차

대안보다 Intlayer를 선택해야 하는 이유는 무엇입니까?

Vite 및 Vanilla JS 애플리케이션에서 Intlayer를 설정하는 단계별 가이드

종속성 설치

프로젝트 구성

Vite 구성에 Intlayer 통합

엔트리 포인트에서 Intlayer 부트스트랩

콘텐츠 선언하기

JavaScript에서 Intlayer 사용하기

콘텐츠의 언어 변경하기

마크다운 및 HTML 콘텐츠 렌더링하기

애플리케이션에 로컬라이즈된 라우팅 추가하기

로케일 변경 시 URL 변경하기

HTML 언어 및 방향 속성 전환하기

로케일별 딕셔너리 레이지 로딩 (Lazy-load)

컴포넌트의 콘텐츠 추출하기

(선택) 사이트맵과 robots.txt(빌드 시 생성)

사이트맵

Robots.txt

1. 프로젝트 루트에 generate-seo.mjs 추가

2. Vite 전에 스크립트 실행

TypeScript 구성하기

Git 구성

VS Code 확장 프로그램

더 나아가기

1. 프로젝트 루트에 `generate-seo.mjs` 추가