국제화(i18n)는 웹 애플리케이션에서 다국어 지원을 위해 중요한 요소입니다. 이는 사용자가 웹 페이지를 여러 언어로 표시할 수 있도록 하는 기능을 말합니다. 자바스크립트 미들웨어를 사용하여 국제화를 처리하는 방법에 대해 알아보겠습니다.

1. i18next 라이브러리 설치

i18next는 자바스크립트 기반의 국제화 라이브러리로, 다양한 기능을 제공합니다. 먼저 프로젝트에 i18next를 설치해야 합니다.

npm install i18next

2. 번역 파일 작성

다국어 지원을 위해 번역 파일을 작성해야 합니다. 이 파일은 json 형식으로 작성되며, 각 언어별로 번역된 문자열이 포함됩니다. 예를들어, translations.json 파일을 생성하고 다음과 같이 작성할 수 있습니다.

{
  "en": {
    "welcome": "Welcome to our website!",
    "button": "Click here"
  },
  "ko": {
    "welcome": "우리 웹사이트에 오신 것을 환영합니다!",
    "button": "여기를 클릭하세요"
  }
}

3. i18next 미들웨어 구성

i18next 미들웨어를 구성하여 애플리케이션에서 다국어 지원을 처리할 수 있습니다. Express.js를 사용하는 경우, 다음과 같이 i18next 미들웨어를 설정할 수 있습니다.

const i18next = require('i18next');
const i18nextMiddleware = require('i18next-http-middleware');

i18next
  .init({
    lng: 'en',
    fallbackLng: 'en',
    resources: {
      en: {
        translations: require('./translations.json')
      },
      ko: {
        translations: require('./translations.json')
      }
    }
  });

app.use(i18nextMiddleware.handle(i18next));

4. 다국어 문자열 사용

이제 다국어 문자열을 사용할 준비가 되었습니다. HTML 파일이나 자바스크립트 코드에서 다국어 문자열을 사용하려면 t 함수를 사용해야 합니다. Express.js를 사용하는 경우, 다음과 같이 res.locals 객체에 t 함수를 추가하여 템플릿에서 사용할 수 있습니다.

app.use((req, res, next) => {
  res.locals.t = req.t;
  next();
});

템플릿에서 다국어 문자열을 사용하려면 다음과 같이 작성할 수 있습니다.

<h1>{{ t('welcome') }}</h1>
<button>{{ t('button') }}</button>

5. 언어 변경 기능 추가

마지막으로, 사용자가 언어를 변경할 수 있는 기능을 추가해보겠습니다. 버튼을 클릭하면 언어가 변경되도록 구현할 수 있습니다.

<button onclick="changeLanguage('ko')">한국어</button>
<button onclick="changeLanguage('en')">English</button>

<script>
function changeLanguage(lang) {
  fetch('/change-language', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ language: lang })
  })
  .then(() => {
    location.reload();
  });
}
</script>

서버 측에서 언어 변경 요청을 처리하고, 클라이언트의 쿠키나 세션에 선택된 언어를 저장하는 로직을 추가해야 합니다.

이제 자바스크립트 미들웨어를 이용한 국제화 처리 방법에 대해 알아보았습니다. i18next 라이브러리를 사용하여 프로젝트에 국제화 기능을 쉽게 추가할 수 있습니다.

이 글은 #javascript와 #i18n을 확인하세요!