React.js, Next.js에서 편리하게 다국어 json 파일 관리하기

hyeonQyu·2022년 7월 24일

React next.js 다국어

요즘 회사에서 개발하고 있는 웹사이트는 다국어를 지원해야 합니다ㅠㅠ.. 그래서 프로젝트에 다국어를 적용하고 있는데 여간 귀찮은 일이 아닙니다.

암튼 이 작업을 국제화(i18n)이라고 하는데 React로 개발하면 react-i18next, Next로 개발하면 next-i18next 라이브러리를 일반적으로 사용하는 것 같습니다.

폴더 구조

react-i18next를 사용하든, next-i18next를 사용하든 보통 다국어 json 파일은 이런 식으로 관리하는 것 같아요.

📂locales
   📂ko
       🗒️common.json
   📂en
       🗒️common.json
     ...

locales라는 폴더에 언어별로 하위 폴더를 만들고 그 안에 json 파일을 놓습니다.
그리고 json 파일은 key-번역값으로 맵핑되어있어요.

locales > ko > common.json

{
  "login": "로그인"
  ...
}

locales > en > common.json

{
  "login": "Login"
  ...
}

그리고 나중에 코드에서는 이런식으로 사용합니다.

function LoginButton(props) {
  const { t }  = useTranslation(['common']);
  
  return (
    <button>{t('login')}</button>
  );
}

라이브러리의 자세한 사용 방법은 이 포스트에서 다루려는 주제가 아니기 때문에 언급하지 않을게요.
react 다국어, next 다국어와 같은 키워드로 검색하면 많은 글을 확인할 수 있어요.

key를 한글화

locales > ko > common.json

{
  "login": "로그인",
  "logout": "로그아웃",
  "hello": "안녕하세요",
  ...
}

그런데 json 파일을 작성하다보니 드는 생각이 있었습니다.

계속 이런식으로 key가 많아지다보면 나중에 유지보수가 어려워지지 않을까??

이런 생각이 들었던 이유는 크게 두가지가 있었습니다.

1. 긴 문장

첫번째로 긴 문장에 key를 붙일 때 어려운 부분이 있었습니다.
예를 들어

사느냐 죽느냐 그것이 문제로다

와 같은 문장이 있을 때 key값을 붙이기가 어려웠죠.
문장 그대로 영문 번역하여 key값으로 사용할 것인지, 특정 단어로 표현하여 key값으로 사용할 것인지 정하기 어려웠어요.
영문 그대로 번역하면 key가 길어져서 이런 문장들이 많아졌을 때 헷갈릴 것 같았고,
특정 단어로 표현하면 처음 보는 사람은 무슨 의미인지 모르거나 아니면 스스로도 나중에 헷갈릴수도 있을 것 같았습니다.
어쨌든 둘 다 나중에는 헷갈릴 것 같았다는겁니다!!

2. 문구로 파일 검색

특정 페이지를 수정하게 되었을 때 이 페이지를 찾기 위해 페이지의 파일 이름을 검색하는 경우도 있지만
페이지에 보여지는 문구로 검색하게 되는 경우도 더러 있습니다.

사느냐 죽느냐 그것이 문제로다라는 문구가 있는 페이지를 찾고 싶은데 이 문구가 코드에서
t('To live or die, that is the question')와 같이 적혀있다면
json 파일로 가서 사느냐 죽느냐 그것이 문제로다 이 문구가 어떤 key에 맵핑되었는지 먼저 찾은 후에 그 key로 검색해야 하는 번거로움이 생기는 것입니다.

그럼 key를 한국어 원문으로 사용하자!

스스로 내린 결론은 이것이었습니다. 물론 이것 나름대로 문제가 생길 수도 있겠지만..(예를 들어 같은 한국어 뜻이어도 다른 번역이 필요한 경우) 그럼 그때는 예외적으로 다른 key값을 쓰는 식으로 문제를 해결할 수 있을 것 같았어요.
현재까지는 문제 없네요.

그래서 한국어 json 파일은 아래와 같은 모양이 되었습니다.
locales > ko > common.json

{
  "로그인": "로그인",
  "로그아웃": "로그아웃",
  "안녕하세요": "안녕하세요",
  ...
}

귀찮음 발생

근데 페이지에 문구를 넣을 때마다 항상 이렇게 해야하니까 상당히 귀찮게 느껴졌습니다.
환영합니다라는 문구를 페이지에 넣기 위해서

<div>환영합니다</div>

라고만 작성하면 되었던게 이제는

<div>{t('환영합니다')}</div>

라고 작성한 뒤 locales > ko > common.json에

{
  "로그인": "로그인",
  "로그아웃": "로그아웃",
  "안녕하세요": "안녕하세요",
  "환영합니다": "환영합니다",
  ...
}

"환영합니다": "환영합니다"를 추가해주어야하고 그 다음에는 locales > en > common.json에

{
  "로그인": "Login",
  "로그아웃": "Logout",
  "안녕하세요": "Hello",
  "환영합니다": "",
  ...
}

이런식으로 key값을 추가해주어야했으니까요!!

문구가 추가되면 추가될수록 작업해야 하는 부분이 많아졌고 굉장히 귀찮았을뿐더러 개발 속도도 꽤 느려지는 문제가 생겼습니다.

이런 단순 반복 작업은 어느정도 자동화할 수 있을 것 같은데..?

이 작업에는 패턴이 있었습니다. 한국어 파일에는 한글로 key를 적고 key와 같은 값을 value로 적는다. 그리고 외국어 파일에는 적었던 key를 똑같이 적고 value는 비워둔다.
이 일련의 작업을 자동화할 수 있다면 작업 속도가 훨씬 빨라질 것이라는 생각이 들었어요.
그래서 직접 개발하기로 했죠!

요구 사항

개발을 시작하기 전에 어떤 기능이 있어야 하는지 먼저 정리해보았습니다.

한글로 문구를 입력하면 한국어 파일에 입력한 문구가 자동으로 key와 value로 작성된다.
지원하는 언어를 선택해서 선택한 언어만큼 파일이 생성된다.
- 예를 들어 한국어, 영어, 일본어 이렇게 3개국어를 지원한다면
  📂locales
     📂ko
         🗒️common.json
     📂en
         🗒️common.json
     📂ja
         🗒️common.json
  이런 식으로 파일이 생성되어야 한다.
파일이 생성되는 📂locales 폴더 위치를 지정할 수 있어야 한다. 그리고 그 위치는 프로젝트 루트 > public > locales 를 default 값으로 세팅되면 좋을 것 같다.
편집할 json 파일을 불러올 수 있다.
문구를 잘못 추가한 경우(오타 등) 삭제할 수 있어야 한다.

요구사항을 살펴보면 사용자가 입력값으로 줘야 하는 항목들이 있네요. 편집할 json 파일, 지원하는 언어 목록 등..
CLI(Command Line Interface)로 이런 항목을 인자로 전달하도록 개발하는 것이 가장 편리하지만 저는 프론트엔드 개발자이므로 화면을 만들기로 했습니다.