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

목차

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

'svelte-i18n' 또는 'i18next'와 같은 주요 솔루션과 비교할 때 Intlayer는 다음과 같은 통합 최적화 기능을 제공하는 솔루션입니다.

Vite와 Svelte 애플리케이션에서 Intlayer 설정 단계별 가이드

GitHub에서 애플리케이션 템플릿을 확인하세요.

1. 1

   의존성 설치

   npm을 사용하여 필요한 패키지를 설치하세요:

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npx intlayer init --interactive
   

   --interactive 플래그는 선택 사항입니다. AI 에이전트인 경우 intlayer-cli init를 사용하세요.

   이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npm install intlayer svelte-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer

     구성 관리, 번역, 콘텐츠 선언, 트랜스파일링 및 CLI 명령어를 위한 국제화 도구를 제공하는 핵심 패키지입니다.

   • svelte-intlayer Intlayer를 Svelte 애플리케이션과 통합하는 패키지입니다. Svelte 국제화를 위한 컨텍스트 프로바이더와 훅을 제공합니다.

   • vite-intlayer Intlayer를 Vite 번들러와 통합하기 위한 Vite 플러그인과, 사용자의 선호 로케일 감지, 쿠키 관리, URL 리디렉션 처리를 위한 미들웨어를 포함합니다.

2. 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. 3

   Vite 구성에 Intlayer 통합하기

   intlayer 플러그인을 구성에 추가하세요.

   vite.config.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { defineConfig } from "vite";
   import { svelte } from "@sveltejs/vite-plugin-svelte";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [svelte(), intlayer()],
   });
   

   intlayer() Vite 플러그인은 Intlayer를 Vite와 통합하는 데 사용됩니다. 이 플러그인은 콘텐츠 선언 파일의 빌드를 보장하고 개발 모드에서 이를 모니터링합니다. 또한 Vite 애플리케이션 내에서 Intlayer 환경 변수를 정의하며, 성능 최적화를 위한 별칭(alias)도 제공합니다.

4. 4

   콘텐츠 선언하기

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

   src/app.content.tsx

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { t, type Dictionary } from "intlayer";
   
   const appContent = {
     key: "app",
     content: {
       title: t({
         en: "Hello World",
         fr: "Bonjour le monde",
         es: "Hola mundo",
       }),
     },
   } satisfies Dictionary;
   
   export default appContent;
   

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

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

5. 5

   코드에서 Intlayer 사용하기

   src/App.svelte

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   <script>
     import { useIntlayer } from "svelte-intlayer";
   
     const content = useIntlayer("app");
   </script>
   
   <div>
   
   
   <!-- 간단한 콘텐츠로 렌더링 -->
   <h1>{$content.title}</h1>
   <!-- 에디터를 사용하여 편집 가능한 콘텐츠로 렌더링 -->
   <h1>{@const Title = $content.title}<Title /></h1>
   <!-- 문자열로 콘텐츠 렌더링 -->
   <div aria-label={$content.title.value}></div>
   <div aria-label={$content.title.toString()}></div>
   <div aria-label={String($content.title)}></div>
   

   기존 앱이 있다면, Intlayer Compiler와 extract command를 사용하여 수천 개의 컴포넌트를 몇 초 안에 변환할 수 있습니다.

6. 6

   콘텐츠 언어 변경하기

   선택사항

   src/App.svelte

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   <script lang="ts">
   import  { getLocaleName } from 'intlayer';
   import { useLocale } from "svelte-intlayer";
   
   // 로케일 정보와 setLocale 함수 가져오기
   const { locale, availableLocales, setLocale } = useLocale();
   
   // 로케일 변경 처리
   const changeLocale = (event: Event) => {
     const target = event.target as HTMLSelectElement;
     const newLocale = target.value;
     setLocale(newLocale);
   };
   </script>
   
   <div>
     <select value={$locale} on:change={changeLocale}>
       {#each availableLocales ?? [] as loc}
         <option value={loc}>
           {getLocaleName(loc)}
         </option>
       {/each}
     </select>
   </div>
   

7. 7

   마크다운 렌더링

   선택사항

   Intlayer는 Svelte 애플리케이션에서 마크다운 콘텐츠를 직접 렌더링하는 것을 지원합니다. 기본적으로 마크다운은 일반 텍스트로 처리됩니다. 마크다운을 풍부한 HTML로 변환하려면 @humanspeak/svelte-markdown 또는 다른 마크다운 파서를 통합할 수 있습니다.

   intlayer 패키지를 사용하여 마크다운 콘텐츠를 선언하는 방법은 마크다운 문서를 참조하세요.

   src/App.svelte

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   <script>
     import { setIntlayerMarkdown } from "svelte-intlayer";
   
     setIntlayerMarkdown((markdown) =>
      // 마크다운 콘텐츠를 문자열로 렌더링합니다
      return markdown;
     );
   </script>
   
   <h1>{$content.markdownContent}</h1>
   

   content.markdownContent.metadata.xxx 속성을 사용하여 마크다운 프론트매터 데이터에도 접근할 수 있습니다.

8. 8

   intlayer 에디터 / CMS 설정하기

   선택사항

   intlayer 에디터를 설정하려면 intlayer 에디터 문서를 따라야 합니다.

   intlayer CMS를 설정하려면 intlayer CMS 문서를 따라야 합니다.

9. 7

   애플리케이션에 지역화된 라우팅 추가하기

   선택사항

   Svelte 애플리케이션에서 지역화된 라우팅을 처리하려면, svelte-spa-router와 Intlayer의 localeFlatMap을 함께 사용하여 각 로케일에 대한 라우트를 생성할 수 있습니다.

   먼저, svelte-spa-router를 설치하세요:

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npm install svelte-spa-router
   npx intlayer init
   

   그런 다음, 라우트를 정의하기 위해 Router.svelte 파일을 생성하세요:

   src/Router.svelte

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   <script lang="ts">
   import { localeFlatMap } from "intlayer";
   import Router from "svelte-spa-router";
   import { wrap } from "svelte-spa-router/wrap";
   import App from "./App.svelte";
   
   const routes = Object.fromEntries(
       localeFlatMap(({locale, urlPrefix}) => [
       [
           urlPrefix || '/',
           wrap({
               component: App as any,
               props: {
                   locale,
               },
           }),
       ],
       ])
   );
   </script>
   
   <Router {routes} />
   

   main.ts 파일을 업데이트하여 App 대신 Router 컴포넌트를 마운트하세요:

   src/main.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { mount } from "svelte";
   import Router from "./Router.svelte";
   
   const app = mount(Router, {
   typescript fileName="src/main.ts"
     target: document.getElementById("app")!,
   });
   
   export default app;
   

   마지막으로, App.svelte를 업데이트하여 locale prop을 받고 useIntlayer와 함께 사용하세요:

   src/App.svelte

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   <script lang="ts">
   import type { Locale } from 'intlayer';
   import { useIntlayer } from "svelte-intlayer";
   import Counter from './lib/Counter.svelte';
   import LocaleSwitcher from './lib/LocaleSwitcher.svelte';
   
   export let locale: Locale;
   
   $: content = useIntlayer('app', locale);
   </script>
   
   <main>
     <div class="locale-switcher-container">
       <LocaleSwitcher currentLocale={locale} />
     </div>
   
     <!-- ... 앱의 나머지 부분 ... -->
   </main>
   

   서버 사이드 라우팅 구성 (선택 사항)

   병행하여, intlayerProxy를 사용하여 애플리케이션에 서버 사이드 라우팅을 추가할 수도 있습니다. 이 플러그인은 URL을 기반으로 현재 로케일을 자동으로 감지하고 적절한 로케일 쿠키를 설정합니다. 로케일이 지정되지 않은 경우, 플러그인은 사용자의 브라우저 언어 설정을 기반으로 가장 적합한 로케일을 결정합니다. 로케일이 감지되지 않으면 기본 로케일로 리디렉션합니다.

   intlayerProxy를 프로덕션에서 사용하려면 vite-intlayer 패키지를 devDependencies에서 dependencies로 변경해야 합니다.

   Intlayer v9부터 intlayerProxy()는 intlayer() 플러그인에 직접 번들되어 있으며 routing.enableProxy 옵션(true가 기본값)을 통해 기본적으로 활성화됩니다. 아래와 같이 별도로 등록하는 것은 이제 선택사항입니다 — 하위 호환성을 위해 그리고 플러그인 순서를 제어해야 하는 설정을 위해 유지됩니다. routing.enableProxy: false로 설정하여 옵트아웃할 수 있습니다. v9 릴리스 노트를 참조하세요.

   vite.config.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { defineConfig } from "vite";
   import { svelte } from "@sveltejs/vite-plugin-svelte";
   import { intlayer } from "vite-intlayer";
   
   typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
   import { defineConfig } from "vite";
   import { svelte } from "@sveltejs/vite-plugin-svelte";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [intlayerProxy(), // should be placed first
    svelte(), intlayer()],
   });
   

10. 8

    로케일이 변경될 때 URL 변경하기

    선택사항

    사용자가 언어를 전환하고 URL을 그에 맞게 업데이트할 수 있도록 LocaleSwitcher 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 intlayer의 getLocalizedUrl과 svelte-spa-router의 push를 사용합니다.

    src/lib/LocaleSwitcher.svelte

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    <script lang="ts">
    import { getLocaleName, getLocalizedUrl } from "intlayer";
    import { useLocale } from "svelte-intlayer";
    import { push } from "svelte-spa-router";
    
    export let currentLocale: string | undefined = undefined;
    
    // 로케일 정보 가져오기
    const { locale, availableLocales } = useLocale();
    
    // 로케일 변경 처리
    const changeLocale = (event: Event) => {
      const target = event.target as HTMLSelectElement;
      const newLocale = target.value;
      const currentUrl = window.location.pathname;
      const url = getLocalizedUrl( currentUrl, newLocale);
      push(url);
    };
    </script>
    
    <div class="locale-switcher">
      <select value={currentLocale ?? $locale} onchange={changeLocale}>
        {#each availableLocales ?? [] as loc}
          <option value={loc}>
            {getLocaleName(loc)}
          </option>
        {/each}
      </select>
    </div>
    

11. 9

    국제화된 링크

    선택사항

    SEO를 위해 경로에 locale을 접두사로 붙이는 것이 권장됩니다 (예: /about, /fr/about).

    src/lib/components/Link.svelte

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    <script lang="ts">
      import { getLocalizedUrl } from "intlayer";
      import { useLocale } from "svelte-intlayer";
    
      export let href = "";
      const { locale } = useLocale();
    
      // URL 접두사 도우미
      $: localizedHref = getLocalizedUrl(href, $locale);
    </script>
    
    <a href={localizedHref}>
      <slot />
    </a>
    

12. 10

    컴포넌트에서 콘텐츠 추출

    선택사항

    기존 codebase가 있다면 수천 개의 파일을 변환하는 것은 시간이 많이 걸릴 수 있습니다.

    이 과정을 쉽게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출할 수 있는 compiler / extractor를 제공합니다.

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

    intlayer.config.ts

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... Rest of your config
      compiler: {
        /**
         * 컴파일러가 활성화되어야 하는지 여부를 나타냅니다.
         */
        enabled: true,
    
        /**
         * 출력 파일 경로를 정의합니다.
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * 변환 후 컴포넌트를 저장해야 하는지 여부를 나타냅니다.
         *
         * - `true`인 경우, 컴파일러는 컴포넌트 파일을 디스크에 다시 작성합니다. 따라서 변환이 영구적이 되고, 컴파일러는 다음 프로세스에서 변환을 건너뜁니다. 이렇게 하면 컴파일러가 앱을 변환한 후 제거할 수 있습니다.
         *
         * - `false`인 경우, 컴파일러는 `useIntlayer()` 함수 호출을 빌드 출력의 코드에만 주입하고 기본 codebase를 그대로 유지합니다. 변환은 메모리에서만 수행됩니다.
         */
        saveComponents: false,
    
        /**
         * 사전 키 접두사
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;
    

    Extract commandBabel compiler

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

    bash

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    npx intlayer extract
    

    v9 이후로, intlayerCompiler은 intlayer 플러그인에 포함되어 있습니다. 따라서 수동으로 추가할 필요가 없습니다.

    vite.config.ts를 업데이트하여 intlayerCompiler 플러그인을 포함하세요:

    vite.config.ts

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    import { defineConfig } from "vite";
    import { intlayer, intlayerCompiler } from "vite-intlayer";
    
    export default defineConfig({
      plugins: [
        intlayer(),
        intlayerCompiler(), // 컴파일러 플러그인을 추가합니다
      ],
    });
    

    bash

    콘텐츠 복사

    코드 복사

    코드를 클립보드에 복사

    npm run build # 또는 npm run dev
    

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

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

사이트맵

Intlayer 사이트맵 생성기는 로케일 설정을 반영하고 크롤러용 메타데이터를 포함합니다.

생성된 사이트맵은 xhtml:link(hreflang)를 지원합니다. 단순 URL 나열이 아니라 각 페이지의 모든 언어 버전을 양방향으로 연결합니다(예: /about, /fr/about, /about?lang=fr - 라우팅 모드에 따름).

Robots.txt

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

1. 프로젝트 루트에 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.");

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

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

2. Vite 전에 스크립트 실행

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

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

Git 구성

Intlayer가 생성하는 파일은 Git 저장소에 커밋하지 않도록 무시하는 것이 좋습니다.

이를 위해 .gitignore 파일에 다음 지침을 추가할 수 있습니다:

#  Intlayer가 생성하는 파일 무시
.intlayer

VS Code 확장 프로그램

Intlayer 개발 경험을 향상시키기 위해 공식 Intlayer VS Code 확장 프로그램을 설치할 수 있습니다.

VS Code 마켓플레이스에서 설치하기

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

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

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

더 나아가기

더 나아가려면 비주얼 에디터를 구현하거나 CMS를 사용하여 콘텐츠를 외부화할 수 있습니다.

자주 묻는 질문