[angular] 다국어 지원 구성

26 Dec 2023

angular

다국어 지원 구성하기

1. 언어 파일 생성

// src/locale/messages_en.ts
export const messages_en = {
  greeting: 'Hello!',
  farewell: 'Goodbye!'
};

// src/locale/messages_ko.ts
export const messages_ko = {
  greeting: '안녕하세요!',
  farewell: '안녕히 가세요!'
};

2. 모듈 구성

// app.module.ts
import { LOCALE_ID, NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeKo from '@angular/common/locales/ko';

@NgModule({
  declarations: [],
  imports: [],
  providers: [{ provide: LOCALE_ID, useValue: 'ko' }]
})
export class AppModule {
  constructor() {
    registerLocaleData(localeKo);
  }
}

3. 다국어 지원 적용

// app.component.ts
import { Component, LOCALE_ID, Inject } from '@angular/core';
import { messages_en } from './locale/messages_en';
import { messages_ko } from './locale/messages_ko';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{getLocaleString('greeting')}}</h1>
    <p>{{getLocaleString('farewell')}}</p>
  `
})
export class AppComponent {
  constructor(@Inject(LOCALE_ID) private locale: string) {}

  getLocaleString(key: string): string {
    return this.locale === 'ko' ? messages_ko[key] : messages_en[key];
  }
}

위 예제에서는 messages_en.ts와 messages_ko.ts 파일을 통해 각 언어별로 필요한 텍스트를 정의하고, 애플리케이션 모듈에서 LOCALE_ID를 제공하여 특정 언어를 설정합니다. 그리고 컴포넌트에서는 LOCALE_ID를 주입받아 해당 언어에 맞는 텍스트를 렌더링합니다.

Angular의 다국어 지원을 활용하면 다양한 언어로 애플리케이션을 제공하고 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보는 Angular 공식 문서를 참고하세요.