프론트엔드 IE 대응 문제 정리

 프론트 엔드를 개발하다보면 IE를 참 애증의 존재입니다.(사실 증오밖에 없습니다.) IE를 무시하고 싶지만 아직 대한민국에서 IE를 사용하는 사람이 많으며, 특히 장년층을 대상으로 한 서비스에서 브라우저 사용비율은 IE가 월등히 높습니다.

 프론트 엔드 개발을 하면서 IE 관련 이슈들에 대해 정리해두려고 합니다. 이슈가 발생할 때마다 해당 글에 업데이트하려고 합니다.

1. Template literals(template strings)

/* Not Working IE */
var hello = 'hello'
var hello_world = `${hello} world!`

/* Use this */
var hello = 'hello'
var hello_world = hello + ' world!'

 템플릿 리터럴은 참 편한 요소인데, IE에서 지원이 안됩니다. 이것때문에 js로 문자열을 만들 때 고생하고 있습니다. 처음 사용할 때는 지원 스펙을 확인안하고 사용했다가 IE에서 지원을 안하는 바람에 저 부분을 모두 수정한다고 고생했습니다.

2. css 데이터 속성(대문자)

/* Not working IE */
.someone[data-type="IE"] {
	height:100%;
    width:100%;
}


/* Use this */
.someone[data-type="ie"] {
	height:100%;
    width:100%;
}

 css 데이터 속성에 대문자가 지원되지 않습니다. css에서 데이터 속성도 잘 적어주었고, html에도 잘 쓰여있는 걸 보았는데, 스타일이 안 먹히길래 한참 찾았더니 대문자가 지원되지 않고 있었습니다.