Javascript timezone, language 구하기(타임존, 언어, 국가)

이번에 살펴볼 내용은 타임존, 언어 구하기이다.

다국어 사이트 작업 또는 이 사람이 어떤 언어를 사용하고 있는지에 대한 데이터를 얻고자 할 때 필요한 내용이다.

타임존, 언어, 국가 코등 등 검색을 할 텐데 여기서는 서버, 클라이언트에서 구하는 방법을 몇 개 살펴보겠다.

 

서버에서 구하기

Accept-Language

모던 브라우저에서 언어를 설정한다면, HTTP 요청할때 header에 Accept-Language을 포함시켜 보낸다.

보통 Accept-Language: en-Ca, ar-Eg:q=0.5 이런 식으로 보낸다.

여기서 q 값은 가중치이다. 명시적으로 적지 않으면 기본값은 1.0 이다.

위 예를 살펴보면 사용자가 en-CA(Canadian English) 를 1.0으로 선호하고 그다음 ar-EG(Egyptian Arabic) 를 0.5정도를 선호한다고 생각하면 된다.

자세한 내용은 마지막 참고자료에 링크를 확인하면 된다.

Geolocation by IP Address

가끔 Accept-Language가 요청 헤더에 없는 경우가 있다. 이때는 IP Address를 사용할 수 있다.

지리적으로 IP를 통해 사용자 로케일을 결정하는 건 신중해야 한다.

예를 들면, 캐나다에서 오는 사용자라면 영어 또는 프랑스어로 보통 가정할 것이다. 하지만, 사용자가 아시아인? 중동인일 경우가 존재하기 때문이다.

이런 IP 구하는 건 업체를 연동해 구하는 것 같다.

 

클라이언트에서 구하기

이제부터 클라이언트에서 사용자 로케일을 확인하는 법을 알아보자.

The navigator.languages Object

대부분의 모던 브라우저들은 navigator.language 객체를 제공한다.

사용자들이 브라우저에 설정한 언어를 가져올 수 있다.

크롬 브라우저 언어 설정

크롬 콘솔 창에 navigator.languages 를 실행하면 위에서 설정한 로케일 언어들이 배열값으로 보여준다.

크롬 브라우저 네비게이터 랭귀지

위에 navigator.languages 를 활용해 사용자 언어를 구하는 함수를 만들어보자.

navigator.languages를 제공하는 브라우저면 navigator.languages 사용하고 만약 제공하지 않는 브라우저면 navigator.language를 사용한다. navigator.language는 운영 체제에 설정된 언어일 가능성이 있는 UI언어를 제공한다.

 

function getBrowserLocales(options = {}) {
  const defaultOptions = {
    languageCodeOnly: false,
  };

  const opt = {
    ...defaultOptions,
    ...options,
  };

  const browserLocales =
    navigator.languages === undefined
      ? [navigator.language]
      : navigator.languages;

  if (!browserLocales) {
    return undefined;
  }

  return browserLocales.map(locale => {
    const trimmedLocale = locale.trim();

    return opt.languageCodeOnly
      ? trimmedLocale.split(/-|_/)[0]
      : trimmedLocale;
  });
}

 

getBrowserLocales() 함수 실행

Intl.DateTimeFormat

이제 추가로 타임존에 대한 설명도 해보자

Intl.DateTimeFormat 를 사용하면 타임존과 로케일을 구할 수 있다.

역시 지원하는 브라우저에서만 작동되니 지원을 꼭 확인해보자.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

Intl.DateTimeFormat - JavaScript | MDN

Intl.DateTimeFormat().resolvedOptions().timeZone

이 코드를 입력하면 타임존을 확인이 가능하다

Intl.DateTimeFormat().resolvedOptions().timeZone

Chrome, node 에서 저 코드를 실행하면 운영체제에서 설정된 타임존을 반환한다.

Chorme의 경우는 별도의 타임존을 설정하는 게 없으니 자동으로 운영체제에서 가져오는 것 같다.

 

Intl.DateTimeFormat().resolvedOptions().locale

이 코드 역시 로케일을 반환하는데 운영체제 기준으로 반환한다.

Intl.DateTimeFormat().resolvedOptions().locale

결론

최근에 타임존, 로케일에 대한 자료 조사가 필요할 때는 i18n 다국어 때문이었다.

서버 기준, 클라이언트 기준으로 어떻게 해야 될지는 회의를 통해 정의를 해야 한다.

포스팅대로 큰 기준이 없고 문제 될 게 없으면 크롬 또는 운영체제의 언어, 타임존을 가져와서 작업하는 게 사용자를 위한 방법인 것 같다.

 

참조자료

https://phrase.com/blog/posts/detecting-a-users-locale/

https://stackoverflow.com/questions/57666095/browser-default-locale-intl-datetimeformat-vs-navigator-language