Angular 데이터 그리드에서 국제화 및 현지화를 처리하는 방법은 무엇입니까?

Angular 데이터 그리드에서 국제화 및 지역화를 처리하는 방법은 무엇입니까?

Angular Data Grids에서 국제화 및 현지화(l10n)를 처리하는 방법을 알고 있습니까? 이 게시물을 읽고 코드 조각, 설명 등을 찾으십시오.

6min read

전 세계 사용자에게 도달하는 소프트웨어를 만드는 데 있어서는 국제화(i18n)와 현지화(l10n)라는 두 가지 필수 프로세스가 작용합니다. 종종 같은 의미로 사용되지만 이러한 용어는 두 가지 다른 프로세스를 나타냅니다.

이 기사에서는 국제화와 지역화의 기본 사항을 다루고, 지역화된 Angular 응용 프로그램을 설정하는 단계별 예제와 Ignite UI for Angular 사용하여 다국어 데이터 그리드를 만드는 실용적인 방법을 제공합니다.

So, let’s dive in. 

What Is Internationalization? 

국제화(i18n)는 일반적으로 개발자와 엔지니어가 수행하며, 이들은 나중에 언어를 추가하기 위해 대대적인 구조 조정을 수행할 필요 없이 여러 언어와 지역 설정을 지원하도록 코드베이스를 설계합니다. 사용자 대상 텍스트는 자리 표시자로 대체되며, 시스템은 각 언어에 대한 다른 구성에 따라 이를 해석합니다. 또한 유니코드 문자 인코딩 및 왼쪽에서 오른쪽 쓰기 시스템에 대한 지원을 계획해야 합니다.

지역화란 무엇입니까?

지역화는 특정 언어 및 문화권에 맞게 응용 프로그램을 사용자 지정합니다. 이 프로세스에는 텍스트를 번역하고 날짜, 시간, 숫자 및 통화와 같은 데이터 형식을 현지 규칙에 맞게 조정하는 작업이 포함됩니다. 로컬라이제이션 전문가는 각 사용자에게 자연스러운 경험을 제공하기 위해 구성 요소의 콘텐츠를 번역하고 조정합니다.

국제화와 로컬라이제이션은 밀접한 관련이 있습니다: 국제화는 유연성을 구축하는 반면, 로컬라이제이션은 개별 사용자를 위해 이를 조정합니다.

i18n 및 l10n이 중요한 이유는 무엇입니까?

국제화와 로컬라이제이션은 전 세계 고객을 대상으로 하는 모든 애플리케이션에 필수적입니다. 대부분의 사용자는 친숙한 데이터 형식의 모국어로 된 콘텐츠를 선호합니다. 이를 통해 사용성과 사용자 경험이 개선되어 애플리케이션이 여러 지역의 다양한 사용자를 수용할 수 있고 비즈니스가 새로운 국제 시장으로 확장하고 성장하는 데 도움이 됩니다.

Internationalization in Angular 

Angular 에는 다국어 애플리케이션을 보다 쉽게 관리할 수 있도록 하는 i18n(Internationalization) 기능이 내장되어 있습니다. 이를 통해 개발자는 정적 콘텐츠를 번역하고 로캘 기반 서식을 보다 쉽게 처리할 수 있습니다.

Angular 프로젝트에서 i18n 활성화 

Angular 앱에서 현지화를 설정하는 방법을 보려면 아래 예를 살펴보겠습니다.

1단계:Angular 프로젝트 설정 

Install Angular CLI  

npm install -g @angular/c

새 Angular 프로젝트 만들기:

ng new translation-example --style=css --routing=false --skip-tests 
cd translation-example

Localize 패키지를 추가합니다.

ng add @angular/localize

2단계:국제화를 위한 앱 준비 

angular.json 열고 프로젝트 아래의 로캘 섹션을 구성합니다. 한국어와 일본어용으로 구성할 것입니다.

"projects": { 
  " translation-example": { 
    "i18n": { 
      "sourceLocale": "en", 
      "locales": { 
        "ko": "src/locale/messages.ko.xlf", 
        "ja": "src/locale/messages.ja.xlf" 
      } 
    },

3단계:번역을 위해 텍스트 표시 

src/app/app.component.html 파일을 열고 번역 속성(i18n 태그)을 포함하도록 수정합니다.

<h1 i18n="@@helloWorld">Hello World</h1>

.css 파일에서 원하는 대로 페이지의 스타일을 지정할 수도 있습니다

4단계:번역 추출 

ng extract-i18n

이 명령은 src 폴더에 messages.xlf라는 파일을 만듭니다.

Step 5: Create Translation Files 

Create a locale folder in the src directory: mkdir src/locale 

messages.xlf 파일을 복사하여 한국어 및 일본어 번역을 만듭니다.

cp messages.xlf src/locale/messages.ko.xlf 
cp messages.xlf src/locale/messages.ja.x

번역을 포함하도록 파일 편집

messages.ko.xlf 파일에 추가합니다.

 <trans-unit id="helloWorld" datatype="html"> 
  <source>Hello World</source> 
  <target>안녕하세요 세계</target> 
</trans-unit>

6단계: 로캘을 사용하여 응용 프로그램 빌드 

angular.json에서 프로덕션 구성을 정의하여 현지화 설정을 포함합니다.

 "configurations": { 
           "production": { 
            "localize": true, 
    … 
    }

run the command: 

ng build --configuration=production --loca

이렇게 하면 프로젝트에 정의된 각 로케일(en, ko, ja)에 대해 별도의 빌드가 생성되어 dist 디렉토리에 언어별 폴더가 생성됩니다. 빌드가 끝나면 dist/translation-example 내에 하위 디렉토리가 표시되어야 합니다

그게 다야. 이제 응용 프로그램을 실행하면 번역 된 페이지가 다른 주소로 간단하게 표시됩니다.

internationalization in Angular Grid with Ignite UI

Localization in Angular Grids 

Angular 애플리케이션에서 데이터 그리드를 현지화할 때 초점은 단순한 텍스트 번역에 그치지 않습니다. 데이터 그리드는 일반적으로 동적 데이터를 표시하는 데 사용되므로 지역화는 숫자 형식, 날짜 및 시간 표시, 통화 기호, 문화권과 관련된 정렬 및 필터링 옵션과 같은 다양한 요소에 맞게 조정되어야 합니다.

  • 날짜 및 시간 지역화는 지역마다 크게 다를 수 있습니다. 예를 들어, 미국에서는 MM/DD/YYYY 형식이 일반적이지만 DD/MM/YYYY는 많은 유럽 국가에서 표준이며 일본 문화에서는 YYYY/MM/DD 형식입니다.
  • 소수 및 수천 개의 구분 기호를 포함하는 숫자 서식은 로캘에 따라 크게 다릅니다. 예를 들어 영어권 국가에서는 1,000.00을 사용하는 경우가 많지만 다른 지역에서는 1.000,00으로 표시할 수 있습니다.
  • 아랍어 및 히브리어와 같은 언어는 오른쪽에서 왼쪽으로 읽히므로 데이터 그리드 레이아웃에 영향을 줄 수 있습니다.
  • 알파벳순 정렬은 프랑스어 또는 독일어와 같은 언어의 고유한 문자 집합과 악센트로 인해 로캘에 따라 달라질 수 있습니다.

Ignite UI for Angular Grid – 글로벌 도달 범위를 위해 설계된 그리드

Ignite UI for Angular Grid는 지역화를 지원하는 기본 제공 기능을 제공하므로 개발자는 사용자에게 문화적, 언어적으로 적합한 방식으로 데이터를 제공할 수 있습니다. 여기에는 지역 설정에 따라 날짜, 숫자 및 통화의 형식을 지정하는 것이 포함되며, 이를 통해 응용 프로그램의 사용자 경험과 유용성이 향상됩니다. Angular Grid는 개발자가 전 세계 사용자에게 현지화된 데이터 경험을 원활하게 제공할 수 있도록 설계되었습니다.

그리드는 프랑스어, 일본어, 스페인어 등을 포함한 20개 이상의 언어에 대한 즉시 사용 가능한 리소스 문자열을 제공합니다. igniteui-angular의 기본 현지화인 영어를 제외하고 igniteui-angular-i18n 패키지를 통해 사용할 수 있습니다. 개발자는 igniteui-angular-i18n 패키지를 활용하여 몇 단계만 거치면 이러한 언어 팩을 로드하고 적용하여 문화적으로 정확한 사용자 정의 인터페이스를 만들 수 있습니다.

Angular Data Grid Localization

Ignite UI는 다양한 언어를 지원하지만 쉽게 사용자 지정할 수 있으므로 언어를 사용할 수 없는 경우 지역화된 리소스를 정의할 수 있습니다. 이러한 유연성은 그리드가 청중의 언어적, 문화적 뉘앙스에 정확하게 정렬되도록 합니다.

Ignite UI 사용하면 날짜 및 숫자 형식, 통화 기호 및 기타 중요한 데이터 표현이 자동으로 현지화됩니다. 필요한 리소스 문자열을 가져오거나 사용자 지정 언어 팩을 만들어 개발자는 글로벌 규모로 애플리케이션의 유용성과 매력을 빠르게 향상시킬 수 있습니다.

​i18n 및 현지화 옵션에 대한 자세한 내용은 Ignite UI 참조하십시오.

Ignite UI for Angular

Angular
데모 요청