[Vue.js] Vue2 IE 지원하기 (1)

IE 지원 계기 및 지원 

 

현업에서 개발 중인 프로젝트가 IE 대응이 필요해져 현재 프로젝트를 IE에 호환할 수 있는 방법에 대해 조사하게 되었다.

IE 9까지만 지원한 궁극적인 이유는, Vue가 IE8 이하를 지원하지 않기 때문이다.

Vue does not support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all ECMAScript 5 compliant browsers.
Vue 공식 문서 호환성

팀 내부적으로 이미 프로젝트가 거의 완성된 상태에서, 거의 사용되지 않는 IE8 이하를 위해 새로운 프레임워크를 사용하여 마이그레이션 하기에는 오버 스택이라 판단되었다.

---

기술 스택

React의 CRA과 유사한 Vue CLI로 설치한 Vue2를 사용하였다.
따라서 Webpack이나 babel 등 기본적인 설정이 되어있고, 기본적인 웹페이지 틀이 잡혀있는 상태이다.

다른 프레임워크나 라이브러리의 영향을 받지 않기 위해(기본적인 문제부터 해결하기 위해) CLI로 새로운 Vue를 시작하였다.
(Vue 시작 방법 참고 -> 2023.05.22 - [Study] - [Vue.js] Vue 시작하기 (CDN vs NPM vs CLI))

---

Edge에서 IE 열기

https://news.sbs.co.kr/news/endPage.do?news_id=N1006792700

IE 장례식이 끝난 관계로...
Internet Explorer를 설치한다고 해도 Edge로 켜지는 것을 볼 수 있다.

다행인 것은, Edge에서 IE 문서 모드로 IE를 열 수 있다.
아래 방법을 따라 IE로 열어보자.

우선 Edge에서 프로젝트를 연다.
현재는 Edge이기 때문에 당연히 프로젝트가 잘 열린다.

설정을 바꿔 IE에서 열어보자.

형광펜으로 칠한 부분
설정 및 기타 부분(Alt + F) > 설정(G)
클릭

 

그럼 설정 창이 뜨는데, 
왼쪽의 기본 브라우저 > Internet Explorer 모드(IE 모드)에서 사이트를 다시 로드하도록 허용 > 허용
으로 설정해 준다.

설정 후, 브라우저를 껐다 켜준다.

 

추가적으로, Edge에서 IE모드를 빠르게 열기 위해 아래 과정을 진행해 주었다.

브라우저 디스플레이 > Internet Explorer 모드(IE 모드) 버튼 > 활성화
하면, 아래 사진처럼 도구 모음에서 바로 IE로 전환할 수 있다.

 

이제 위의 IE 아이콘을 눌러 바로 변환할 수 있다.

이렇게 설정하면 이제 IE 모드로 프로젝트를 실행해 볼 수 있다.

하지만 아직 IE 관련하여 아무 설정을 해주지 않았기 때문에 이렇게 빈 화면이 보인다.

문제 원인을 파악하기 위해 개발자 도구에서 어떤 에러가 뜨는지 확인해 보았다.

---

IE의 개발자 도구 

IE에서는 F12(Window 기준)를 눌러 개발자 도구를 사용할 수 없다.

실행(Window + R)을 켜서 아래 주소를 입력해 준다.

%systemroot%\system32\f12\IEChooser.exe

그럼 아래와 같은 창이 뜰 것이다.

 

각 검은 박스를 클릭하면 해당 페이지에 대한 개발자 도구가 켜진다.

 

이렇게!

에러를 확인하기 위해 현재 브라우저를 새로고침 해주면 콘솔에서 다음과 같은 에러가 뜬다.

SCRIPT5009: 'URLSearchParams'이(가) 정의되지 않았습니다.

caniuse에 찾아보니 해당 인터페이스는 IE에서 사용할 수 없는 것으로 나온다.

https://caniuse.com/?search=urlsearchparams

기본적으로 IE는 ES5까지만 지원하기 때문에 최신 스펙인 URLSearchParams은 지원되지 않는다.

https://ko.w3hmong.com/js/js_history.htm

해당 에러가 아니더라도 ES6 이상의 문법을 사용하면 IE에서 에러가 날 것이다.

이를 위해 ES6 이상의 문법을 ES5로 바꿔주는 babel 설정이 필요하다.

---

babel 설정

CLI로 설치하게 되면 아래와 같은 구성의 설정 파일들이 설치된다.

 

여기에서 babel 설정을 위해 babel.config.js 파일을 수정하였다.

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

현재는 이렇게 되어있을 babel 설정 파일을 공식 문서를 참고하여 아래와 같이 수정하였다.

 

module.exports = {
	presets: [['@vue/cli-plugin-babel/preset', { targets: { ie: '9' } }]],
};

나의 경우는 IE9까지 지원할 예정이라 target을 IE9로 설정해 주었다.

 

설정 후, 서버를 다시 껐다 켜주면~

짜잔

하고 IE11에서 보여진다.

11 하위 버전에서의 확인 방법과 대응 방법에 대해서는 다음 포스팅에서 정리하겠다.

 

 

REF

---

https://webpack.js.org/loaders/babel-loader/

https://ko.w3hmong.com/js/js_history.htm

https://caniuse.com/?search=urlsearchparams

https://v2.vuejs.org/v2/guide/installation#Compatibility-Note