Rails 및 i18n-js를 통한 국제화

Wikipedia에 따르면 국제화(첫 번째 "i"와 마지막 "n"사이에 정확히 18개의 문자가 있으므로 약칭 i18n)는 엔지니어링 변경 없이 다양한 언어와 지역에 적용할 수 있도록 소프트웨어 응용 프로그램을 설계하는 프로세스입니다. .
Rails 가이드에 따르면 "국제화"프로세스는 일반적으로 애플리케이션에서 모든 문자열 및 기타 로케일 특정 비트(예: 날짜 또는 통화 형식)를 추상화하는 것을 의미합니다. "현지화"프로세스는 이러한 비트에 대한 번역 및 현지화된 형식을 제공하는 것을 의미합니다.

저는 React on Rails로 빌드된 앱을 작업하고 있었습니다. 대부분의 페이지는 React로 작성되었지만 일부 페이지는 Rails 뷰에서 작성되고 렌더링되었습니다. 즉, 백엔드와 프런트엔드 모두에서 번역을 제공하는 방법을 찾아야 했습니다.
기사와 자습서를 검색했지만 내가 가진 동일한 문제를 해결하는 항목을 찾을 수 없었습니다. "i18n-ing"Rails 앱과 Rails 및 Javascript에 대한 많은 자습서를 찾았지만 Rails 및 React에서는 찾을 수 없었습니다.
시간을 들여 조사한 후 rails-i18n 및 i18n-js 보석을 사용해 보기로 했습니다.
rails-i18n는 앱 번역을 위한 사용하기 쉽고 확장 가능한 프레임워크를 제공합니다. i18n-js는 JavaScript 측에서 Rails i18n 변환을 생성하는 작은 라이브러리입니다. Rails 측의 yml 번역 파일을 사용하여 Javascript 파일을 자동 생성하는 미들웨어를 제공합니다.

그 보석을 사용하는 것이 내가 가진 문제를 해결하는 좋은 방법인 것 같았습니다.
내가 한 방법을 공유하고 싶습니다.

먼저 Gemfile에 gem을 추가합니다.

gem "i18n-js"
gem "rails-i18n"

다음을 실행하여 gem을 설치하는 것을 잊지 마십시오.bundle install
webpacker를 사용하는 경우 다음을 실행하십시오.npm install i18n-js자산 파이프라인을 사용하는 경우 this ReadMe을 확인하십시오.
config/application.rb에서 사용 가능한 로케일을 정의합니다. 제 경우에는 영어와 일본어에 대한 지원을 추가하고 있습니다.

config.i18n.available_locales = [:en, :ja]

Rails 콘솔에서 사용 가능한 모든 로케일을 확인할 수 있습니다.

I18n::JS.filtered_translations.keys
=> [:en, :ja]

이제 en.yml에 영어 문자열을 추가합니다.

en:
  hello: "Hello world"

다음과 같이 Rails 콘솔에서 작동하는지 확인할 수 있습니다.

I18n.t 'hello'
=> "Hello world"

이제 ja.yml에 일본어 번역을 추가해 보겠습니다.

ja:
  hello: "こんにちは 世界"

이것이 슬림 파일에서 번역에 액세스하는 방법입니다.

h1 = t('hello')

이제 Rails 쪽에서 작동하게 했으니 React 쪽에서 번역을 가져오겠습니다.

이 줄을 추가하여 미들웨어를 추가합니다.

config.middleware.use I18n::JS::Middleware

config/application.rb . 미들웨어는 프런트엔드에서 번역 파일을 생성합니다.
rails generate i18n:js:config를 실행하면 config/i18n-js.yml가 생성됩니다.

이것은 config/i18n-js.yml에 추가된 내 구성입니다.

translations:
- file: 'app/javascript/bundles/i18n/en.js'
  prefix: "import I18n from 'i18n-js';\n"
  pretty_print: true
  only: 'en.*'
- file: 'app/javascript/bundles/i18n/ja.js'
  prefix: "import I18n from 'i18n-js';\n"
  pretty_print: true
  only: 'ja.*'

file js 번역 파일에 대해 내가 선택한 경로를 지정하고 있습니다.prefix는 선택사항이지만 이것이 없으면 "I18n이 정의되지 않음"오류가 발생하여 작동하지 못했습니다. 결과 번역 파일의 시작 부분에 줄을 추가합니다.pretty_print도 선택 사항이지만 이것을 넣는 것이 좋습니다. 출력 파일에 공백과 들여쓰기를 추가하여 파일을 훨씬 쉽게 읽을 수 있습니다.

달리다 rake i18n:js:export이렇게 하면 선택한 경로에 대한 번역 파일이 생성됩니다.

이것을 반응 파일에 추가하십시오.

import i18n from 'i18n-js'

백엔드에서 기본 로케일 및 로케일을 설정하기 위해 다음을 추가했습니다views/layouts/application.slim.

- javascript_tag do
      I18n.locale = I18n.locale
      I18n.defaultLocale = I18n.default_locale

그리고 이것을 추가하십시오 application.rb

config.i18n.default_locale = :ja

React 측에서 설정하려면 렌더링 내부에 이것을 추가할 수 있습니다(이렇게 하면 일본어로 설정됨).

I18n.defaultLocale = "ja"
I18n.locale = "ja"

ja는 "ja"와 같은 문자열이어야 합니다.

마지막으로 React에서 Rails 번역에 액세스할 수 있도록 추가합니다.

<h2>{I18n.t('hello')}</h2>

로케일이 영어로 설정되면 다음과 같이 표시됩니다.



로캘이 일본어로 설정되면 다음과 같이 표시됩니다.



보시다시피 일부 번역 문자열은 더 길어질 수 있으며 이로 인해 css를 처리하는 데 많은 골칫거리가 될 수 있습니다 😱

이 게시물이 누군가를 돕기를 바랍니다.
행복한 i18n-ing!