IE에서 템플릿 리터럴 대체 방법

ie에서 보여야 할 리스트 정보가 보이지 않아서 당황을 하는 일이 발생했습니다.

개발을 크롬에서 하다보니, 전혀 깨닫지 못했었던 것이 불찰이었습니다.

개발 외부 미팅을 가서, 기능을 설명하기 위해서 리스트를 열였는데 하필 그곳은 ie를 아직 쓰는 곳이었습니다.

나와야 할 리스트가 아래처럼 나오지 않았습니다.

위 내용은 예시를 위해서 샘플로 만든 것이라는 점 먼저 알려드립니다.

아무튼 리스트가 나오지 않아 당황을 했습니다.

처음에는 방화벽 같은 이유로 응답이 가지 않았나 생각을 했는데요. 요청이 갔으니 응답은 와야 할 것입니다.

그래서 고민하다가 혹시 크롬으로 하지 않아서 발생했나 싶어 일단 크롬을 설치하고 해보았습니다.

다행히 크롬에서는 정상적으로 화면이 노출이 되었습니다.

미팅은 마쳤지만 무엇이 문제인지 찾아보았습니다.

IE에서는 Template literal 즉 백틱( ` )이 지원되지 않는다!

자바스크립트 ES2015 개정부터 도입된 템플릿 리터럴은 자바스크립트로 동적인 html을 생성할때 편의를 위해서 추가된 기능입니다.

특히, html 사이에 자바스크립트 변수를 넣어서 만드는 경우에 그 효용이 극대화 되는데요.

var abc += "<td><p>"+var1+" 님 "+var2+"에 오신걸 환영합니다.</p></td>"

라고 기존에 사용했다면 백틱을 이용하면 아래와 같이 됩니다.

var abc += `<td><p>${var1} 님 ${var2} 에 오신걸 환영합니다.</p></td>`

라고 표현할 수 있습니다.

예시가 좀 심플해서 못느낄 수 있지만, html과 변수 사이에 따옴표와 +를 덜 쓰는것만해도 훨씬 가독성이 좋다는 것을 해보면 알 수 있습니다.

아무튼 보여줘야 할 것이 이런 느낌어었는데요. 백틱을 ie에서 지원하지 않아서 발생한 일입니다.

현재는 ms에서도 버리고, edge로 갈아탔는데 지원도 하지 않는 인터넷 익스플로러를 사용하면서 "비록 사용자가 많이 줄었다고 하더라도, 그리고 그들이 일부라고 하더라도 버릴수 없다"라는 클라이언트의 요청을 받아들여야했는데요.

이 문제를 해결하는 방법은 2가지가 있습니다.

작업 시간이 그리 오래 걸리는 것은 아니지만, 전체 프로젝트에서 데이터를 요청하고 받는 부분이 많이 있기 때문에 한동안 +와 "(또는 ')와의 전쟁을 치뤄야 할 것 같습니다.

이곳을 혼동하지 않고 잘하는 요령이 있습니다.

(1) 제일 바깥쪽을 "로 감싼다

(2) html 안쪽의 클래스, 속성 등을 넣는 곳을 순서대로 '로 변경한다.

(3) 엔터를 치는 곳을 +를 추가한다.

(4) 마지막으로 자바스크립트 변수 사용하는 곳 앞에서 "를 넣고 +를 입력하고 변수만 남긴 상태에서 + "를 추가한다.

다른 샘플이긴 하지만 이런식으로 변경하면 됩니다.

이때 줄줄이 이어서 끝없이 연결하는 것 보다는 모양을 최대한 html에 맞춰서 나타내면 읽기에도 편합니다.

바벨에서 작업을 한다면, 자동으로 ecma2015 관련 코드들을 인터넷 익스플로러에서도 작동하도록 변경을 해줍니다.

이를 위해서 npm 에서 plugin-transform-template-literals 이라는 babel 플러그인 설치도 해야합니다.

인터넷 익스플로러가 어느날 갑자기 다 종말하거나, edge로 변경되는 사건이 발생하면 좋겠다고 생각한 하루였습니다.

자격증 정보세상