소개
다국어 지원은 현대의 어플리케이션에서 중요한 요소입니다. 사용자들이 어플리케이션을 자연스럽고 편리하게 사용하기 위해서는 사용자의 언어환경에 맞게 적절한 언어로 텍스트가 표시되어야 합니다. Storybook은 개발자들이 UI 컴포넌트를 개발하고 테스트하는 도구로 알려져 있습니다. 이번 포스트에서는 Storybook을 활용하여 다국어 지원을 구현하는 방법에 대해 알아보겠습니다.
다국어 파일 생성
먼저, 다국어를 지원하기 위해 각 언어별로 다국어 파일을 생성해야 합니다. 예를 들어, 한국어와 영어를 지원하는 경우 다음과 같은 파일 구조를 가질 수 있습니다:
- src
- locales
- en.js
- ko.js
en.js 파일에는 영어로 표시될 텍스트들을, ko.js 파일에는 한국어로 표시될 텍스트들을 정의합니다. 다국어 파일은 일반적으로 key와 value의 쌍으로 구성됩니다. 예를 들어, 다음과 같이 간단히 정의할 수 있습니다:
// en.js
export default {
greeting: "Hello"
};
// ko.js
export default {
greeting: "안녕하세요"
};
Storybook 구성
Storybook에서 다국어를 지원하기 위해 i18n 패키지를 사용할 것입니다. 먼저, 필요한 패키지를 설치합니다:
npm install @storybook/addon-docs i18next i18next-browser-languagedetector react-i18next
다음으로, .storybook/main.js 파일을 열고 다음과 같이 설정합니다:
module.exports = {
addons: ["@storybook/addon-docs"],
webpackFinal: async config => {
// ...기존 webpack 설정
config.module.rules.push({
test: /\.(js|jsx)$/,
use: [
{
loader: "babel-loader",
options: {
plugins: [["react-i18next", { i18n: require("i18next") }]]
}
}
]
});
return config;
}
};
컴포넌트에 다국어 적용
이제 컴포넌트에서 다국어를 적용할 수 있습니다. 예를 들어, 다음과 같이 Greeting 컴포넌트를 작성할 수 있습니다:
import React from "react";
import { useTranslation } from "react-i18next";
const Greeting = () => {
const { t } = useTranslation();
return <div>{t("greeting")}</div>;
};
export default Greeting;
useTranslation 훅을 이용하여 다국어 텍스트를 가져옵니다. t 함수를 호출하여 해당 텍스트의 다국어 버전을 가져올 수 있습니다.
Storybook 문서화
마지막으로, 컴포넌트를 Storybook에 문서화하여 다국어 기능을 테스트할 수 있습니다. 예를 들어, 다음과 같이 .storybook/preview.js 파일을 열고 다국어를 설정합니다:
import { addDecorator } from "@storybook/react";
import React from "react";
import { I18nextProvider, initReactI18next } from "react-i18next";
import i18n from "i18next";
import en from "../src/locales/en";
import ko from "../src/locales/ko";
i18n.use(initReactI18next).init({
resources: {
en: { translation: en },
ko: { translation: ko }
},
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false
}
});
addDecorator(story => <I18nextProvider i18n={i18n}>{story()}</I18nextProvider>);
Storybook에서는 다국어 지원을 위해 i18next 패키지를 사용합니다. .storybook/preview.js 파일에서 언어 설정과 다국어 파일을 로드하는 작업을 수행합니다.
이제 Storybook을 실행하고 Greeting 컴포넌트를 확인하면, 언어 설정에 따라 텍스트가 변경되는 것을 확인할 수 있습니다.
정리
이번 포스트에서는 Storybook을 활용하여 다국어 지원 기능을 개발하는 방법을 살펴보았습니다. Storybook과 i18n 패키지를 함께 사용하여 언어별로 다른 텍스트를 쉽게 테스트하고 확인할 수 있습니다. 다국어 지원은 현대의 어플리케이션에서 필수적인 기능이므로, 이 포스트가 도움이 되었기를 바랍니다.