브라우저의 설정 언어값 확인하기

최근 방송 투표와 관련된 사이트를 제작하였는데 그중 다국어를 사용하여 클라이언트의 브라우저 언어 설정값에 따라 각 이미지와 텍스트가 해당 언어에 맞게 변경되어야 하는 설정을 해야하는 작업을 함께 진행하였다.

처음엔 굉장히 복잡할 것 같았지만 다행히 JS의 내장객체를 사용하여 쉽게 처리할 수 있는 방법을 찾아내었다.👍👍👍

현재 브라우저의 언어 확인하는법

모질라 공식문서 참고

navigator.language   //"en-US"
navigator.languages  //["en-US", "zh-CN", "ja-JP"]

let language = navigator.language || navigator.userLanguage;
console.log(language) // ko-KR

navigator.language 를 사용하면 위와 같이 현재 클라이언트의 브라우저 언어값을 확인 할 수가 있다.

브라우저 언어에 따른 다국어 설정

나의 경우에는 vue를 사용하였기 때문에 해당 로직을 사용하였다.

      created() {
        this.init();
      },

      methods: {
        init() {
          //페이지언어 설정
          const userLang = (navigator.language || navigator.userLanguage || 'en').toUpperCase();  // 현재 브라우저에 설정된 언어값 확인 후 대문자로 변환
          if (userLang.indexOf('KO') > -1 || userLang.indexOf('KR') > -1) {  // 브라우저 언어가 한국어(KO-KR) 문자열에 'KO' 또는 'KR'이 포함된 경우
            this.language = 'ko';
          } else if (userLang.indexOf('JA') > -1 || userLang.indexOf('JP') > -1) { // 브라우저 언어가 일본어(JA-JP) 문자열에 'JA' 또는 'JP'가 포함된 경우
            this.language = 'jp';
          } else {
            this.language = 'en'  // 그 외의 모든 언어는 영어로 처리
          }
        },

      },

created()에서 브라우저의 언어를 비교하여 페이지에 접속할경우 해당 언어에 맞는 데이터를 보여주어 해당 언어에 맞는 다국어 처리를 해줄 수 있었다. 비교적 간단..🧐