서론
- 테스트를 하던 도중 또 IE 브라우저에서 지원하지 않는 것을 발견했다. 💦 💦
- 개발환경에 따라 동적으로 주소를 바꿔주기 위한 작업을 위해 템플릿 리터럴을 사용했다. 파이어폭스와 크롬에서 잘 작동하였는데 IE 에서는 작동하지 않았다.
IE에서는 Template literal 즉 백틱( ` )이 지원되지 않는다!
템플릿 리터럴?
-
자바스크립트 ES2015 개정부터 도입된 템플릿 리터럴은 자바스크립트로 동적인 html을 생성할때 편의를 위해서 추가된 기능이다.
-
특히, html 사이에 자바스크립트 변수를 넣어서 만드는 경우에 그 효용이 극대화된다.
IE 에서 해결 방법
1. +와 " 으로 다시 감싸기
-
제일 바깥쪽을 "로 감싼다
-
html 안쪽의 클래스, 속성 등을 넣는 곳을 순서대로 '로 변경한다.
-
엔터를 치는 곳을 +를 추가한다.
-
마지막으로 자바스크립트 변수 사용하는 곳 앞에서 "를 넣고 +를 입력하고 변수만 남긴 상태에서 + "를 추가한다.
2. babel 사용하기
-
babel이란? 바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있다. 더 정확하게 말하면 트랜스파일러라고 말할 수 있다. (트랜스파일러는 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것을 말하며 컴파일러의 일종이다)
-
그렇다면 왜 바벨이 필요하고 바벨이 있어야만 자바스크립트의 최신 문법을 사용할 수 있을까? 그 이유는 자바스크립트가 실행되는 환경때문이다. 다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행된다. 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 된다. 게다가 이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받는다. 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있다. 그렇기 때문에 모든 자바스크립트 실행 환경에서 정상적으로 동작할 수 있도록 하려면 바벨이 필요하다.
-
바벨에서 작업할 경우, 자동으로 ecma2015 관련 코드들을 인터넷 익스플로러에서도 작동하도록 변경을 해준다.
결론
- IE 브라우저 언제 사라지지?
https://rich-informer.tistory.com/25
https://chanyeong.com/blog/post/27
