[Electron] electron에서 i18next views, controller 둘다 사용하는 법

오늘 electron으로 만든 앱을 개발하던 도중 다국어 처리를 위해 i18next를 사용하였다.
그런데 프론트엔드에서는 i18next가 정상적으로 작동하는데 백엔드에서 사용하려니 undefined 에러가 나온다...
이게 무슨일인가..?

그래서 이것저것 찾아보던 중 debug:true를 알게 되었다.
i18next를 init할때 debug:true 옵션을 주면 좀더 상세한 로그가 나오게 되는데 이를 이용하여 문제를 해결할 수 있었다.
내가 사용하는 방식은 이렇다.

const i18next = require('i18next');
const Backend = require('i18next-electron-backend');

i18next.use(Backend).init({
  lng: locale,
  fallbackLng: locale,
  backend: {
    loadPath:  `${__dirname}/locales/${locale}.json`
  },
  debug:true,
});​​

해결방법부터 말하자면
i18next를 main.js에서 한번, preload.js에서 한번 init을 해야한다는 것이다. 어째서..?

 main.js : backend에서 사용하는 i18next를 init해줌
preload.js: frontend에서 사용하는 i18next를 init해줌

이런 이유로 main.js와 preload.js에서 해줘야한다. (지극히 개인적인 판단으로 적는거라 아닐수도 있다;;)

이것을 어떻게 알았냐면
두 곳 모두에서 debug:true 를 해주면 하나는 디버그 콘솔에서, 하나는 개발자도구 콘솔에서 나오는 것을 알 수 있었기 때문이다.

백엔드 콘솔 창에 나오는 i18next debug 내용

 

프론트 개발자도구 콘솔창에 나오는 i18next의 debug 내용

** 참고로 i18next를 init하자마자 i18next.t를 사용한다면 원하던 언어로 안나올 수 있다. json파일을 읽어들이는데 시간이 조금은 걸리는 것 같다. debug:true를 한채로 살펴보면 en을 설정했을 때 console.log(i18next.t(’로그인’))의 결과로 “로그인”이 나오고 이후에 debug 로그가 나오는 것을 볼 수 있다.