KB927917 오류 해결 및 자바스크립트에서 Map 온전히 사용하기

자바스크립트에서 Key, Value 로 사용할 일이 생겨서 너무나 당연하게 아래와 같이 Map 을 선언, 사용했다.

var testScript = {
    map: new Map(),
    init: function() {
        ...
    },
    ...
};

그런데! 기획자 분에게 IE8 에서 페이지가 안뜬다고 연락이 왔다.. 

이상하다, 내 VM에 있는 IE로 IE8 테스트했었는데..

접속한 원격주소 받아서 확인해보니 진짜 페이지가 안뜬다 ㅋㅋㅋㅋㅋ

아래는 오류메세지.

HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)

와. 진짜 엄청 애먹었다.

사유를 보고 <script> 태그도 다 주석해보고, addChild 랑 createElement 관련 스크립트도 주석해보고,

구글링해서 나오는 방법 다 찾아봤는데도 안돼서 소스를 천천히 의심가는 아이들을 하나씩 주석해가며 테스트하니 찾았다;

원인은 map... 이었는데,

IE9이상, Safari, Chrome 에서는 되는데 '일부' IE8 에서만 안되는걸 보면

자바스크립트에서 map 객체는 IE호환이 100% 되진 않는 것 같다.

어찌됐든, 나는 Key / Value 객체를 써야했기 때문에 Map 객체를 prototype 으로 정의해서 사용했고,

오류없이 페이지도 정상적으로 뜨는걸 확인했다.

아래 수정한 소스

/** 이 부분을 추가함 */
Map = function() {
    this.map = new Object();
};
Map.prototype = {
    put : function(key, value){
        this.map[key] = value;
    },
    get : function(key){
        return this.map[key];
    },
    size : function(){
        var count = 0;
        for (var prop in this.map) {
            count++;
        }
        return count;
    }
};
/** 이 부분을 추가함 */
 
var testScript = {
    map: new Map(),
    init: function() {
        ...
    },
    ...
};

나는 필요한게 넣고(put), 꺼내고(get), 빈 값 체크(size)만 할거라서 메소드 3개만 정의했는데 더 쓸거면 더 써도 괜찮을듯 !!!!

결론 : 에러메세지를 곧이곧대로 믿지 말자. IE8은 정말 다루기 어렵다. Javascript 에서 Map 을 조심히 잘 쓰자.

출처 : https://eunsood.tistory.com/entry/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-hashmap-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0