CDN으로 IE에서 ES6 문법 사용하기

사내 프로젝트 진행 중 특정 기능을 Vue.js로 개발해보기로 했는데 (너무 신남! 😊) IE 크로스 브라우징 체크를 너무 뒤늦게 해버렸다. Arrow Function 등의 ES6 문법이 IE에서 지원되지 않는다는 걸 알고 있었는데, 왜 생각을 못했지?

 

개발 막바지가 되어서야 다급히 Babel, Polyfill을 구글링해 아래와 같이 CDN을 연결해 해결했다. 

 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js"></script>

<script type="text/babel">
new Vue({
    // 필요 코드 작성
})
</script>

 

구글링하며 초반에 적용한 몇몇 CDN들이 제대로 동작하지 않았던 것을 보니 버전을 타는 것 같기도 하다.

 

UI 개발 하면서 중간중간 크로스 브라우징하는 습관이 잘 되어있는 편인데, 처음으로 실제 프로젝트에서 JS Framework로 개발을 하다보니 동작을 구현하는 데에만 너무 신경이 쏠려있었던 것 같다. 앞으로 이런 부분도 꼼꼼히 체크해야지.