IE로 접속 시 알림창(alert) 띄우기

https://www.microsoft.com/ko-kr/download/internet-explorer.aspx

IE에 대해 좋은 감정을 가진 개발자가 몇이나 될까? 나도 조금이나마 직접 경험을 해보니 왜 IE 사라져라 IE를 골칫덩이로 생각하는지 알게되었다. 다행히 나는 IE가 사라지고 있는 시대에 살고 있다.

 

선배 개발자분들 덕분에 많은 부분이 추상화 되어 있어(바벨) 고생을 덜 했지만 라이브러리 사용에 제약이 있기도 했고, CSS 최신 구문을 사용하다가(e.g. , min(), padding-inline, clip-path 등) IE가 지원을 안해서 예전 구문으로 전부 바꾼 적도 있었다.

 

그런데 이제 MS가 공식적으로 2022년 6월 15일부터 IE11 지원을 종료함에 따라, 회사에서도 이걸 인지하여 알림창을 통해 다른 브라우저를 사용하는 것으로 권장하기로 했다.

IE로 접속 했는지 확인하기 - User Agent

사용자가 해당 사이트를 어떤 브라우저로 접속 했는지는 userAgent 속성을 통해 확인 할 수 있다. 다음 코드를 개발자 도구를 실행해서 콘솔에 입력해보자.

window.navigator.userAgent

크롬의 경우엔 다음과 같이 뜬다.

Chrome userAgent

브라우저별 차이점 찾기

그렇다면 브라우저별 차이점을 찾아보자. 해당 블로그 글에 따르면, IE7부터 IE11까지 모두 대응을 하려면 'MSIE'와 'Trident' 둘 모두를 사용 해야한다고 한다. 회사 내에 윈도우 노트북이 있어서 IE11 버전으로 직접 확인을 해보니 'Trident'는 있지만 'MSIE'가 보이지 않았다. 그전 버전으로도 확인을 해보고 싶었지만 구글링을 통해 IE 버전별로 확인 해볼 수 있는 사이트를 발견했고, 여기에서 확인하는 걸로 만족해야 했다.

사용하시는 브라우저는 지원하지 않는 브라우저입니다

위의 정보를 바탕으로 사용자의 브라우저를 확인하고, IE일 경우 alert 창을 띄워보자.

// 📂 isIE.js

export default function isIE() {
  // IE11
  const trident = window.navigator.userAgent.search('Trident');
  // IE11 이전
  const msie = window.navigator.userAgent.search('MSIE');

  if (trident !== -1 || msie !== -1) {
    alert(
      '사용하시는 브라우저는 지원하지 않는 브라우저입니다.  \n크롬, 파이어폭스, 엣지 브라우저를 권장드립니다.'
    );
    window.history.back();
  }
}

isIE() 함수는 사용자의 브라우저가 IE인지를 체크한 후, 만약 IE일 경우 alert 창을 띄워 다른 브라우저를 사용하기를 권장한다. 그 후 이전 페이지로 이동을 하게된다.

---

https://www.microsoft.com/ko-kr/edge/business/ie-mode

이제 정말 IE가 역사속으로 사라지고 있는 듯하다. 어느 정도 부담은 덜었지만 요즘은 사파리가 말썽이다..사파리가 IE 취급을 받을까?