언어별 페이지별 모듈화

[luckylooky2]

• 페이지 별로 JSON 파일로 나누어 모듈화

• key seperator를 true가 아닌 "."으로 변경하여 JSON 파일에서 중첩된 Object 객체를 사용할 수 있음

• useTranslation("translation", { keyPrefix : "profile" }) 네임스페이스와 최상위 키로 해당 모듈만 가져와서 사용하는 방식으로 변경

• 언어 코드 kr -> ko 변경

• 기존에는 하나의 파일에 모든 언어를 저장하는 방식

├── locale
│     └── index.js

// src/locale/index.js
export const en = {
  translation: {
    greeting1: "Have fun playing games",
    greeting2: "with learning English!",
    profile: "Profile",
    singleCall: "1:1 call",
    groupCall: "Group call",
  }

export const ko = {
  translation: {
    greeting1: "다양한 컨텐츠와 함께",
    greeting2: "영어를 즐기세요!",
    profile: "프로필",
    singleCall: "1:1 통화",
    groupCall: "그룹 통화",
  },

• 변경 이후에는 언어별, 페이지별 모듈화 진행

├── locale
│   ├── en
│   │   ├── Login.en.json
│   │   ├── Main.en.json
│   │   └── Profile.en.json
│   ├── index.js
│   └── ko
│       ├── Login.ko.json
│       ├── Main.ko.json
│       └── Profile.ko.json

import MainKo from "./ko/Main.ko.json";
import LoginKo from "./ko/Login.ko.json";
import ProfileKo from "./ko/Profile.ko.json";

import MainEn from "./en/Main.en.json";
import LoginEn from "./en/Login.en.json";
import ProfileEN from "./en/Profile.en.json";

export const translationKo = {
  login: LoginKo,
  main: MainKo,
  profile: ProfileKo,
};

export const translationEn = {
  login: LoginEn,
  main: MainEn,
  profile: ProfileEN,
};