Vercel로 자바스크립트 애플리케이션의 로컬라이제이션 및 다국어 지원 구현하기

10 Nov 2023

vercel

현대의 웹 애플리케이션은 글로벌 시장을 대상으로 하기 때문에 다국어 지원은 매우 중요합니다. 사용자들이 해당 언어로 콘텐츠를 이해하고 상호작용할 수 있도록 다국어 지원은 필수적인 기능입니다. 이번 블로그 포스트에서는 Vercel을 사용하여 자바스크립트 애플리케이션에 로컬라이제이션 및 다국어 지원을 구현하는 방법에 대해 알아보겠습니다.

1. 다국어 문자열 파일 작성

먼저 애플리케이션에서 사용할 다국어 문자열을 포함한 파일을 작성해야 합니다. 일반적으로 JSON 형식으로 작성하며, 각 언어별로 키-값 쌍을 포함하도록 구성합니다. 예를 들어, en.json과 ko.json 파일을 작성하여 영어와 한국어의 문자열을 저장할 수 있습니다.

다음은 en.json 파일의 예시입니다:

{
  "welcomeMessage": "Welcome to our website!",
  "contactUs": "Contact Us",
  "aboutUs": "About Us",
  ...
}

ko.json 파일은 비슷한 형식으로 구성됩니다.

2. 다국어 지원 모듈 설치

다국어 지원을 구현하기 위해 자바스크립트 패키지인 react-i18next를 사용하겠습니다. 이 패키지는 다국어 문자열을 애플리케이션에 쉽게 통합할 수 있도록 도와줍니다.

다음 명령어를 사용하여 패키지를 설치합니다:

npm install react-i18next

3. 다국어 문자열 파일 연결

애플리케이션에 다국어 문자열을 사용하기 위해 다음과 같이 i18n.js 또는 i18n.ts와 같은 파일을 생성합니다:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import enTranslations from './en.json';
import koTranslations from './ko.json';

const resources = {
  en: {
    translation: enTranslations,
  },
  ko: {
    translation: koTranslations,
  },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

이 코드는 en.json과 ko.json 파일을 가져와서 i18n 객체에 연결합니다. 설정을 통해 기본 언어와 대체 언어를 지정할 수 있습니다.

4. 컴포넌트에서 다국어 문자열 사용

이제 애플리케이션의 컴포넌트에서 다국어 문자열을 사용할 수 있습니다. react-i18next 패키지는 useTranslation 훅을 제공하여 간단하게 다국어 문자열을 가져올 수 있습니다.

다음은 예시입니다:

import React from 'react';
import { useTranslation } from 'react-i18next';

const HomePage = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcomeMessage')}</h1>
      <nav>
        <ul>
          <li>{t('contactUs')}</li>
          <li>{t('aboutUs')}</li>
        </ul>
      </nav>
    </div>
  );
};

export default HomePage;

useTranslation 훅을 사용하여 t 함수를 얻은 다음 해당 키를 사용하여 다국어 문자열을 가져올 수 있습니다.

5. Vercel에 애플리케이션 배포

다국어 지원이 구현된 애플리케이션을 Vercel에 배포할 수 있습니다. Vercel은 정적 웹 애플리케이션을 쉽게 배포할 수 있는 플랫폼입니다.

다음 명령어를 사용하여 Vercel CLI를 설치합니다:

npm install -g vercel

혹은 yarn을 사용한다면

yarn global add vercel

애플리케이션 디렉토리에서 다음 명령어를 실행하여 Vercel에 배포합니다:

vercel

그러면 배포되는 URL이 생성됩니다.

결론

Vercel을 사용하여 자바스크립트 애플리케이션에 로컬라이제이션 및 다국어 지원을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자들이 좀 더 편리하게 애플리케이션을 사용할 수 있으며, 글로벌 시장에서 경쟁력을 얻을 수 있습니다. Vercel의 간편한 배포 기능으로 애플리케이션을 신속하게 배포할 수 있으며, react-i18next 패키지를 사용하여 다국어 문자열을 효과적으로 관리할 수 있습니다.

참고 자료:

Vercel 공식 문서: https://vercel.com/docs

react-i18next GitHub 레포지토리: https://github.com/i18next/react-i18next

#Vercel #다국어지원