VSCode에 국제화 extension i18n-ally 적용하기

선다혜·2024년 1월 8일

프로젝트에 프론트엔드 국제화를 적용시켜야 했는데, 생산성을 위해 extension을 찾다가 지금 국제화에 이용중인 i18next, next-i18next에 호환되는 extension을 사용하기로 했다.
그런데 계속 구글에 검색을 해보아도... i18n-ally extension 설정과 관련된 포스트가 많이 없었다. 그래서 공식 문서를 참고해서 환경 설정을 구성해보았다. 🙃

VS Code extension

i18n-ally

사용 패키지

"i18next": "^23.4.1",
"next-i18next": "^14.0.0",
"nookies": "^2.5.2",

폴더 구조

public/locales에 각 언어별로 json으로 넣어뒀다.

1. 환경설정

.vscode/settings.json에 i18n-ally에 대한 설정을 해둔다.
locales파일의 위치, 기본 설정 언어, 국제화에 쓰는 framework, vscode에서 보여질 디폴트 언어, namespace(언어별로 갖고 있는 json) 설정 유무 등을 설정해줬다.
framework 중에 next-i18next가 없어서 react-i18next로 했는데, 잘 작동했다.

{
  "i18n-ally.localesPaths": ["public/locales"],
  "i18n-ally.sourceLanguage": "ko",
  "i18n-ally.enabledFrameworks": ["react-i18next"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.displayLanguage": "ko",
  "i18n-ally.namespace": true,
  "i18n-ally.pathMatcher": "{locale}/{namespaces}.json"
}

2. next-i18next.config.js

프로젝트에서 next-i18next로 국제화를 하기 때문에 config 파일을 만들어줬다.

module.exports = {
  i18n: {
    locales: ['en', 'ko', 'ar'],
    defaultLocale: 'ko',
    fallbackLng: 'ko',
    ns: ['common', 'defaultBtn', 'login', 'program'],
  },
}

3. getServerSideProps 함수 생성

일단 지금은 쿠키에서 사용자의 언어를 알 수 있다. 그래서 쿠키에서 languageClcd라는 키의 값을 추출하고 그것을 /pages/prog.tsx 에서 getServerSideProps() 함수로 Next.js가 서버 사이드에서 해당하는 언어 폴더의 namespace를 먼저 불러올 수 있게 했다.
해당 페이지의 하위 컴포넌트들에 쓰이는 i18n key-value들은 모두 common.json이나 program.json 안에 존재한다!

export const getServerSideProps: GetServerSideProps = async (context) => {
  const cookies = nookies.get(context)
  const { languageClcd } = cookies
  const locale = languageClcd

  const i18nProps = await serverSideTranslations(locale, [
    'common',
    'program',
  ])

  return {
    props: {
      ...i18nProps,
    },
  }
}

4. useTranslation으로 value 값 불러오기

3번에서 Next가 서버 사이드로 translation 작업을 마쳤으니, next-i18next에서 제공하는 useTranslation을 사용해서 이제 바로 value를 불러올 수 있다.

그런데 3번에서처럼 namespace를 두 개로 했을 때는 어떤 namespace의 key의 value 값을 원하는 건지 :를 사용해서 명시해야한다!

import { useTranslation } from 'next-i18next'

function CoachingLayout(){
	const { t } = useTranslation()
	return (
		{t('program:greeting')}
    {t('program:use_no')}
    {t('common:commonTest')}
	)
}