자바스크립트: 다국어 지원 (국제화 Internationalization) 1

국제화(Internationalization)는 홈페이지의 내용을 다국어로 지원하는 것을 뜻합니다.

백엔드 측에서 하는 방법이 있고 프론트엔드 측에서 하는 방법이 있는데 백엔드에 대한 국제화 작업은 스프링 부트, Thymeleaf 기준으로 한 다음 글을 참조해주세요. Spring Boot: 국제화(Internationalization)

제이쿼리에서도 국제화 지원을 위한 기능이 있고 이러한 라이브러리(i18n)도 있는데 처음에는 라이브러리 없이 진행해보도록 하겠습니다.

먼저 자바스크립트에서 브라우저의 언어를 알아내는 방법은 다음과 같습니다.

function getLanguage() {
  return navigator.language || navigator.userLanguage;
}

출처 바로가기

최신 브라우저라면 ko-KR, en-US 등으로 값이 리턴될 것입니다. 이러한 언어 코드 테이블은 이 사이트에 가면 표로 나와 있습니다.

 

예제: 라이브러리 없는 간단한 다국어 적용 페이지

https://gist.github.com/ayaysir/55cc8892609b37e3a57e9fb166b7b2db