티스토리 뷰

Dev/TypeScript

Angular 6 ngx-translate i18n 작업하기 #1

글쟁이 야훔 2018. 6. 20. 21:16

안녕! 맨날 Django만 글을 쓰다가 잠깐 쉴겸 Angular에서 i18n 국제화 이슈를 해결하는 방법을 공유하려고 돌아왔다.


Angular에서는 자체적으로 i18n을 제공하는 명령인 ng xi18n 이라는 명령이 있다는 것을 알기만하고 쓸일이 없어서 신경 안쓰다가 이번에 국제화 이슈가 터지면서 제대로 알아보기로 알아봤다.


결론부터 이야기하면 xi18n기능은 쓰지마라. 이건 사용하면 안되는 거다. 언어파일 갯수대로 프로젝트를 중복 생성시켜서 국제화 이슈를 해결하려는 악마의 프로그램이다.



무슨 이야긴지 자세히 풀어 설명하자면 xi18n은 HTML 내부에 태그에 붙어있는 i18n 이라는 directive를 감지해서 해당 코드를 언어별 xif 파일로 정리해 뽑아준다. 그리고 언어별로 번역한 뒤에 build 명령을 날리면 어플리케이션 하위로 언어별 프로젝트를 새로 생성해 사용하는 구조로 되어있다.


셋팅도 힘들고 위의 설명한 내용을 적용하는건 더더욱 힘들다. 노가다는 노가다 대로 하고 셋팅도 하루종일 삽질에 삽질을 거듭하면서 적용했더니 결과가 영어로 된 프로젝트 한벌, 일어로 된 프로젝트 한벌, 한국어로 된 프로젝트 한벌씩 만들어서 국제화를 해결하는 것을 보고 털썩 주저앉았다.



아니 뭐 이딴게 다 있어. 언어를 적용하려고 프로젝트를 중복 생성시키는 결과라니. 무슨 약을 빨면 이런 결과물을 만들어 내는거냐!!!

라고 한 15분정도 멘탈이 떨어져 나간 뒤 나는 다시 검색을 했다. ngx-translate라는 (아마도 Angular Extension Translate쯤 되는거 같다) 서드파티 모듈을 발견했다.(공식 Github는 여기를 클릭해라)


이 ngx-translate는 언어 json 파일을 따로 적용하고 그것을 HttpClient로 불러온 뒤에 HTML내용을 매핑하는 방식을 쓰는 아주 훌륭한 프로그램이 되시겠다.


오늘은 그것을 어떻게 사용하는지 알아보는 시간을 갖도록 해보겠다. 아래의 설명을 다 읽고도 잘 모르겠다면 여기로 이동해 참고하기를 바란다.

프로젝트를 생성해보도록 하자.



ngx-translate-sample 이라는 이름 대충 지은 프로젝트를 하나 만들었다. 여기서 콘솔 명령창에 아래처럼 명령을 입력해 패키지를 설치한다.





이렇게 @ngx-translate/core 와 @ngx-translate/http-loader 를 설치하면 되겠다.

그리고 TranslateModule을 AppModule에 추가해준다. AppModule이 어디에 있느냐면 src/app.module.ts 파일을 열어보면 된다.

이 파일을 아래와 같이 수정한다.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';
import { HttpClient, HttpClientModule } from '@angular/common/http';

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

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


일단 TranslateService를 사용하기 위해서 imports에 TranslateModule를 추가해준다. 이때 외부에서 번역파일을 불러올거라서 TranslateLoader를 설정하기 위해 forRoot 메서드를 통해 loader 설정을 추가한다. 이때 useFactory에서 메서드를 하나 추가하는데 위에 먼저 선언한 createTranslateLoader 메서드다. TranslateHttpLoader를 통해서 외부 번역파일을 로드하는데 이때 필요한것이 HttpClient가 필요하다.


그리고 HttpClient를 사용하려면 HttpClientModule이 필요하니까 잊지말고 추가하도록 한다.


깜빡하고 넘어갈 뻔했는데 위에 TranslateHttpLoader를 설정할 때 적용했던 경로에 파일 하나를 추가하도록 하자. 나는 './assets/i18n/' 폴더에 en.json 파일을 만들었다.



자, 이제 app.component.ts 파일을 손보도록하자.


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

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

    constructor(translate:TranslateService){
        this.translate = translate;
    }
    
    public ngOnInit():void {
        this.translate.setDefaultLang('en');
    }
}


기존에 있던 코드들을 좀(?) 지우고 TranslateService 파일을 추가하고 기본 언어 셋팅을 했다. 그리고 ng serve 명령으로 서버를 기동해보자. 그리고 브라우저를 통해 localhost:4200으로 접속해보자.



기본 언어로 설정했던 en.json 파일을 불러오는 것을 확인할 수 있다. 만약에 기본언어가 한국어라면 아까 setDefaultLang 메서드로 셋팅한 기본언어를 'ko'로 변경하면 된다.


물론 지금은 ko.json 파일을 만들기 전이라 404 에러가 발생한다. 일단 en.json 파일을 열어서 내용을 좀 채워넣도록 하자.



그리고 app.component.html 파일을 다음과 같이 수정하자.


<div style="text-align:center">
  <h1>
    {{'hello'|translate}}
  </h1>
</div>
<h2>{{'subtitle'|translate}}</h2>
<ul>
  <li>
    <h2><a target="_blank" href="https://angular.io/tutorial">{{'title1'|translate}}</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">{{'title2'|translate}}</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://blog.angular.io/">{{'title3'|translate}}</a></h2>
  </li>
</ul>


이렇게 key 값을 바인드로 걸어주고 translate를 pipe로 설정해주면 아래와 같이 en.json 에 작성해둔 내용이 바인딩 되어 적용된다.

(이미지가 있는건 내꺼는 이미지를 안 지워서 그렇다.)



그럼 여기서 ko.json 파일을 i18n 폴더에 추가하고 버튼을 추가해서 언어를 동적으로 바꾸는걸 해보자.






코드를 다 올리려고 했는데 귀찮아서 포기. (사실 하도 삽질을 해서 체력이 다 떨어졌다...)

걍 대충보고 따라하면 아래처럼 언어가 바뀌는 것을 확인 할 수 있을 거다.




아아 훌륭한 패키지다. 다음번엔 데이터 바인딩 하는 법과 다른 모듈에도 적용되는 국제화 코드로 들고 돌아오겠다.


오늘은 여기까지!

댓글
댓글쓰기 폼