세줄 요약
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 같이 대문자가 섞여서 들어올 수 있으므로 전체를 대응하기 위함이다.