[33] 다국어 처리 locale을 구현한 방법이 궁금해요!

📎 질문

다국어 처리 locale을 구현한 방법이 궁금해요!

✏ 구술 답변 키워드

제가 구현한 방식
- 타입스크립트로 언어정보를 담은 로케일파일을 만들어 객체로 관리했다.
- 언어정보는 전역상태관리 라이브러리를 사용해 저장했다.
그외의 다른 방법
- next-i18next 라이브러리 사용
- next의 국제화 라우팅 사용

✏ 서술 답변

저는 라이브러리 없이 zustand를 사용해 설정된 언어값을 전역에 저장하고, 디렉토리별로 locale.ts 파일을 생성해 구현했습니다.
라이브러리 사용하지 않은 이유는 기한이 얼마 남지 않아 라이브러리를 학습할 시간이 부족하다고 생각했음.
json이 아닌 ts로 구현한 이유는 타입스크립트의 도움(타입안정성, 자동완성 등)을 받고 싶어서.
이제와 생각해보니 규모가 큰 프로젝트라면 이러한 방식도 나쁘지 않을지도 모르겠다.
구현 설명
1. 디렉토리별 locale.ts파일 확인

locale.ts파일 열어보기


// 리스트 생성 - 아이템에 관련된 Locale
export const itemLocale = {
ko: {
addItem: '아이템 추가',
deleteItem: '아이템 삭제',
itemCreateMessage1: '최소 3개, 최대 10개까지 아이템을 추가할 수 있어요.',
itemCreateMessage2: '아이템의 순서대로 순위가 정해져요.',
},
en: {
addItem: 'Add Item',
deleteItem: 'Delete item',
itemCreateMessage1: 'You can add a minimum of 3 and a maximum of 10 items.',
itemCreateMessage2: 'The ranking is determined in the order of the items.',
},
};

// 리스트 생성 - 리스트에 관련 export const listLocale = { ko: { createList: '리스트 생성', editList: '리스트 수정', publicMessage: '모든 사람이 이 리스트를 볼 수 있어요.', privateMessage: '이 리스트는 나만 볼 수 있어요.', }, en: { createList: 'Create list', editList: 'Edit list', publicMessage: 'Everyone can see this list.', privateMessage: 'Only I can see this list.', }, };

3. 사용하기
```tsx
import { itemLocale } from '@/app/list/create/locale'; // 위에서 만든 언어정보
import { useLanguage } from '@/store/useLanguage'; // 전역상태

export default function CreateItem(){
  const { language } = useLanguage(); // 1. 전역상태 불러와서
  return (
    <div>
      <Header title={itemLocale[language].createList}/> // 2. 전역상태를 객체의 키값으로 전달해 값을 불러온다.
      <div>
        <h3>{itemLocale[language].addItem}</h3>
        <p>
          {itemLocale[language].itemCreateMessage1} <br />
          {itemLocale[language].itemCreateMessage2}
        </p>
      </div>
    </div>
  );
}

구현시 발생한 문제점

zustand를 사용해 만든 useLanguage store 훅에서 값을 빼내와야했기때문에 컴포넌트나 훅이 아닌 일반 ts파일에서는 사용이 불가능했습니다.
해당 ts파일을 불러오고있는 컴포넌트에서 넘겨주면 되지만 로직이 더럽고 복잡해보이기에 차라리 ts파일을 훅이나 컴포넌트로 바꾸어야겠다고 생각했으나 아직 바꾸지 못했습니다. 👍
- 적용되지 못한 곳 예시 코드
```
import { toPng } from 'html-to-image';
import toasting from '@/lib/utils/toasting';
```

async function saveImageFromHtml() { try { toPng(saveElement) .then((dataUrl) => { const link = document.createElement('a'); link.download = filename + '.png'; link.href = dataUrl; link.click(); }) .catch((err) => { console.log('error', err); }); toasting({ type: 'default', txt: '이미지를 저장했습니다.' }); } catch (error) { toasting({ type: 'default', txt: '이미지 저장을 실패했습니다.' }); } }

export default saveImageFromHtml;



### 앞으로 다국어기능을 또 만들어야하게된다면?
1. 많이 사용되는  next-i18next 라이브러리
- 이유
  - 전역상태관리 라이브러리 없이도 전역적으로 locale관련 변수를 저장하는 함수도 있다고 함.(좋아보인다.)
  - 사용방법 꽤 간단해보인다. (설정도 간단해보인다)
2. Next에서 제공하는 국제화 라우팅을 통한 방법
- 이유
  - 설정이 다소 어려워보이긴하지만 url에 해당 정보가 항상 붙어있으니 따로 저장할 필요도 없으니 가벼워보인다.

QueenCards / ProjectAnalysis