Intlayer를 사용하여 Angular 19 (Webpack) 웹사이트 번역하기 | 국제화 (i18n)

목차

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

'ngx-translate' 또는 'angular-l10n'과 같은 주요 솔루션과 비교할 때 Intlayer는 다음과 같은 통합 최적화가 제공되는 솔루션입니다.

Angular 애플리케이션에서 Intlayer를 설정하기 위한 단계별 가이드

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

1. 1

   종속성 설치

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

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npx intlayer init --interactive
   

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

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

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npm install intlayer angular-intlayer
   npm install @angular-builders/custom-webpack --save-dev
   

   • intlayer

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

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

   • @angular-builders/custom-webpack Angular CLI의 Webpack 구성을 사용자 정의하는 데 필요합니다.

2. 2

   프로젝트 구성

   아키텍처

   이 아키텍처에서 angular-intlayer는 provideIntlayer()를 제공하며, src/app/app.config.ts에 등록되어 모든 컴포넌트가 useIntlayer 시그널을 통해 콘텐츠를 읽을 수 있습니다. Angular CLI는 커스텀 Webpack 빌더로 전환되며, webpack.config.ts는 Intlayer 플러그인을 빌드에 병합하여 콘텐츠 선언을 감시하고 다시 빌드합니다. 콘텐츠 선언은 src/app/의 컴포넌트와 함께 배치됩니다.

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   .
   ├── src
   │   ├── app
   │   │   ├── app.component.html        # Root template reading the content signal
   │   │   ├── app.component.ts          # Root component using useIntlayer
   │   │   ├── app.config.ts             # Application config with provideIntlayer()
   │   │   ├── app.content.ts            # App content declaration
   │   │   └── locale-switcher.component.ts
   │   └── main.ts
   ├── angular.json                      # Custom Webpack builder for build and serve
   ├── intlayer.config.ts
   ├── package.json
   ├── tsconfig.json
   └── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
   

   설정

   애플리케이션의 언어를 구성하기 위한 설정 파일을 생성합니다:

   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

   Angular 구성에 Intlayer 통합

   Intlayer를 Angular CLI와 통합하려면 사용자 정의 빌더를 사용해야 합니다. 이 가이드에서는 Webpack(대부분의 Angular 프로젝트의 기본값)을 사용한다고 가정합니다.

   먼저, angular.json을 수정하여 사용자 정의 Webpack 빌더를 사용하도록 합니다. build 및 serve 구성을 업데이트하세요:

   angular.json

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   {
     "projects": {
       "your-app-name": {
         "architect": {
           "build": {
             "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",
             "options": {
               "customWebpackConfig": {
                 "path": "./webpack.config.ts",
                 "mergeStrategies": { "module.rules": "prepend" },
               },
               "main": "src/main.ts", // replace "browser": "src/main.ts",
               // ...
             },
           },
           "serve": {
             "builder": "@angular-builders/custom-webpack:dev-server",
           },
         },
       },
     },
   }
   

   angular.json에서 your-app-name을 실제 프로젝트 이름으로 바꾸세요.

   다음으로, 프로젝트 루트에 webpack.config.ts 파일을 생성합니다:

   webpack.config.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { mergeConfig } from "angular-intlayer/webpack";
   
   export default mergeConfig({});
   

   mergeConfig 함수는 Intlayer로 Webpack을 구성합니다. IntlayerPlugin(콘텐츠 선언 파일 처리용)을 주입하고 최적의 성능을 위한 별칭(alias)을 설정합니다.

4. 4

   콘텐츠 선언

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

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

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

5. 5

   코드에서 Intlayer 활용

   Angular 애플리케이션 전체에서 Intlayer의 국제화 기능을 활용하려면 애플리케이션 구성에 Intlayer를 제공해야 합니다.

   src/app/app.config.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { ApplicationConfig } from "@angular/core";
   import { provideRouter } from "@angular/router";
   import { provideIntlayer } from "angular-intlayer";
   import { routes } from "./app.routes";
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideRouter(routes),
       provideIntlayer(), // 여기에 Intlayer 공급자 추가
     ],
   };
   

   그런 다음, 모든 컴포넌트 내에서 useIntlayer 함수를 사용할 수 있습니다.

   src/app/app.component.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { Component } from "@angular/core";
   import { RouterOutlet } from "@angular/router";
   import { useIntlayer } from "angular-intlayer";
   
   @Component({
     selector: "app-root",
     standalone: true,
     imports: [RouterOutlet],
     templateUrl: "./app.component.html",
     styleUrl: "./app.component.css",
   })
   export class AppComponent {
     content = useIntlayer("app");
   }
   

   그리고 템플릿에서:

   src/app/app.component.html

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   <div class="content">
     <h1>{{ content().title }}</h1>
     <p>{{ content().congratulations }}</p>
   </div>
   

   Intlayer 콘텐츠는 Signal로 반환되므로 시그널을 호출하여 값에 액세스합니다: content().title.

6. 6

   콘텐츠 언어 변경

   선택사항

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

   언어를 전환할 컴포넌트를 생성합니다:

   src/app/locale-switcher.component.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { Component } from "@angular/core";
   import { CommonModule } from "@angular/common";
   import { useLocale } from "angular-intlayer";
   
   @Component({
     selector: "app-locale-switcher",
     standalone: true,
     imports: [CommonModule],
     template: `
       <div class="locale-switcher">
         <select
           [value]="locale()"
           (change)="setLocale($any($event.target).value)"
         >
           @for (loc of availableLocales; track loc) {
             <option [value]="loc">{{ loc }}</option>
           }
         </select>
       </div>
     `,
   })
   export class LocaleSwitcherComponent {
     localeCtx = useLocale();
   
     locale = this.localeCtx.locale;
     availableLocales = this.localeCtx.availableLocales;
     setLocale = this.localeCtx.setLocale;
   }
   

   그런 다음, app.component.ts에서 이 컴포넌트를 사용합니다:

   src/app/app.component.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { Component } from "@angular/core";
   import { RouterOutlet } from "@angular/router";
   import { useIntlayer } from "angular-intlayer";
   import { LocaleSwitcherComponent } from "./locale-switcher.component";
   
   @Component({
     selector: "app-root",
     standalone: true,
     imports: [RouterOutlet, LocaleSwitcherComponent],
     templateUrl: "./app.component.html",
     styleUrl: "./app.component.css",
   })
   export class AppComponent {
     content = useIntlayer("app");
   }
   

TypeScript 구성

Intlayer는 TypeScript의 이점을 활용하고 코드베이스를 더욱 강력하게 만들기 위해 모듈 보강(module augmentation)을 사용합니다.

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

{
  // ... 기존 TypeScript 구성
  "include": [
    // ... 기존 TypeScript 구성
    ".intlayer/**/*.ts", // 자동 생성된 타입 포함
  ],
}

Git 구성

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

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

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

VS Code 확장 프로그램

Intlayer 개발 경험을 개선하기 위해 공식 Intlayer VS Code Extension을 설치할 수 있습니다.

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

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

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

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

더 알아보기

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

자주 묻는 질문