[javascript] Storybook을 활용한 자바스크립트 앱의 로컬라이제이션 방법

27 Nov 2023

javascript

로컬라이제이션은 앱이 다국어를 지원할 수 있는 중요한 기능입니다. 이 기능을 구현하는 여러 가지 방법이 있지만, 이번 글에서는 Storybook을 사용하여 자바스크립트 앱의 로컬라이제이션을 처리하는 방법에 대해 알아보겠습니다.

Step 1: 프로젝트 설정

먼저, 자바스크립트 앱 프로젝트에 Storybook을 설치해야 합니다. 프로젝트 루트 디렉토리에서 다음 명령을 실행합니다:

npx sb init

이 명령은 프로젝트에 Storybook을 초기화하고 필요한 파일과 디렉토리를 생성합니다. 이후에는 src 디렉토리 내에서 컴포넌트를 작성하고 Storybook을 통해 미리보기할 수 있습니다.

Step 2: 로컬라이제이션 패키지 설치

로컬라이제이션을 처리하기 위해 react-i18next와 같은 패키지를 설치해야 합니다. 다음 명령을 실행하여 패키지를 설치합니다:

npm install react-i18next i18next

이 패키지를 사용하면 앱의 다국어 지원을 간편하게 구현할 수 있습니다.

Step 3: 로컬라이제이션 파일 생성

프로젝트 루트에서 locales 디렉토리를 만들고 해당 디렉토리 내에서 각 언어별 json 파일을 생성합니다. 예를 들어, ko.json, en.json 등의 파일을 생성할 수 있습니다. 이 파일들은 각 언어에 대한 번역 메시지를 포함합니다. 예를 들어, ko.json 파일에는 다음과 같은 형식으로 번역 메시지를 작성할 수 있습니다:

{
  "greeting": "안녕하세요",
  "welcome": "환영합니다"
}

Step 4: 로컬라이제이션 컴포넌트 작성

앱에서 로컬라이제이션을 사용하기 위해 컴포넌트를 작성해야 합니다. 예를 들어, Localization.js 파일을 생성하여 다음과 같은 컴포넌트를 작성합니다:

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

function Localization() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('welcome')}</p>
    </div>
  );
}

export default Localization;

위의 코드에서 useTranslation 훅을 사용하여 번역 함수를 가져오고, t 함수를 통해 번역된 메시지를 사용합니다.

Step 5: Storybook 스토리 작성

이제 Storybook에서 로컬라이제이션을 사용하기 위해 스토리를 작성해야 합니다. src/stories 디렉토리에 Localization.stories.js 파일을 생성하고 다음과 같이 작성합니다:

import React from 'react';
import Localization from '../Localization';

export default {
  title: 'Localization',
  component: Localization,
};

export const Default = () => <Localization />;

위의 코드는 Localization 컴포넌트를 이용하여 Localization 스토리를 생성합니다. 이제 Storybook을 실행하면 로컬라이제이션 컴포넌트를 확인할 수 있습니다.

Step 6: Storybook에 로컬라이제이션 추가

Storybook에 로컬라이제이션을 추가하려면 src/preview.js 파일을 생성하고 다음과 같이 작성합니다:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslations from '../locales/en.json';
import koTranslations from '../locales/ko.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: enTranslations },
    ko: { translation: koTranslations },
  },
  lng: 'en',
  fallbackLng: 'en',
});

export const parameters = {
  locale: 'en',
};

위의 코드에서 i18n을 초기화하고 언어에 따른 번역 파일을 설정합니다. parameters 객체를 통해 기본 언어를 설정할 수 있습니다.

이제 Storybook을 실행하면 기본 언어에 따라 번역된 컴포넌트를 확인할 수 있습니다. 또한, Storybook의 환경 패널에서 언어를 변경하여 다른 언어로 번역된 컴포넌트를 확인할 수도 있습니다.

결론

Storybook을 활용하여 자바스크립트 앱의 로컬라이제이션을 구현하는 방법을 알아보았습니다. react-i18next를 사용하면 간편하게 다국어 지원을 구현할 수 있습니다. 로컬라이제이션은 사용자 경험을 향상시키는 중요한 기능이므로 앱 개발 시 이를 고려하는 것이 좋습니다.