intlayer

구성 관리, 번역, 콘텐츠 선언, 트랜스파일링 및 CLI 명령어를 위한 국제화 도구를 제공하는 핵심 패키지입니다.
solid-intlayer Intlayer를 Solid 애플리케이션과 통합하는 패키지입니다. Solid 국제화를 위한 컨텍스트 제공자와 훅을 제공합니다.
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 react from "@vitejs/plugin-react-swc";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), intlayer()],
});

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

4단계: 콘텐츠 선언하기

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

src/app.content.tsx

코드 복사

코드를 클립보드에 복사

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

const appContent = {
  key: "app",
  content: {},
} satisfies Dictionary;

export default appContent;

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

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

5단계: 코드에서 Intlayer 활용하기

애플리케이션 전체에서 콘텐츠 사전에 액세스하세요:

src/App.tsx

코드 복사

코드를 클립보드에 복사

import { createSignal, type Component } from "solid-js";import solidLogo from "./assets/solid.svg";import viteLogo from "/vite.svg";import "./App.css";import { IntlayerProvider, useIntlayer } from "solid-intlayer";const AppContent: Component = () => {  const [count, setCount] = createSignal(0);  const content = useIntlayer("app");  return (    <>      <div>        <a href="https://vitejs.dev" target="_blank">          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />        </a>        <a href="https://www.solidjs.com/" target="_blank">          <img            src={solidLogo}            class="logo solid"            alt={content.solidLogo.value}          />        </a>      </div>      <h1>{content.title}</h1>      <div class="card">        <button onClick={() => setCount((count) => count + 1)}>          {content.count({ count: count() })}        </button>        <p>{content.edit}</p>      </div>      <p class="read-the-docs">{content.readTheDocs}</p>    </>  );};const App: Component = () => (  <IntlayerProvider>    <AppContent />  </IntlayerProvider>);export default App;

Solid에서 useIntlayer는 accessor 함수(예: `content.)를 반환합니다. 반응형 콘텐츠에 액세스하려면 이 함수를 호출해야 합니다.

alt, title, href, aria-label 등의 string 속성에서 콘텐츠를 사용하려면 다음과 같이 함수의 값을 호출해야 합니다:
html
코드 복사
코드를 클립보드에 복사
<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

(선택 사항) 6단계: 콘텐츠 언어 변경하기

콘텐츠의 언어를 변경하려면 useLocale 훅에서 제공하는 setLocale 함수를 사용할 수 있습니다. 이 함수를 사용하면 애플리케이션의 로케일을 설정하고 그에 따라 콘텐츠를 업데이트할 수 있습니다.

src/components/LocaleSwitcher.tsx

코드 복사

코드를 클립보드에 복사

import { type Component, For } from "solid-js";import { Locales } from "intlayer";import { useLocale } from "solid-intlayer";const LocaleSwitcher: Component = () => {  const { locale, setLocale, availableLocales } = useLocale();  return (    <select      value={locale()}      onChange={(e) => setLocale(e.currentTarget.value as Locales)}    >      <For each={availableLocales}>        {(loc) => (          <option value={loc} selected={loc === locale()}>            {loc}          </option>        )}      </For>    </select>  );};

(선택 사항) 7단계: 애플리케이션에 지역화된 라우팅 추가하기

이 단계의 목적은 각 언어에 대해 고유한 경로를 만드는 것입니다. 이는 SEO 및 SEO 친화적인 URL에 유용합니다. 예:

plaintext

코드 복사

코드를 클립보드에 복사

- https://example.com/about- https://example.com/es/about- https://example.com/fr/about

애플리케이션에 지역화된 라우팅을 추가하려면 @solidjs/router를 사용할 수 있습니다.

먼저 필요한 종속성을 설치하세요:

bash

코드 복사

코드를 클립보드에 복사

npm install @solidjs/router

그런 다음 애플리케이션을 Router로 감싸고 localeMap을 사용하여 경로를 정의하세요:

src/index.tsx

코드 복사

코드를 클립보드에 복사

import { render } from "solid-js/web";import { Router } from "@solidjs/router";import App from "./App";const root = document.getElementById("root");render(  () => (    <Router>      <App />    </Router>  ),  root!);

src/App.tsx

코드 복사

코드를 클립보드에 복사

import { type Component } from "solid-js";import { Route } from "@solidjs/router";import { localeMap } from "intlayer";import { IntlayerProvider } from "solid-intlayer";import Home from "./pages/Home";import About from "./pages/About";const App: Component = () => (  <IntlayerProvider>    {localeMap(({ locale, urlPrefix }) => (      <Route        path={urlPrefix || "/"}        component={(props: any) => (          <IntlayerProvider locale={locale}>{props.children}</IntlayerProvider>        )}      >        <Route path="/" component={Home} />        <Route path="/about" component={About} />      </Route>    ))}  </IntlayerProvider>);export default App;

(선택 사항) 8단계: 로케일 변경 시 URL 변경하기

로케일이 변경될 때 URL을 변경하려면 useLocale 훅에서 제공하는 onLocaleChange prop을 사용할 수 있습니다. @solidjs/router의 useNavigate 및 useLocation 훅을 사용하여 URL 경로를 업데이트할 수 있습니다.

src/components/LocaleSwitcher.tsx

코드 복사

코드를 클립보드에 복사

import { type Component, For } from "solid-js";import { useLocation, useNavigate } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";const LocaleSwitcher: Component = () => {  const location = useLocation();  const navigate = useNavigate();  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (loc) => {      const pathWithLocale = getLocalizedUrl(location.pathname, loc);      navigate(pathWithLocale);    },  });  return (    <select      value={locale()}      onChange={(e) => setLocale(e.currentTarget.value as any)}    >      <For each={availableLocales}>        {(loc) => (          <option value={loc} selected={loc === locale()}>            {loc}          </option>        )}      </For>    </select>  );};

(선택 사항) 9단계: HTML 언어 및 방향 속성 전환하기

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

src/App.tsx

코드 복사

코드를 클립보드에 복사

import { createEffect, type Component } from "solid-js";import { useLocale } from "solid-intlayer";import { getHTMLTextDir } from "intlayer";const AppContent: Component = () => {  const { locale } = useLocale();  createEffect(() => {    document.documentElement.lang = locale();    document.documentElement.dir = getHTMLTextDir(locale());  });  return (    // ... 애플리케이션 콘텐츠  );};

(선택 사항) 10단계: 지역화된 링크 컴포넌트 생성하기

내부 URL을 현재 언어로 자동 접두사하는 사용자 정의 Link 컴포넌트를 만드세요.

src/components/Link.tsx

코드 복사

코드를 클립보드에 복사

import { type ParentComponent } from "solid-js";import { A, type AnchorProps } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const Link: ParentComponent<AnchorProps> = (props) => {  const { locale } = useLocale();  const isExternal = () => props.href.startsWith("http");  const localizedHref = () =>    isExternal() ? props.href : getLocalizedUrl(props.href, locale());  return <A {...props} href={localizedHref()} />;};

(선택 사항) 11단계: Markdown 렌더링

Intlayer는 자체 내부 파서를 사용하여 Solid 애플리케이션에서 Markdown 콘텐츠를 직접 렌더링하는 것을 지원합니다. 기본적으로 Markdown은 일반 텍스트로 처리됩니다. 풍부한 HTML로 렌더링하려면 애플리케이션을 MarkdownProvider로 감싸세요.

src/index.tsx

코드 복사

코드를 클립보드에 복사

import { render } from "solid-js/web";import { MarkdownProvider } from "solid-intlayer/markdown";import App from "./App";const root = document.getElementById("root");render(  () => (    <MarkdownProvider>      <App />    </MarkdownProvider>  ),  root!);

그런 다음 컴포넌트에서 사용할 수 있습니다:

tsx

코드 복사

코드를 클립보드에 복사

import { useIntlayer } from "solid-intlayer";const MyComponent = () => {  const content = useIntlayer("my-content");  return (    <div>      {/* MarkdownProvider를 통해 HTML로 렌더링 */}      {content.markdownContent}    </div>  );};

TypeScript 구성

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

tsconfig.json

코드 복사

코드를 클립보드에 복사

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

Git 설정

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

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

bash

코드 복사

코드를 클립보드에 복사

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

VS Code 확장 프로그램

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

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

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

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

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

(선택 사항) 단계 1 : 컴포넌트 콘텐츠 추출

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

이 프로세스를 용이하게 하기 위해 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;

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

bash

코드 복사

코드를 클립보드에 복사

npx intlayer extract

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).

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.");

스크립트가 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"  }}

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

더 나아가기

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

Nuxt 및 Vue

Vite 및 Svelte

생성:2025-04-18마지막 업데이트:2026-05-06

GitHub에서 애플리케이션 템플릿 보기

이 페이지에는 애플리케이션 템플릿이 제공됩니다.

이 문서를 원하는 AI 어시스턴트에 참조하세요

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

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

버전 기록

"Solid useIntlayer API 사용법을 직접 속성 액세스로 업데이트"
v8.9.02026. 5. 4.
"init 명령어 추가"
v7.5.92025. 12. 30.
"이력 초기화"
v5.5.102025. 6. 29.

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

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

문서 수정

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

문서에 대한 GitHub 링크

복사

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

Intlayer로 Vite and Solid 번역하기 | 국제화(i18n)

www.youtube.com

Intlayer란 무엇인가요?

Intlayer는 현대 웹 애플리케이션에서 다국어 지원을 간소화하기 위해 설계된 혁신적인 오픈 소스 국제화(i18n) 라이브러리입니다.

Intlayer를 사용하면 다음을 할 수 있습니다:

컴포넌트 수준에서 선언적 사전을 사용하여 번역을 쉽게 관리할 수 있습니다.
메타데이터, 라우트 및 콘텐츠를 동적으로 현지화할 수 있습니다.
자동 생성된 타입으로 TypeScript 지원을 보장하여 자동 완성 및 오류 감지를 향상시킵니다.
동적 로케일 감지 및 전환과 같은 고급 기능을 활용할 수 있습니다.

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

intlayer

구성 관리, 번역, 콘텐츠 선언, 트랜스파일링 및 CLI 명령어를 위한 국제화 도구를 제공하는 핵심 패키지입니다.
solid-intlayer Intlayer를 Solid 애플리케이션과 통합하는 패키지입니다. Solid 국제화를 위한 컨텍스트 제공자와 훅을 제공합니다.
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 react from "@vitejs/plugin-react-swc";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), intlayer()],
});

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

4단계: 콘텐츠 선언하기

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

src/app.content.tsx

코드 복사

코드를 클립보드에 복사

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

const appContent = {
  key: "app",
  content: {},
} satisfies Dictionary;

export default appContent;

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

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

5단계: 코드에서 Intlayer 활용하기

애플리케이션 전체에서 콘텐츠 사전에 액세스하세요:

src/App.tsx

코드 복사

코드를 클립보드에 복사

import { createSignal, type Component } from "solid-js";import solidLogo from "./assets/solid.svg";import viteLogo from "/vite.svg";import "./App.css";import { IntlayerProvider, useIntlayer } from "solid-intlayer";const AppContent: Component = () => {  const [count, setCount] = createSignal(0);  const content = useIntlayer("app");  return (    <>      <div>        <a href="https://vitejs.dev" target="_blank">          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />        </a>        <a href="https://www.solidjs.com/" target="_blank">          <img            src={solidLogo}            class="logo solid"            alt={content.solidLogo.value}          />        </a>      </div>      <h1>{content.title}</h1>      <div class="card">        <button onClick={() => setCount((count) => count + 1)}>          {content.count({ count: count() })}        </button>        <p>{content.edit}</p>      </div>      <p class="read-the-docs">{content.readTheDocs}</p>    </>  );};const App: Component = () => (  <IntlayerProvider>    <AppContent />  </IntlayerProvider>);export default App;

import { createSignal, type Component } from "solid-js";import solidLogo from "./assets/solid.svg";import viteLogo from "/vite.svg";import "./App.css";import { IntlayerProvider, useIntlayer } from "solid-intlayer";const AppContent: Component = () => {  const [count, setCount] = createSignal(0);  const content = useIntlayer("app");  return (    <>      <div>        <a href="https://vitejs.dev" target="_blank">          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />        </a>        <a href="https://www.solidjs.com/" target="_blank">          <img            src={solidLogo}            class="logo solid"            alt={content.solidLogo.value}          />        </a>      </div>      <h1>{content.title}</h1>      <div class="card">        <button onClick={() => setCount((count) => count + 1)}>          {content.count({ count: count() })}        </button>        <p>{content.edit}</p>      </div>      <p class="read-the-docs">{content.readTheDocs}</p>    </>  );};const App: Component = () => (  <IntlayerProvider>    <AppContent />  </IntlayerProvider>);export default App;

Solid에서 useIntlayer는 accessor 함수(예: `content.)를 반환합니다. 반응형 콘텐츠에 액세스하려면 이 함수를 호출해야 합니다.

alt, title, href, aria-label 등의 string 속성에서 콘텐츠를 사용하려면 다음과 같이 함수의 값을 호출해야 합니다:
html
코드 복사
코드를 클립보드에 복사
<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />
<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

(선택 사항) 6단계: 콘텐츠 언어 변경하기

src/components/LocaleSwitcher.tsx

코드 복사

코드를 클립보드에 복사

import { type Component, For } from "solid-js";import { Locales } from "intlayer";import { useLocale } from "solid-intlayer";const LocaleSwitcher: Component = () => {  const { locale, setLocale, availableLocales } = useLocale();  return (    <select      value={locale()}      onChange={(e) => setLocale(e.currentTarget.value as Locales)}    >      <For each={availableLocales}>        {(loc) => (          <option value={loc} selected={loc === locale()}>            {loc}          </option>        )}      </For>    </select>  );};

import { type Component, For } from "solid-js";import { Locales } from "intlayer";import { useLocale } from "solid-intlayer";const LocaleSwitcher: Component = () => {  const { locale, setLocale, availableLocales } = useLocale();  return (    <select      value={locale()}      onChange={(e) => setLocale(e.currentTarget.value as Locales)}    >      <For each={availableLocales}>        {(loc) => (          <option value={loc} selected={loc === locale()}>            {loc}          </option>        )}      </For>    </select>  );};

(선택 사항) 7단계: 애플리케이션에 지역화된 라우팅 추가하기

이 단계의 목적은 각 언어에 대해 고유한 경로를 만드는 것입니다. 이는 SEO 및 SEO 친화적인 URL에 유용합니다. 예:

plaintext

코드 복사

코드를 클립보드에 복사

- https://example.com/about- https://example.com/es/about- https://example.com/fr/about

- https://example.com/about- https://example.com/es/about- https://example.com/fr/about

애플리케이션에 지역화된 라우팅을 추가하려면 @solidjs/router를 사용할 수 있습니다.

먼저 필요한 종속성을 설치하세요:

bash

코드 복사

코드를 클립보드에 복사

npm install @solidjs/router

npm install @solidjs/router

그런 다음 애플리케이션을 Router로 감싸고 localeMap을 사용하여 경로를 정의하세요:

src/index.tsx

코드 복사

코드를 클립보드에 복사

import { render } from "solid-js/web";import { Router } from "@solidjs/router";import App from "./App";const root = document.getElementById("root");render(  () => (    <Router>      <App />    </Router>  ),  root!);

import { render } from "solid-js/web";import { Router } from "@solidjs/router";import App from "./App";const root = document.getElementById("root");render(  () => (    <Router>      <App />    </Router>  ),  root!);

src/App.tsx

코드 복사

코드를 클립보드에 복사

import { type Component } from "solid-js";import { Route } from "@solidjs/router";import { localeMap } from "intlayer";import { IntlayerProvider } from "solid-intlayer";import Home from "./pages/Home";import About from "./pages/About";const App: Component = () => (  <IntlayerProvider>    {localeMap(({ locale, urlPrefix }) => (      <Route        path={urlPrefix || "/"}        component={(props: any) => (          <IntlayerProvider locale={locale}>{props.children}</IntlayerProvider>        )}      >        <Route path="/" component={Home} />        <Route path="/about" component={About} />      </Route>    ))}  </IntlayerProvider>);export default App;

import { type Component } from "solid-js";import { Route } from "@solidjs/router";import { localeMap } from "intlayer";import { IntlayerProvider } from "solid-intlayer";import Home from "./pages/Home";import About from "./pages/About";const App: Component = () => (  <IntlayerProvider>    {localeMap(({ locale, urlPrefix }) => (      <Route        path={urlPrefix || "/"}        component={(props: any) => (          <IntlayerProvider locale={locale}>{props.children}</IntlayerProvider>        )}      >        <Route path="/" component={Home} />        <Route path="/about" component={About} />      </Route>    ))}  </IntlayerProvider>);export default App;

(선택 사항) 8단계: 로케일 변경 시 URL 변경하기

src/components/LocaleSwitcher.tsx

코드 복사

코드를 클립보드에 복사

import { type Component, For } from "solid-js";import { useLocation, useNavigate } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";const LocaleSwitcher: Component = () => {  const location = useLocation();  const navigate = useNavigate();  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (loc) => {      const pathWithLocale = getLocalizedUrl(location.pathname, loc);      navigate(pathWithLocale);    },  });  return (    <select      value={locale()}      onChange={(e) => setLocale(e.currentTarget.value as any)}    >      <For each={availableLocales}>        {(loc) => (          <option value={loc} selected={loc === locale()}>            {loc}          </option>        )}      </For>    </select>  );};

import { type Component, For } from "solid-js";import { useLocation, useNavigate } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";const LocaleSwitcher: Component = () => {  const location = useLocation();  const navigate = useNavigate();  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (loc) => {      const pathWithLocale = getLocalizedUrl(location.pathname, loc);      navigate(pathWithLocale);    },  });  return (    <select      value={locale()}      onChange={(e) => setLocale(e.currentTarget.value as any)}    >      <For each={availableLocales}>        {(loc) => (          <option value={loc} selected={loc === locale()}>            {loc}          </option>        )}      </For>    </select>  );};

(선택 사항) 9단계: HTML 언어 및 방향 속성 전환하기

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

src/App.tsx

코드 복사

코드를 클립보드에 복사

import { createEffect, type Component } from "solid-js";import { useLocale } from "solid-intlayer";import { getHTMLTextDir } from "intlayer";const AppContent: Component = () => {  const { locale } = useLocale();  createEffect(() => {    document.documentElement.lang = locale();    document.documentElement.dir = getHTMLTextDir(locale());  });  return (    // ... 애플리케이션 콘텐츠  );};

import { createEffect, type Component } from "solid-js";import { useLocale } from "solid-intlayer";import { getHTMLTextDir } from "intlayer";const AppContent: Component = () => {  const { locale } = useLocale();  createEffect(() => {    document.documentElement.lang = locale();    document.documentElement.dir = getHTMLTextDir(locale());  });  return (    // ... 애플리케이션 콘텐츠  );};

(선택 사항) 10단계: 지역화된 링크 컴포넌트 생성하기

내부 URL을 현재 언어로 자동 접두사하는 사용자 정의 Link 컴포넌트를 만드세요.

src/components/Link.tsx

코드 복사

코드를 클립보드에 복사

import { type ParentComponent } from "solid-js";import { A, type AnchorProps } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const Link: ParentComponent<AnchorProps> = (props) => {  const { locale } = useLocale();  const isExternal = () => props.href.startsWith("http");  const localizedHref = () =>    isExternal() ? props.href : getLocalizedUrl(props.href, locale());  return <A {...props} href={localizedHref()} />;};

import { type ParentComponent } from "solid-js";import { A, type AnchorProps } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const Link: ParentComponent<AnchorProps> = (props) => {  const { locale } = useLocale();  const isExternal = () => props.href.startsWith("http");  const localizedHref = () =>    isExternal() ? props.href : getLocalizedUrl(props.href, locale());  return <A {...props} href={localizedHref()} />;};

(선택 사항) 11단계: Markdown 렌더링

src/index.tsx

코드 복사

코드를 클립보드에 복사

import { render } from "solid-js/web";import { MarkdownProvider } from "solid-intlayer/markdown";import App from "./App";const root = document.getElementById("root");render(  () => (    <MarkdownProvider>      <App />    </MarkdownProvider>  ),  root!);

import { render } from "solid-js/web";import { MarkdownProvider } from "solid-intlayer/markdown";import App from "./App";const root = document.getElementById("root");render(  () => (    <MarkdownProvider>      <App />    </MarkdownProvider>  ),  root!);

그런 다음 컴포넌트에서 사용할 수 있습니다:

tsx

코드 복사

코드를 클립보드에 복사

import { useIntlayer } from "solid-intlayer";const MyComponent = () => {  const content = useIntlayer("my-content");  return (    <div>      {/* MarkdownProvider를 통해 HTML로 렌더링 */}      {content.markdownContent}    </div>  );};

import { useIntlayer } from "solid-intlayer";const MyComponent = () => {  const content = useIntlayer("my-content");  return (    <div>      {/* MarkdownProvider를 통해 HTML로 렌더링 */}      {content.markdownContent}    </div>  );};

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 마켓플레이스에서 설치하기

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

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

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

(선택 사항) 단계 1 : 컴포넌트 콘텐츠 추출

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

이 프로세스를 용이하게 하기 위해 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;

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

bash

코드 복사

코드를 클립보드에 복사

npx intlayer extract

npx intlayer extract

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

vite.config.ts

코드 복사

코드를 클립보드에 복사

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

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

bash

코드 복사

코드를 클립보드에 복사

npm run build # 또는 npm run dev

npm run build # 또는 npm run dev

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

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에서 호출해도 됩니다.

더 나아가기

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

Nuxt 및 Vue

Vite 및 Svelte

버전 기록

Intlayer로 Vite and Solid 번역하기 | 국제화(i18n)

목차

Intlayer란 무엇인가요?

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

목차

1단계: 의존성 설치

2단계: 프로젝트 구성

3단계: Vite 구성에 Intlayer 통합하기

4단계: 콘텐츠 선언하기

5단계: 코드에서 Intlayer 활용하기

(선택 사항) 6단계: 콘텐츠 언어 변경하기

(선택 사항) 7단계: 애플리케이션에 지역화된 라우팅 추가하기

(선택 사항) 8단계: 로케일 변경 시 URL 변경하기

(선택 사항) 9단계: HTML 언어 및 방향 속성 전환하기

(선택 사항) 10단계: 지역화된 링크 컴포넌트 생성하기

(선택 사항) 11단계: Markdown 렌더링

TypeScript 구성

Git 설정

VS Code 확장 프로그램

(선택 사항) 단계 1 : 컴포넌트 콘텐츠 추출

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

사이트맵

Robots.txt

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

2. Vite 전에 스크립트 실행

더 나아가기

버전 기록

Intlayer로 Vite and Solid 번역하기 | 국제화(i18n)

목차

Intlayer란 무엇인가요?

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

목차

1단계: 의존성 설치

2단계: 프로젝트 구성

3단계: Vite 구성에 Intlayer 통합하기

4단계: 콘텐츠 선언하기

5단계: 코드에서 Intlayer 활용하기

(선택 사항) 6단계: 콘텐츠 언어 변경하기

(선택 사항) 7단계: 애플리케이션에 지역화된 라우팅 추가하기

(선택 사항) 8단계: 로케일 변경 시 URL 변경하기

(선택 사항) 9단계: HTML 언어 및 방향 속성 전환하기

(선택 사항) 10단계: 지역화된 링크 컴포넌트 생성하기

(선택 사항) 11단계: Markdown 렌더링

TypeScript 구성

Git 설정

VS Code 확장 프로그램

(선택 사항) 단계 1 : 컴포넌트 콘텐츠 추출

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

사이트맵

Robots.txt

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

2. Vite 전에 스크립트 실행

더 나아가기

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

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