250903 - i18n

처음에 사이트에 번역 기능을 넣어야 한다는 이야기를 들었을 때.. 굉장히 막막했다

플러스 내가 할 일이라곤 생각 해보지 않앗다

하지만 내 일이엇다.

그렇케됐다.

 

i18n 이란?

국제화 (Internationalization, i18n)

i 로 시작해 n 으로 끝나는 사이에 18개의 문자가 있어서 i18n 이라고 한다.

국제화는 소프트웨어를 설계하고 구현하는 과정에서 다양한 언어와 지역 설정에 맞춰 쉽게 적용될 수 있도록 준비하는 것을 말한다.

 

* 주의사항

문자열을 코드에서 분리해 외부 파일이나, DB에 저장해야 한다.

날짜, 시간, 통화 등 지역에 따라 다르게 표시되는 정보를 처리할 수 있어야 한다.

문자 인코딩을 유니코드로 설정해 다양한 언어를 지원한다.

 

l10n 이란?

지역화(Localization, l10n)

l 로 시작해 n 으로 끝나는 사이에 10개의 문자가 있어서 l10n 이라고 한다.

지역화는 특정 지역이나 언어에 맞게 소프트웨어를 적응시키는 과정을 말한다.

 

* 주의사항

언어 뿐만 아니라 문화적 요소와 관습도 고려해야 한다.

ex. 색상이나 이미지가 특정 문화에서 부정적인 의미를 가질 수 있다.

 

React 환경에 적용하기

다운로드 생략

 

index.tsx 가 있는 /src 의 최상위에 i18n.ts 의 이름으로 아래 파일을 추가했다.

import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import en from '@/locales/en.json'
import ko from '@/locales/ko.json'

export type Language = 'ko' | 'en'

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    resources: { ko, en },
    fallbackLng: 'ko',
    supportedLngs: ['ko', 'en'],
    interpolation: {
      escapeValue: false,
    },
  })

export default i18n

 

 

src/locales/ 에 en.json, ko.json 파일을 추가해 번역 string 을 넣는다.

 

en.json

{
  "translation": {
    "sign-in": "Sign in",
    "sign-out": "Sign out",
    "my-page": "My page",

 

ko.json

{
  "translation": {
    "sign-in": "로그인",
    "sign-out": "로그아웃",
    "my-page": "마이페이지",

 

코드에서 사용할 때

import { Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import styles from './sign-in.module.scss'

export function SignIn() {
  const { t } = useTranslation()

  return (
    <Link to="/sign-in" className={styles.button}>
      {t('sign-in')}
    </Link>
  )
}

 

잠깐.. 아직 번역 기능을 도입하면 안 되는 상황에 직면했다.면?

내 얘기다.

구현이 아직 안 된건 아니지만, 현재 개발 일정이 빡빡하고 번역까지 추가하기엔 무리라서

완전히 기능이 구현되기 전까지 주석 처리를 해놨다.

 

QA 진행 중, 로컬스토리지에 저장 되어 있는 상태이나 번역 버튼을 없애서 여전히 몇몇 기기에서는 영문으로 표기되는 문제가 발생했다.

기본 한글로 변경해야 한다.

 

import i18n from 'i18next'
// import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import en from '@/locales/en.json'
import ko from '@/locales/ko.json'

export type Language = 'ko' | 'en'

i18n
  .use(initReactI18next)
  // .use(LanguageDetector)
  .init({
    resources: { ko, en },
    lng: 'ko',
    fallbackLng: 'ko',
    // supportedLngs: ['ko', 'en'],
    supportedLngs: ['ko'],
    interpolation: {
      escapeValue: false,
    },
  })

export default i18n

 

브라우저의 언어를 감지하는 LanguageDetector 를 사용하고 있어 문제가 생길 수 있다.

따라서 기본 언어를 한국어로 강제 설정 및, 지원 언어를 한국어로만 제한했다.

 

서버 배포 이후 다시 확인해보아야 한다..

 

참고한 블로그

(감사합니다.)

https://yourhealingcoder.tistory.com/entry/i18n-l10n-%EC%B5%9C%EC%86%8C%ED%95%9C%EB%A7%8C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

i18n, l10n, 최소한만 알아보자.