20241007 TIL: 다국어 처리 진행하기 [진행중]

✅ 오늘 배운 것

어제의 포스트를 통해 다국어 지원이 잘 동작하는 것을 확인했다. 이제 남은 것은 손수 앱에 있는 모든 한국어/영어를 ko.json과 en.json 파일에 넣어 주는 것이다. 복잡하진 않지만 할 일이 많은 반복 작업만이 남았다. 

 

다행히 앱 페이지가 많지는 않으니 일단 해보자. 아래와 같이 ko.json과 en.json 파일을 만들어주고 어제와 같은 방법을 적용하니 다국어 지원은 잘 되었다. 

// ko.json
{
  "views": {
    "index": {
      "signIn": "구글 로그인"
    },
    "_layout": {
      "addCategory": "Add Category",
      "manageCategory": "Manage Category",
      "editCategory": "Edit Category",
      "settings": "Settings",
      "contact": "Contact"
    },
    "tabs/_layout": {
      "today": "투데이",
      "inbox": "인박스"
    },
    "settingsView": {
      "account": "계정",
      "language": "언어",
      "contact": "문의"
    }
  },
  "components": {
    "headerMenu": {
      "manageCategory": "카테고리 관리",
      "settings": "설정"
    }
  }
}

// en.json
{
  "views": {
    "index": {
      "signIn": "Sign in with Google"
    },
    "_layout": {
      "addCategory": "Add Category",
      "manageCategory": "Manage Category",
      "editCategory": "Edit Category",
      "settings": "Settings",
      "contact": "Contact"
    },
    "tabs/_layout": {
      "today": "Today",
      "inbox": "Inbox"
    },
    "settingsView": {
      "account": "Account",
      "language": "Language",
      "contact": "Contact"
    }
  },
  "components": {
    "headerMenu": {
      "manageCategory": "Manage Category",
      "settings": "Settings"
    }
  }
}

 

그런데 문제가 하나 있었다. 바로 달력(WeeklyCalendar)에 나타나는 기본 한글은 바뀌지 않는다는 점이었다. 예를 들면 지금은 '2024년 10월'이라고 나와 있는데, 영어 버전에서는 'October 2024'로 나와야 맞겠다. 이 부분은 아래와 같이 함수를 작성해서 구현하였다. 

const convertMonthAndYear = date => {
  if (i18n.language === 'ko') {
    return date.format('yyyy년 MM월');
  } else if (i18n.language === 'en') {
    const month = date.toString().split(' ')[1];
    const year = date.toString().split(' ')[3];
    return `${month} ${year}`;
  }
};

 

 

잘 나온다. 그런데 요일은 그대로라서 요일도 바꿔주자. 요일은 현재 '월 화 수 목 금 토 일'로 나와 있는데, 이를 'Mon Tue Wed Thu Fri Sat Sun'으로 바꿔 주어야 하겠다. 

 

처음에는 datetime format이니까 당연히 영어 요일로 바꾸는 뭔가가 있을 것이라고 생각했다. 그러나 글의 방법을 참고했는데도 잘 되지 않아서 찾아보는 데 시간이 걸릴 것 같았다. 그래서 아래와 같이 구현했다. 

const convertDictionary = {
  월: 'Mon',
  화: 'Tue',
  수: 'Wed',
  목: 'Thu',
  금: 'Fri',
  토: 'Sat',
  일: 'Sun',
};

const convertWeekDates = date => {
  if (i18n.language === 'ko') {
    return date.format('ddd');
  } else if (i18n.language === 'en') {
    return convertDictionary[date.format('ddd')];
  }
};

 

이제 잘 나온다.

 

이제 언어를 바꾸는 기능도 추가해주자. 그러려면 화면도 바꿔 주어야겠다. 현재는 설정 화면에서 '언어' 버튼을 누르면 아무 작용도 하지 않는데, 화면을 하나 추가하면 되겠다. 우선 피그마에 관련해서 만들어 놓은 화면이 있는지를 확인해봤다. 

 

만들어 놓은 화면이 없다. 하지만 UI가 크게 중요한 화면은 아닌 만큼, 내가 사용하고 있는 다른 앱의 화면을 참고해서 만들어 보면 되겠다.