' i18n ' 이란 ?

 

 

국문 ↔ 영문 페이지를 번역하는 상황을 생각해 보자 

 

이때 'i18n' 이라는 개념이 등장한다 .

 

 

 

i18n

 

 

[ 정의 ] 

 

" internationalization " 의 약어 

 

소프트웨어나 웹 애플리케이션을 여러 언어와 지역에 맞게 설계하고 구현하는 프로세스 

다국어 처리를 담당한다. 

 

 

 

 

#  다국어 처리에 주로 사용되는 도구 및 라이브러리 

 

• i18next :  JavaScript 용 다국어 라이브러리로, 클라이언트 측 다국어 처리에 사용됨

 

• gettext : 서버 측 다국어 처리를 위한 라이브러리로 PHP, Python 등 다양한 백엔드 언어에서 사용할 수 있음

 

• React-Intl : React 애플리케이션에서 다국어 처리를 지원하는 라이브러리 

 

 

 

 

# i18n 을 적용하는 예시

 

 

( 아래 예시는 부정확할 수 있음 !!! )

 

 

1 ) 다국어 텍스트 파일 생성 

 

- 각 언어별로 텍스트를 저장할 파일 생성 ( 일반적으로 JSON 또는 XML 형식의 파일 사용 ) 

 

// ko.json
{
  "greeting": "안녕하세요!",
  "welcome_message": "환영합니다!"
}

 

// en.json
{
  "greeting": "Hello!",
  "welcome_message": "Welcome!"
}

 

 

 

 

2) 웹 페이지에서 i18n 라이브러리 사용

 

- 클라이언트 측에서 JavaScript 와 i18n 라이브러리를 사용하여 언어에 따라 텍스트를 동적으로 변경한다.

<p id="greeting"></p>
<p id="welcome_message"></p>

<script src="i18next.min.js"></script>
<script>
  // 브라우저에서 사용자 언어 설정을 가져옴
  var userLanguage = navigator.language || navigator.userLanguage;
  
  // 다국어 텍스트 파일 로드
  i18next.init({
    lng: userLanguage,
    resources: {
      ko: { translation: { "greeting": "안녕하세요!", "welcome_message": "환영합니다!" } },
      en: { translation: { "greeting": "Hello!", "welcome_message": "Welcome!" } }
    }
  });

  // 텍스트 삽입
  i18next.on('initialized', function() {
    document.getElementById('greeting').innerText = i18next.t('greeting');
    document.getElementById('welcome_message').innerText = i18next.t('welcome_message');
  });
</script>

 

 

 

 

3) 서버 측에서 언어 설정 확인

 

- 서버 측에서는 사용자의 언어 설정을 확인하고, 해당 언어에 맞는 텍스트를 동적으로 제공한다. 

 

// 브라우저에서 현재 사용자의 언어 설정을 확인합니다.
var userLanguage = navigator.language || navigator.userLanguage;

// 언어 설정에서 첫 두 글자만 가져와서 언어 코드를 추출합니다.
var userLanguageCode = userLanguage.substring(0, 2);

// 언어 코드를 기반으로 다국어 처리를 수행합니다.
var greeting, welcomeMessage;

if (userLanguageCode === 'ko') {
    greeting = '안녕하세요!';
    welcomeMessage = '환영합니다!';
} else {
    greeting = 'Hello!';
    welcomeMessage = 'Welcome!';
}

// HTML 요소에 동적으로 텍스트를 삽입합니다.
document.getElementById("greeting").innerText = greeting;
document.getElementById("welcomeMessage").innerText = welcomeMessage;