i18n이란?

"internationalization(국제화)"의 약자로, 첫 글자 i와 마지막 글자 n 사이에 18개의 글자가 있다는 의미에서 만들어진 약어

vue-i18n

https://kazupon.github.io/vue-i18n/

해야할 일

1. 기본 세팅 (i18n패키지 설치, json파일 생성)

https://imkh.dev/vue-i18n

2. google spreadsheet와 연동

json파일로 관리하면 오류확률도 높아지고 관리가 힘들기 때문에
google spreadsheet를 생성하고, 이를 json파일로 변환하는 작업이 필요함

Google Cloud에서

• https://console.cloud.google.com/apis/credentials로 이동하여 프로젝트 생성
• Google Cloud > API 및 서비스 > 사용자 인증 정보 > 사용자 인증 정보 만들기 > 서비스 계정에서 서비스 계정 생성
• Google Cloud > IAM 및 관리자 > 서비스 계정 > 서비스 계정 수정 > 키 > 키추가 > 새 키 만들기 > JSON 다운로드
• Google Cloud > API 및 서비스 > 라이브러리 > Google sheet API 활성화

Google Sheet에서
(참고) https://bom2zzang.tistory.com/17

• 구글 스프레드 시트 생성
• 다운받은 JSON에서 client_email 복사
• 공유 설정에서 client_email 권한 부여 (보기 또는 편집)
• doc_id 얻기 (url의 d/뒤에 있는 값)
• sheet_id 얻기 (url의 gid뒤에 있는 값)

translationmodules

(참고) https://github.com/bom2zzang/vue-i18n-test

package.json에서 download.ts를 실행하도록 설정

"dev": "... pnpm i18n:download && vite",
"i18n:download": "node src/translationmodules/download.ts",

3. 언어 설정하기

1) 브라우저 언어 가져오기

const userLanguage = navigator.language || navigator.userLanguage; // ex: "en-US", "ko-KR"

2) 사용자가 선택한 언어 적용하기

const savedLanguage = localStorage.getItem('language');
if (savedLanguage) {
  i18n.global.locale = savedLanguage;
} else {
  const userLanguage = navigator.language.split('-')[0];
  i18n.global.locale = userLanguage;
  localStorage.setItem('language', userLanguage);
}