Intlayer와 Vite, Svelte로 국제화(i18n) 시작하기

이 패키지는 개발 중입니다. 자세한 내용은 이슈를 참조하세요. 이슈에 좋아요를 눌러 Svelte용 Intlayer에 대한 관심을 표현해 주세요.

Intlayer란 무엇인가요?

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

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

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

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

1단계: 의존성 설치

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

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

• intlayer

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

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

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

2단계: 프로젝트 구성

애플리케이션의 언어를 구성하기 위해 설정 파일을 만드세요:

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 플러그인을 구성에 추가하세요.

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

이 구성 파일을 통해 지역화된 URL, 미들웨어 리디렉션, 쿠키 이름, 콘텐츠 선언의 위치 및 확장자 설정, 콘솔에서 Intlayer 로그 비활성화 등 다양한 설정을 할 수 있습니다. 사용 가능한 모든 매개변수 목록은 구성 문서를 참조하세요.

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

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

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

### 3단계: Vite 구성에 Intlayer 통합하기intlayer 플러그인을 구성에 추가하세요.```typescript fileName="vite.config.ts" codeFormat="typescript"import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [react(), intlayerPlugin()],});

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

4단계: 콘텐츠 선언하기

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

import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {},} satisfies Dictionary;export default appContent;

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

4단계: 콘텐츠 선언하기

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

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,mjx,cjs,cjx})와 일치해야 합니다.

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

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

[완료 예정]

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

[완료 예정]

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

[완료 예정]

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

[완료 예정]

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

[완료 예정]

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

[완료 예정]

Git 구성

Intlayer가 생성하는 파일은 무시하는 것이 권장됩니다. 이렇게 하면 Git 저장소에 해당 파일들을 커밋하는 것을 방지할 수 있습니다.

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

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

VS Code 확장 기능

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

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

이 확장 기능은 다음을 제공합니다:

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

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

더 나아가기

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

문서 이력

• 5.5.10 - 2025-06-29: 이력 초기화