[React] IE 유저들에게 배너 띄우기(제발 크롬써주세요)

---

오래 전 부터 IE를 쓰지 않아서 잘 몰랐는데

내가 개발중인 리액트 앱을 IE로 열었더니 백지상태로 뜨는 것을 보고 좀 놀랐다.

리액트 앱 나오게 하는 방법은 다음 게시글에서...

 

오늘 구현하려고 하는 건 이거다.

 

스택오버플로우

네이버

트위터, 인스타그램

이 외에 수 많은 사이트에서 IE 사용을 제지하고 있고, 

실제로 기능이 제대로 구현이 되지 않는 경우가 많다.

 

2020년 3월 시장 조사기관 스탯카운터에 따르면, 

대한민국의 IE 점유율은 13%로 대한민국 인터넷 이용자 10명 중 1명은 인터넷 익스플로러를 사용하는 수치이다.

 

대한민국의 IE 점유율이 이다지도 높은 이유는,

공공기관의 activeX가 크롬 등 다른 브라우저에서는 정상적인 역할을 하지 못하기 때문이다.

IE 사용률이 높은 대한민국의 대표적인 포털사이트 네이버도 IE를 버린다는건 점점 대한민국도 IE가 역사속으로 사라질 것 으로 보이지만,

10%는 절대로 무시 못할 추이이다.

 

물론 저렇게 '우리 웹사이트는 IE 지원 안하니까 알아서 크롬으로 갈아타세요' 형식의 배너는

개발자로서 이용자에게 어느정도 무책임함을 보여주는 행위이기는 하다.

바벨과 웹팩을 이용해 다양한 웹에서 일관되게 구현하는 방법이 최선이지만,

위에 보여준 것 과 같은 대형 웹은 그 속내를 모르니 저 방법이 최선일지도 모르겠다.

 

그렇기에 나같이 작은 웹을 만드는 사람은 재미로

저 웹들은 유저가 어떤 브라우저를 이용하는지 어떻게 알았는지 궁금해 직접 구현해보고자 한다.

---

본인이 직접 구현한 배너. 다른 브라우저에서는 뜨지 않는다!

 

어떤 브라우저를 이용하는지는 user-agent를 통해서 알 수 있다.

user-agent는 아래의 경로에서 확인할 수 있다.

크롬 devtools -> network -> 아무파일 클릭 -> request headers항목

 

 

이를 콘솔에 출력해보자.

user-agent 속성은 navigator에서 찾을 수 있다.

 

크롬에서 확인

 

IE에서 확인(마우스오른쪽 -> 요소검사)

이제 이 userAgent 요소에 들어간 단어를 분별하면 된다.

 

const [isIe, setIsIe] = useState(false);
const isIE = () => {
        if (
            navigator.userAgent.indexOf("MSIE") != -1 ||
            !!document.documentMode == true
        ) {
            setIsIe(true)
        }
    };

return (
        <div className="App">
            {isIe ? <Dropbanner /> : ''}
        </ div>
       )

 

Dropbanner라는 컴포넌트를 만들어 IE임을 일게 되면 해당 컴포넌트를 삽입했다.

 

이 코드로 edge, firefox, chrome, IE 에서 테스트 해 보았는데 원했던 대로 IE에서만 배너가 나타났다.

그런데 의문인건 IE의 userAgent에 MSIE가 없다는것....

 

 

알고보니 IE11의 user-agent 문장이 바뀌었다는 건데 어떻게 정상적으로 작동되는지는 잘 모르겠다.

IE11과 9와 이전 버전을 분류하기 위해서는 아래와 같이 사용하라고 한다.

 

---

참고:

How to detect Safari, Chrome, IE, Firefox and Opera browser?

 

User-agent string changes (Windows)