AngularJS를 IE에서 테스트하다보니 $http 서비스를 사용할 때 오류가 발생했다.
메타 태그를 아래와 같이 주었기 때문에 테스트용 브라우저인 IE9에서는 일반적으로 오류가 없었지만, 강제적으로 개발자 모드에서 문서모드를 IE7 등으로 바꾸었을 때 문제가 발생했다.
위와 같이 IE=Edge 옵션을 주어 메타 태그를 설정하면, 호환성 보기 버튼 자체가 사라지기 때문에 IE에서 항상 최신 렌더링 엔진으로 웹 어플리케이션이 렌더링된다. 하지만 강제적으로 문서 모드를 IE7으로 바꾸면 얘기가 틀려진다.
고객들이 어떤 브라우저를 사용할지 모르기 때문에 "IE 호환성 모드를 쓰지 마세요"라고 할 수도 없는 노릇이다.
이런 까닭에 문제 해결을 위해 구글링을 한 결과, JSON을 IE 구버전에서 제대로 지원하지 못하기 때문에 나타나는 문제였다. 이에 대한 해결책으로 json에 대한 대표적 polyfill인 json3.js 를 활용해서 문제를 해결할 수 있었다. json2.js 도 있지만, 이보다 몇가지 향상된 부분이 있는 라이브러리가 json3 라고 소개하고 있다.
브라우저 모드와 문서 모드의 조합이 다양하기 때문에 특정한 IE 버전을 지정하지 않고 IE인 경우에는 json3.js 를 로드하게 해서 IE에서도 JSON을 지원하도록 설정했다. IE9에서 다양한 문서 모드와 브라우저 모드의 조합으로 테스트한 결과 큰 문제없이 정상동작하는 것을 확인할 수 있었다.
사실 구버전 IE를 고려할 때, 어떤 설정을 해야하는지 이미 AngularJS 사이트에 자세하게 소개되어 있었는데, 오늘의 고생은 이 부분을 꼼꼼히 읽지 못한 탓이 크다.
AngularJS를 IE에서 사용할 때 고려해야 할 부분
http://docs.angularjs.org/guide/ie
메타 태그를 아래와 같이 주었기 때문에 테스트용 브라우저인 IE9에서는 일반적으로 오류가 없었지만, 강제적으로 개발자 모드에서 문서모드를 IE7 등으로 바꾸었을 때 문제가 발생했다.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1;text/html; charset=utf-8;" />
위와 같이 IE=Edge 옵션을 주어 메타 태그를 설정하면, 호환성 보기 버튼 자체가 사라지기 때문에 IE에서 항상 최신 렌더링 엔진으로 웹 어플리케이션이 렌더링된다. 하지만 강제적으로 문서 모드를 IE7으로 바꾸면 얘기가 틀려진다.
고객들이 어떤 브라우저를 사용할지 모르기 때문에 "IE 호환성 모드를 쓰지 마세요"라고 할 수도 없는 노릇이다.
이런 까닭에 문제 해결을 위해 구글링을 한 결과, JSON을 IE 구버전에서 제대로 지원하지 못하기 때문에 나타나는 문제였다. 이에 대한 해결책으로 json에 대한 대표적 polyfill인 json3.js 를 활용해서 문제를 해결할 수 있었다. json2.js 도 있지만, 이보다 몇가지 향상된 부분이 있는 라이브러리가 json3 라고 소개하고 있다.
<!--[if IE]> <script language="javascript" type="text/javascript" src="json3.min.js"></script> <![endif]-->
브라우저 모드와 문서 모드의 조합이 다양하기 때문에 특정한 IE 버전을 지정하지 않고 IE인 경우에는 json3.js 를 로드하게 해서 IE에서도 JSON을 지원하도록 설정했다. IE9에서 다양한 문서 모드와 브라우저 모드의 조합으로 테스트한 결과 큰 문제없이 정상동작하는 것을 확인할 수 있었다.
사실 구버전 IE를 고려할 때, 어떤 설정을 해야하는지 이미 AngularJS 사이트에 자세하게 소개되어 있었는데, 오늘의 고생은 이 부분을 꼼꼼히 읽지 못한 탓이 크다.
AngularJS를 IE에서 사용할 때 고려해야 할 부분
http://docs.angularjs.org/guide/ie
