현재 브라우저에 설정된 언어값 확인 방법(iOS 또는 MacOS에서만 다르게 나올 때)

HyunJoo·2021년 6월 3일
1

세줄 요약
1. 사용자의 브라우저 언어를 알 수 있다. navigator.language
2. 이 API는 iOS 또는 MacOS에서 다른 값이 내려온다. ko-KR / ko-kr
3. 대문자 소문자 구분을 || 로 계속 예외처리하지 말고 toLowerCase()를 사용하라.

URL의 Query값으로 language를 내려주는 경우도 있지만
직접 사용자의 브라우저의 언어를 확인할 수 있다.

현재 브라우저에 설정된 언어값 확인 방법

이 글을 통해서 사용언어를 확인할 수 있었다.

let language = navigator.language || navigator.userLanguage; // ko-KR

내 코드에는
이미 language 값을 'ko' 또는 'en'으로만 대응하도록 준비해놨다.
그래서 아래와 같이 변경을 하였다.

  if ( !language ) {
    language = navigator.language || navigator.userLanguage;
    language = (language === 'ko-kr') ? 'ko' : 'en';
  }

그런데 말입니다.

안드로이드 크롬에서 들어갔을 때는 문제가 없었다.
아이폰 크롬에서 들어갔을 때 영어로 나오는 이슈가 발생하였다.

확인 결과
mdn 문서에서 확인할 수 있었다.

NavigatorLanguage.language ( MDN문서)

Note that in Safari on macOS and iOS prior to 10.2, the country code returned is lowercase: "en-us", "fr-fr" etc.

즉, ko-KR이 아닌 Safari on macOS and iOS에서는 ko-kr로 지역이 소문자로 나온다는 것이다.

그러니 당연히 en으로 넘어가는거지 그래서 이렇게 바꾸었다

language = (language === 'ko-kr' || 'ko-KR') ? 'ko' : 'en';

작동은 잘 되었으나 아래와 같이 사용하는 것을 권장한다.

language = (language.toLowerCase() === 'ko-kr') ? 'ko' : 'en';

toLowerCase()는 전체를 소문자로 변경한다.
이유는 혹시나 ko-KR이 아닌 KO-kr 같이 대문자가 섞여서 들어올 수 있으므로 전체를 대응하기 위함이다.

profile
Front-End Engineer

0개의 댓글