상황
회사에서 맡은 작업을 로컬 환경에서 개발/테스트하고 개발 환경에 배포하여 잘 동작하는지 테스트해봤다. 로컬에서 여러 번의 테스트 결과 별이상 없었기 때문에 당연히 되겠지하고 ‘조회’ 버튼을 누르는데 아무런 반응이 없었다…
IE 개발자 도구를 통해 콘솔을 확인해보니, 서버에서 응답받은 js 파일 중 하나에서 SCRIPT1004: ';'가 필요합니다.라는 에러 메시지를 유발했다. 이 문제를 해결하고나니 콘솔 창에서 또 다른 에러 메세지인 개체가 'replaceAll' 속성이나 메서드를 지원하지 않습니다.를 맞닥들였다.
원인
두 에러 메시지 모두 IE에서 지원하지 않는 자바스크립트 기능을 사용했기 때문에 발생했다.
(로컬 환경에서는 크롬으로만 테스트를 해서 이상이 없었던 것이었다…)
- 다음은
for ... of에 대한 브라우저 호환성을 나타낸 표이다.
- 다음은
replaceAll에 대한 브라우저 호환성을 나타낸 표이다.
- 해당 사이트에 가보면 ES6부터는 IE11에서만 부분 지원이라고 하는데 이마저도
const, let등의 키워드Map, Set정도인 것 같다. - w3cschool에는
Internet Explorer does not support ECMAScript 2015.라고 되어있다.
해결 방법
Babel과 같은 트랜스컴파일러를 사용하는 방법도 있겠지만, 학습이 부족하므로 일단 문법적으로 해결할 수 있는 방법에 대해 살펴보자.
(그냥 IE를 버리자. )
for … of 대신 for … in 사용
- Before
1 2 3
for(const order of orders) { ... }
- After
1 2 3 4
for(const idx in orders) { const order = orders[idx]; ... }
replaceAll 대신 replace 함수와 정규 표현식 사용
- Before
1
const price = value.replaceAll(',', ''); // "10,000,000" -> 10000000
- After
1
const price = value.replace(/,/gi, ''); // "10,000,000" -> 10000000
※ 해당 사이트에서 아래와 같이 특정 기능에 대한 브라우저 호환성에 대해 확인해 볼 수 있다.
