리엑트 i18 라이브러리를 이용한 다국어기능 찍먹해보기.

최근 면접 때 면접관님께서 다국어기능 라이브러리를 한번 찾아보고 경험해보는게 좋다고
조언해주셔서, 찾아보고 간단하게나마 구현해보기로했다.
기존에 만들어뒀던 todo_list 제목을 한글과 영어로 번역되게 한번 해보았다.

 

 

🔎  완성

 

 

 

 

---

🔎  폴더 설정

 

 

Src>languages 폴더를 만들고, 번역 할 언어들과 기본설정 파일 i18n.js를 만들어준다.

 

🔎 코드 구현

 

👉 en.json

 

{
  "todo_List": "todo_List"
}

 

파일이름에도 나타나듯이, json형태로 설정해준다.

 

👉  ko.json

{
  "todo_List": "할일 목록"
}

 

마찬가지로, json형태로 설정해준다.

 

👉  i18n.js

 

import i18n from "i18next"; //js로 작성된 애플리케이션에 다국어 지원을 추가하기 위한 라이브러리
import { initReactI18next } from "react-i18next"; //이를 통해 리엑트 컴포넌트에서 i18next를 편리하게 사용 할 수 있다.
import en from "./en.json"; //각 언어에 대한 번역을 담고있는 json파일을 불러온다
import ko from "./ko.json"; //각 언어에 대한 번역을 담고있는 json파일을 불러온다

i18n.use(initReactI18next).init({ //i18next를 초기화하고, react바인딩을 사용하도록 설정
  resources: { //각 언어에 대한 번역설정
    en: { //en은 en.json으로 설정
      translation: en,
    },
    ko: { //ko는 ko.json으로 설정
      translation: ko,
    },
  },
  lng: "ko-KR", //기본 언어를 설정
  fallbackLng: { //사용자의 언어 설정이 지원되지 않는 경우 사용할 대체언어 설정
    "ko-KR": ["ko-KR"],
    default: ["en-US"],
  },
  debug: true, //디버그 모드 활성화. 번역관련 경고와 오류가 콘솔에 출력된다.
  defaultNS: "translation",
  ns: "translation",
  keySeparator: false,
  interpolation: {
    escapeValue: false,
  },
  react: {
    useSuspense: false,
  },
});

export default i18n;

 

 

👉  App.js

 

import i18n from "./languages/i18n.js";
import { useTranslation } from "react-i18next";


function App() {
  const { t } = useTranslation();
  
  const onChangeLang = () => {
    i18n.language === "ko"
      ? i18n.changeLanguage("en")
      : i18n.changeLanguage("ko");
  };
  
  return(
		<header className="tit">{t("todo_List")}</header>
        <button onClick={() => onChangeLang()}>언어변경</button>
	)
}

 

위의 코드 말고 다른코드도 많지만, 가독성을 위해 필요한 부분만 올렸습니다.

먼저, 필요한 i18n과 useTranslation을 import 해줬습니다.

 

useTranslation은 i18n의 리엑트 훅으로 import하여, t를 이용하여 기존에 설정한 json파일을 통해

번역키를 인자를 받아, 해당 키에 대한 번역결과를 반환합니다.

 

위의 코드에서 언어변경이라는 버튼을 클릭하면, onChangeLang()함수가 실행되고,
onChangeLang함수는 삼항연산자로 ko면 en으로변경 en이면 ko로 변경시켜줘,

 

결국 todo_List면 => 할일 목록  할일 목록이면 => todo_List로 변경되어

브라우저에 출력시켜줍니다.

 

 

🔎 결론  

 

면접관님 조언으로 해본 다국어기능 라이브러리.

다국어 기능이라 해서 많이 복잡하고 어려울 줄 알았는데, 생각보다는 
구현하기 편리했고, 리엑트에 다른 유용한 라이브러리들이 있는지,
찾아보고 구현해보고싶다는 생각이 들었습니다.

결과는 아직 나오지않았지만, 다른 면접들과는 달리, 더 나은 개발자가 되기 위한
방법을 많이 제시하고, 깨닫게 해준 좋은 경험이었던것 같습니다.

긴장한 탓에 답변을 제대로 하지 못했지만, 
여러질문과 그에 대한 답변방법, 그리고  조언들을 한번 더 생각하고 실천해야겠습니다.