오늘날의 디지털 세계에서 웹 개발자는 전 세계 고객과 소통하는 것을 목표로 합니다. 이를 달성하기 위한 핵심 전략은 Angular 애플리케이션을 다국어 경험으로 전환하는 것입니다. 앱이 사용자가 어디에 있든 모국어로 소통할 수 있는 국제화(i18n)에 오신 것을 환영합니다. 이 블로그에서는 i18n을 Angular 프로젝트에 통합하여 전 세계 사람들이 앱에 액세스하고 사용자 친화적인지 확인하는 방법을 살펴보겠습니다.

Angular의 국제화(i18n) 소개

귀하의 웹 앱이 전 세계 사용자를 연결하는 다리라고 상상해 보세요. 모두를 환영하고 사용자 친화적인 환경을 조성하려면 그들의 언어로 의사소통하는 것이 필수적입니다. 국제화(i18n)는 앱을 다양한 언어와 지역에 적용할 수 있도록 만드는 핵심입니다. Angular는 이를 달성하는 데 도움이 되는 강력한 도구와 기능을 제공합니다.

새로운 Angular 프로젝트 설정

i18n 여정을 시작하기 전에 새로운 Angular 프로젝트를 만들어 보겠습니다.

ng new i18n-app

다음 명령을 사용하여 Angular CLI를 사용하여 새 Angular 프로젝트를 시작할 수 있습니다. 설정 프로세스 중에 Angular 라우팅 활성화 및 스타일시트 형식(예: CSS, SCSS) 선택과 같은 옵션을 포함하여 프로젝트를 구성할 수 있습니다. 프로젝트 요구 사항에 맞는 설정을 선택하세요.

Angular의 i18n 도구 설치 및 구성

1. i18n 여정을 시작하려면 올바른 도구가 필요합니다. 앱을 다국어로 만들기 위해 Angular의 i18n 도구를 설치하고 설정하겠습니다.

npm install @ngx-translate/core --save

npm install @ngx-translate/http-loader --save

1. ngx-translate가 설치되면 이를 Angular 모듈이나 Config로 가져와서 번역 서비스를 설정할 수 있습니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.config 파일을 사용하는 경우 NgModule을 다음 코드로 바꾸세요.

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

이 코드에서는 필요한 ngx-translate 모듈을 가져오고 HttpLoaderFactory 함수를 사용하여 번역 로더를 구성합니다. HttpLoaderFactory 함수는 HttpClient 모듈을 사용하여 서버에서 번역 파일을 비동기적으로 로드합니다.

번역 파일 생성

번역 서비스가 설정되면 지원하려는 각 언어에 대한 번역 파일을 만들 수 있습니다. 번역 파일은 키를 번역된 문자열에 매핑하는 JSON 파일입니다.

필요한 언어 코드를 이름으로 사용하여 파일을 만들고 번역을 추가합니다.

예를 들어 영어 번역 파일은 다음과 같습니다.

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

여기 독일어 번역 파일이 있습니다:

{
  "title": "Meine App",
  "greeting": "Hallo, {{name}}!"
}

폴더 구조와 파일 이름은 다음과 같습니다.

참고: 번역 파일은 동일한 키를 사용하지만 언어마다 값이 다릅니다. 이는 코드를 수정하지 않고도 애플리케이션에서 언어 간 전환을 단순화합니다.

템플릿에서 번역 사용

번역 파일이 준비되었으므로 이제 해당 파일을 Angular 템플릿에 통합할 수 있습니다. 첫 번째 단계는 번역 서비스를 구성 요소에 삽입하는 것입니다.

App.comComponent.ts :

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

이 코드에서는 TranslateService를 구성 요소에 삽입하고 영어를 기본 언어로 설정합니다. 또한 애플리케이션의 언어를 변경할 수 있는 TranslateLanguage 메소드도 정의합니다.

언어 번역용 구성요소 생성

ng g c LanguageTranslation

구성 요소를 만든 후 번역 서비스를 활용하여 여러 언어를 번역할 수 있습니다.

LanguageTranslation.comComponent.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

LanguageTranslation.comComponent.html

{{ "title" | translate }}


    English
    German

이 코드에서는 TranslateService를 주입하고 영어와 독일어 간을 전환하는 두 개의 버튼을 제공하는 LanguageTranslationComponent를 만듭니다. 버튼을 클릭하면 적절한 언어 코드를 사용하여 TranslateService의 번역 언어 메소드를 호출합니다.

참고: this.translate.use('DE')를 사용할 때는 대소문자를 구분하므로 올바른 언어 코드를 사용하고 파일 이름이 정확한지 확인하세요.

결론:

국제화는 현대 소프트웨어 개발의 핵심 요소이며 Angular는 다국어 애플리케이션을 만들기 위한 강력한 도구를 제공합니다. ngx-translate 라이브러리를 사용하면 Angular에서 i18n을 구현하는 것이 더 간단해지고 적응성이 높아집니다.

이 기사에서는 ngx-translate를 사용하여 번역 파일을 생성하고, 템플릿에 번역을 적용하고, Angular 애플리케이션 내에서 언어를 전환하는 방법을 다루었습니다. 이러한 지침을 따르면 전 세계 사용자가 액세스할 수 있는 다국어 앱을 손쉽게 구축할 수 있습니다.

감사합니다!

질문이 있으시면 언제든지 댓글을 남겨주세요