최근 사내 프로젝트 개발 중 국내 사용자에게만 가격 정보를 가리는 기능을 구현할 일이 있었습니다. 여러 조건들을 고려하며 진행하던 중, 브라우저에서 설정된 언어를 어떻게 감지할 수 있을까?라는 고민이 생겼고, 이 과정에서 Web APIs의 Navigator 객체에 대해 알게 되었습니다.
Navigator 객체에는 language라는 속성이 있는데, 이 값이 사용자가 브라우저에 설정한 언어를 나타냅니다. 그러나 여기서 문제가 하나 더 발생했습니다. 브라우저마다 한국어를 표현하는 방식이 달랐던 것입니다.
* 버전마다 차이가 존재할 수 있습니다.
- 일반적으로 Chrome과 Edge: ko
- 일반적으로 Safari, Firefox, Opera: ko-KR
같은 한국어라도 브라우저에 따라 ko 혹은 ko-KR로 반환되기 때문에 이를 고려한 처리가 필요했습니다.
정확한 동작을 확인하기 위해 주요 브라우저에서 직접 콘솔을 통해 테스트를 진행했습니다.
Chrome
navigator.language: ko
navigator.userLanguage: undefined
Edge
navigator.language: ko
navigator.userLanguage: undefined
Safari
navigator.language: ko-KR
navigator.userLanguage: undefined
FireFox
navigator.language: ko-KR
navigator.userLanguage: undefined
Opera
navigator.language: ko-KR
navigator.userLanguage: undefined
테스트 결과, navigator.language는 정상적으로 동작하는 반면, navigator.userLanguage는 Internet Explorer(IE)를 제외한 최신 브라우저에서는 undefined로 표시되는 것을 확인했습니다.
참고한 블로그 글에 따르면, navigator.userLanguage는 IE에서 유용하게 사용된다고 하여 직접 IE에서 콘솔을 통해 테스트를 시도했으나, 진행할 수 없었습니다.
또한, MDN의 Browser Compatibility 문서를 확인한 결과, IE를 제외한 최신 브라우저에서는 navigator.userLanguage를 더 이상 지원하지 않는다는 사실도 명확히 확인할 수 있었습니다.
결론적으로, 이번 기능 구현에서 브라우저 언어 설정 외에도 여러 조건들이 존재하기 때문에 IE에 대한 예외 처리는 진행하지 않기로 결정했습니다.
'지식 정리 📝' 카테고리의 다른 글
| Tanstack Query와 Optimistic Update로 Autowini 좋아요 기능 구현하기 (2) | 2024.12.22 |
|---|---|
| React Conext 톺아보기 (1) | 2024.11.10 |
| S3와 CloudFront로 정적 사이트 호스팅: React 앱 배포 경험 (1) | 2024.10.08 |
| WiniLogis 블로그의 가독성 문제 해결 React-Quill을 활용한 텍스트 에디터 적용 (0) | 2024.09.25 |
| 자바스크립트의 이벤트 루프(Event Loop)란? (1) | 2024.09.07 |