한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - 국제화

안녕하세요, 야심 찬 웹 개발자 여러분! 오늘 우리는 AngularJS의 국제화 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서 저는 이 fascineting 주제를 안내해드리겠습니다. 그러니 마음에 드는 음료를 골라 편안하게 자리 잡고, 이제 시작해봅시다!

AngularJS - Internationalization

국제화란?

코딩을 시작하기 전에 국제화가 무엇을 의미하는지 이해해 보겠습니다. 상상해 보세요, 놀라운 웹사이트를 만들었지만 영어로만 되어 있습니다. 그런데 다른 나라 사람들도 사용하고 싶다면 어떻게 하겠습니까? 그게 바로 국제화입니다! 웹사이트에 여행 비자를 주는 것과 같은 것입니다.

국제화(자주 i18n으로 축약됨 - 'i'와 'n' 사이에 18개의 글자가 있습니다)는 애플리케이션을 설계하여 다양한 언어와 지역에 맞게 적응할 수 있도록 하는 과정입니다.

국제화의 중요성

이렇게 생각해 보세요: 만약에 아이스크림 가게를 가지고 있다면, 하나의 맛만 제공할 것인가요? 물론이 아니죠! 다양한 입맛을 맞춰야 합니다. 마찬가지로, AngularJS 애플리케이션을 국제화하면 전 세계 사람들에게 접근성 있고 사용자 친화적인 애플리케이션을 제공할 수 있습니다. 디지털 아이스크림을 모든 맛으로 제공하는 것과 같은 것입니다!

이제 손을 깨끗이 씻고 국제화를 쉽게 만드는 AngularJS를 보여드리겠습니다.

AngularJS 국제화 설정

우선, AngularJS 애플리케이션을 국제화할 수 있도록 설정해야 합니다. 우리는 angular-translate 라이브러리를 사용할 것이며, 이는 우리 애플리케이션을 번역하는 마법의 지팡이입니다.

다음은 설정 방법입니다:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>
</head>
<body>
<div ng-controller="TranslateController">
<!-- 우리 애플리케이션 콘텐츠가 여기 들어갑니다 -->
</div>
<script src="app.js"></script>
</body>
</html>

app.js 파일에서 우리는 AngularJS 모듈을 설정하고 번역 제공자를 구성합니다:

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
// 구성이 여기 들어갑니다
}]);

app.controller('TranslateController', function($scope, $translate) {
// 컨트롤러 로직이 여기 들어갑니다
});

덴마크어 로케일 예제

이제 우리는 애플리케이션을 덴마크어로 번역하는 간단한 예제를 만들어 보겠습니다. 왜 덴마크어인가요? 그냥 그렇습니다! 그리고 한때 덴마크 빵에 미친 학생이 있었기 때문에, 이번에는 Lars에게 바칩니다!

app.js를 업데이트해 보겠습니다:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.preferredLanguage('en');
}]);

app.controller('TranslateController', function($scope, $translate) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});

이제 어떤 일이 일어나고 있는지 설명해 드리겠습니다:

  1. 우리는 영어('en')와 덴마크어('da')에 대한 번역을 정의합니다.
  2. 영어를 기본 언어로 설정합니다.
  3. 컨트롤러 내에서 언어를 전환하는 changeLanguage 함수를 만듭니다.

이제 HTML을 업데이트해 보겠습니다:

<div ng-controller="TranslateController">
<h2>{{ 'TITLE' | translate }}</h2>
<p>{{ 'FOO' | translate }}</p>
<button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate }}</button>
<button ng-click="changeLanguage('da')">{{ 'BUTTON_LANG_DA' | translate }}</button>
</div>

출력

이 코드를 실행하면 다음을 볼 수 있습니다:

  • 제목이 "Hello"로 표시됩니다.
  • 문단이 "This is a paragraph."로 표시됩니다.
  • "English"와 "Danish"라는 두 개의 버튼이 표시됩니다.

"덴마크어" 버튼을 클릭하면, 바로! 애플리케이션이 덴마크어로 전환됩니다:

  • 제목이 "Hej"로 변경됩니다.
  • 문단이 "Dette er et afsnit."로 변경됩니다.
  • 버튼이 "Engelsk"와 "Dansk"로 변경됩니다.

마법 같지 않나요? 하지만 기억하세요, 이것은 마법이 아니라 AngularJS와 여러분의 코딩 실력입니다!

브라우저 로케일 예제

이제 한 단계 더 나아가 보겠습니다. 사용자의 브라우저 언어를 자동으로 사용하고 싶다면 어떻게 하겠습니까? 사용자가 요청하기도 전에 웹사이트가 사용자의 언어로 말하는 것처럼 보이는 것입니다!

app.js를 수정해 보겠습니다:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.useLocalStorage();
$translateProvider.fallbackLanguage('en');
$translateProvider.registerAvailableLanguageKeys(['en', 'da'], {
'en*': 'en',
'da*': 'da'
});
$translateProvider.determinePreferredLanguage();
}]);

이제 새로운 것은 무엇인가요?

  1. 우리는 사용자의 언어 선호도를 기억하기 위해 로컬 스토리지를 사용합니다.
  2. 영어를 기본 언어로 설정합니다.
  3. 사용 가능한 언어 키를 등록합니다.
  4. 브라우저의 선호 언어를 자동으로 감지합니다.

출력

이제 사용자가 웹사이트를 방문할 때:

  • 브라우저 언어가 덴마크어로 설정되어 있다면 덴마크어 버전을 볼 수 있습니다.
  • 다른 언어로 설정되어 있다면 영어 버전(기본 언어)을 볼 수 있습니다.
  • 선택한 언어가 다음 방문 시에 기억됩니다.

애플리케이션은 변신하는 변신이 아니라, 각 사용자의 환경에 맞춰 변합니다!

결론

이제 여러분은 AngularJS 애플리케이션을 다국어로 만드는 방법을 배웠습니다. 기억하시기 바랍니다, 국제화는 단순히 번역에 관한 것이 아니라, 전 세계 사용자에게 환영하는 경험을 제공하는 것입니다.

코딩 여정을 계속하면서 항상 사용자를 염두에 두세요. 쿠�펜하겐이나 캘리포니아에서든, 여러분의 애플리케이션이 그들의 언어로 인사를 건넬 수 있습니다.

계속 연습하고, 호기심을 유지하면, 어쩌면 C-3PO보다 더 많은 언어를 말할 수 있는 애플리케이션을 만들 수도 있습니다! 다음 번에 다시 만날 때까지, 행복하게 코딩하세요!

메서드 설명
$translateProvider.translations(langKey, translationTable) 특정 언어에 대한 새로운 번역 테이블을 추가합니다
$translateProvider.preferredLanguage(langKey) 기본 언어를 설정합니다
$translateProvider.useLocalStorage() 로컬 스토리지를 사용하여 언어 선호도를 기억합니다
$translateProvider.fallbackLanguage(langKey) 기본 언어를 설정합니다
$translateProvider.registerAvailableLanguageKeys(keys, aliases) 사용 가능한 언어 키와 별칭을 등록합니다
$translateProvider.determinePreferredLanguage() 브라우저의 선호 언어를 자동으로 감지합니다
$translate.use(langKey) 현재 언어를 변경합니다

Credits: Image by storyset

이전 튜토리얼:
AngularJS - 사용자 정의 디렉티브
다음 튜토리얼:
AngularJS - ToDo 애플리케이션