[i18n] 프로젝트에 다국어 적용하기

다국어 경험을 할 일이 많은가? 싶은데 여즉껏 계속 사용하고 있다...

초기설정은 내가 해본 적이 없었는데 온보딩 동안 해볼기회가 있어서 초기 세팅을 해보는 시간을 가졌었다.

생각보다 검색에 잘 안나와서...작성해보기로~

 

1. vscode에 i18n Ally 설치

- 다국어를 설정한 언어로 미리 볼수 있고, 관리하기 편하다.

ㄴ오른쪽 하단에 눈모양으로 현재 표출될 언어를 선택 할 수 있고

ㄴ 적용하면 이런식으로 다국어중 내가 원하는 언어로 미리 보여준다.

 

2. create react app을 완료했다는 전제하에,

npm i react-i18next
npm i i18next

 

3. locale 폴더생성 후, 언어별로 파일 생성

/src 밑에 locales이라는 폴더를 만들고, json 파일 형태로 언어별로 파일을 생성한다

파일 형식은 아래처럼 하는데,

namespace로 사용할 페이지를 구분하고 하위에 키밸류 쌍으로 적어나가면 된다.

account.id 식으로 접근 가능!

{
  "account": {
    "id": "ID",
    "name": "Name",
    "email": "Email",
  }
}

 

4. i18n.js 파일 생성

/src폴더 바로 하위에 i18n.js를 만든다(파일 이름 상관없음!!)

App.js랑 같은 레벨에 생성하면 된다.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEn from "./locales/en.json";
import translationKo from "./locales/ko.json";
import translationJa from "./locales/ja.json";
import translationEs from "./locales/es.json";

const resources = {
  en: {
    translation: translationEn,
  },
  ko: {
    translation: translationKo,
  },
  ja: {
    translation: translationJa,
  },
  es: {
    translation: translationEs,
  },
};

i18n.use(initReactI18next).init({
  resources,
  fallbackLng: "ko",
  debug: true,
  // keySeparator: ".", // 키 접근 방법
  interpolation: {
    escapeValue: false, // react already safes from xss
  },
  lng: localStorage.getItem("lng") || "ko",
});

export default i18n;

localStorage에 lng에 설정된 언어가 있다면 가져오고, 없을때는 일단 한국어로 표출

 

5. 다국어 바꾸기 기능 적용하기

export default function Header() {
	const { i18n } = useTranslation();
	const [langOption, setLangOption] = useState(i18n.language);
...
	useEffect(() => {
    	i18n.changeLanguage(langOption);
    	localStorage.setItem("lng", langOption);
    }, [langOption]);
...
	<li
        onClick={() => {
        	setLangOption("en");
        }}
    >
...
}

나는 헤더에 언어를 바꾸는 탭을 배치했기때문에 헤더에 다국어 바꾸는 함수를 작성하였다

 

6. 기타 설정

보통 프로젝트 설정시에 시스템이 자동으로 다국어 경로를 찾는데, 못찾는 경우 직접 적어줘야 인식이 된다.

최상위의 .vscode/setting.json

{
  "i18n-ally.localesPaths": ["src/locale"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sourceLanguage": "ko"
}

 

이걸 할때 구글 시트로 다국어 번역 작업을 하고 한번에 json으로 빼는 작업도 진행하였는데, 조만간 포스팅 하도록 하겠다.