ECMAScript 6는 2015년 6월 승인을 목표로 작성되고 있는 새 ECMAScript 표준이다. Prototype 기반의 객체 지향 패턴을 쉽게 사용할 수 있도록 돕는class의 추가,=>화살표 함수 표현, 템플릿 문자열,generator와yield등 다른 언어에서 편리하게 사용하던 많은 기능들이 추가될 예정이다.
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
i18n.use(LanguageDetector).init({
// we init with resources
resources: {
ko: {
translations: {
Introduction: "소개",
"is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
"소개입니다",
"Plugins to detect the user language":
"소개에에에엥",
"Plugins to load translations": "소개",
"Optionally cache the translations": "소개",
Advantages: "Advantages",
"Flexibility to use other packages": "소개"
}
},
en: {
translations: {
Introduction: "Introduction",
"is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
"is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop",
"Plugins to detect the user language":
"Plugins to detect the user language",
"Plugins to load translations": "Plugins to load translations",
"Optionally cache the translations":
"Optionally cache the translations",
Advantages: "Advantages",
"Flexibility to use other packages": "Flexibility to use other packages"
}
},
jap: {
translations: {
Introduction: "前書き",
"is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
"Webからモバイルとデスクトップに製品をローカライズするための完全なソリューションを提供する国際化フレームワークです",
"Plugins to detect the user language":
"ユーザー言語を検出するためのプラグイン",
"Plugins to load translations": "翻訳をロードするためのプラグイン",
"Optionally cache the translations": "必要に応じて翻訳をキャッシュする",
Advantages: "利点",
"Flexibility to use other packages": "他のパッケージを使用する柔軟性"
}
},
hin: {
translations: {
Introduction: "प्रस्तावना",
"is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
"एक अंतर्राष्ट्रीयकरण - ढांचा है जो आपके उत्पाद को वेब से मोबाइल और डेस्कटॉप पर स्थानांतरित करने का एक संपूर्ण समाधान प्रदान करता है",
"Plugins to detect the user language":
"उपयोगकर्ता भाषा का पता लगाने के लिए प्लगइन्स",
"Plugins to load translations": "अनुवाद लोड करने के लिए प्लगइन्स",
"Optionally cache the translations": "वैकल्पिक रूप से अनुवाद कैश करें",
Advantages: "लाभ",
"Flexibility to use other packages":
"अन्य पैकेजों का उपयोग करने के लिए लचीलापन"
}
},
ger: {
translations: {
Introduction: "Einführung",
"is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
"ist ein Internationalisierungs-Framework, das eine Komplettlösung für die Lokalisierung Ihres Produkts vom Web auf das Handy und den Desktop bietet",
"Plugins to detect the user language":
"Plugins zur Erkennung der Benutzersprache",
"Plugins to load translations": "Plugins zum Laden von Übersetzungen",
"Optionally cache the translations":
"Optional die Übersetzungen zwischenspeichern",
Advantages: "Vorteile",
"Flexibility to use other packages":
"Flexibilität zur Verwendung anderer Pakete"
}
},
fre: {
translations: {
Introduction: "Introduction",
"is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
"est un cadre d'internationalisation qui offre une solution complète pour localiser votre produit du Web au mobile et au bureau",
"Plugins to detect the user language":
"Plugins pour détecter la langue de l'utilisateur",
"Plugins to load translations": "Plugins pour charger les traductions",
"Optionally cache the translations":
"Cachez éventuellement les traductions",
Advantages: "Les avantages",
"Flexibility to use other packages":
"Flexibilité d'utiliser d'autres packages"
}
}
},
fallbackLng: "en",
debug: true,
// have a common namespace used around the full app
ns: ["translations"],
defaultNS: "translations",
keySeparator: false, // we use content as keys
interpolation: {
escapeValue: false, // not needed for react!!
formatSeparator: ","
},
react: {
wait: true
}
});
export default i18n;
index.js
import React from "react";
import ReactDOM from "react-dom";
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import App from "./app";
// wrap the app in I18next Provider with the configuration loaded from i18n.js
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>,
document.getElementById("root")
);
결과
한글번역
영어번역일본번역
이렇게 i18next로 다국어 처리를 해봤습니다 폴더구조는 정말 간단하게
이렇게만 정해주시면 됩니다.
추가로 설명할 부분은 일단 i18n에 ko, en, jp 별로 코딩을 합니다. 그리구 app.js 최상위 파일에서 import 해주는 방식으로
{t(
"is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop"
)}
이런식으로 {t( 치환 할 문자 )}를 넣어주시면 됩니다 !
저처럼 초보개발자인데 i18next를 사용하고싶으신분들은 코드 보면서 코드리뷰해보면 이해가 가실 것 같습니다
감사합니다 :) 많은 조언도 주세요 피드백 받고있습니다.
참고 사이트 : 외국 사이트에서 번역 + 추가 개발을 한 것인데 사이트를 찾으면 올리겠습니다ㅜㅜ
