2.URL에 locale Query 추가

Soly; 독특하게·2023년 1월 1일
0

i18n

목록 보기
2/2
post-thumbnail

[논의 결과]

  • 앱에서 웹뷰로 국제언어를 쿼리로 보내주기로 함

[웹뷰 개발]

  • 쿼리에서 언어설정을 받아와서 해당 언어로 보여준다

Q? 앱에서 웹뷰에서 정하지 않은 언어팩을 보내면 어떻게 할 것인가?

=> 논의결과 알림을 뱉어주자

문제발생

Typescript 에서는 KO,EN을 알 수 있다

But, JS에서는 비교할 수 없다

해결

I18next에서 resources라는 변수명으로 언어를 설정해 주고 있다.

따라서 다음과 같이 resources를 정의해주고 여기서의 키값을 가져와서 타입으로 지정한 후, url에서 받은 locale과 비교하는 방식으로 진행했다

1. resources 정의

-> key 값 : 'ko-KR', 'en-US'

export const resources = {
  'ko-KR': {
    errors: //에러 코드 정의,
    word: {
      auth: ,//페이지별 단어정의
      common: ,//공통으로 사용하는 단어 정의
    },
    phrase: {
      auth: ,//페이지별 두 단어 이상의 문장 정의
    },
},

'en-US': {
    errors: //에러코드 정의
    word: {
      auth: ,//
      common: ,//
    },
    phrase: {
      auth: ,//
    },
  },
};

2. type 지정

locale?: keyof typeof resources;

=> optional change 한 이유
optional change의 경우 개체가 undefined 혹은 null 일 경우 오류를 발생하는 대신 undefined를 반환합니다.
이경우, 앱에서 query로 locale 없이 보낼 경우 오류를 반환하는 대신 임의로 한국어로 설정하기 위함 입니다.

3.

query의 locale 이 type의 locale에 존재하는지 확인 합니다.
이때 상용환경에서는 오류 화면을 보이지 않도록 했습니다.

if (
  locale &&
  !resources[locale] &&
  !process.env.상용URL) {
  alert(
    'locale에 언어팩이 정의되지 않았습니다. 기본 설정 [한국어]로 변경됩니다.',
  );
}
profile
협업을 즐겨하는 목표지향적인, Front-End 개발자입니다.

0개의 댓글