[JAVASCRIPT] IE9 이하 팝업창에서 부모창으로 배열데이터 전송 시 주의 점.

** 결론 : 배열 데이터 전송 시 흔히 알고, 생각하고 있는 데이터 형식으로 전송 되지 않음!

 ** 아래 글은 위의 결론을 알기 전 겁나 삽질한 내용...

아................ 다 쓰고 나니까 다 지우고 싶네 확 그냥 아 ......................... 어쨋든 썼으니 .........하...................................................... 내 시간들이여 .....................

IE11 로 개발하던 중 스크립트 오류에 대한 문의가 왔었다.

해당 화면에 대한 로직은

1. 부모페이지에서 팝업 호출

2. 팝업에서 어떠한 데이터들을 선택 하면 Array 에 JSON 형태의 Object 들을 PUSH 하여 내려주고.

3. 부모페이지에서는 해당 리턴값을 Array 형태의 변수인 GLOBAL_PROPERTY 에 담고.

4. 해당 GLOBAL_PROPERTY를 HTML 의 HIDDEN 필드에 JSON.stringify(GLOBAL_PROPERTY) 형태로 담는다.

5. SUBMIT 시 GLOBAL_PROPERTY = HIDDEN_FILED.val() 후, GLOBAL_PROPERTY = JSON.parse(GLOBAL_PROPERTY) 하여

6. 이것저것 한 후 SUBMIT

 

 

이러하다.

 

부연설명을 하자면

 

팝업페이지는 여러개의 체크박스로 이루어져 있어 이것저것 선택할 수 있는 화면이며,

 

호출 시 PARENT.HIDDEN_FIELD.val() 하여 데이터가 있을 시 JSON.parse() 하여 데이터를 추출,

 

각각의 데이터에 맞는 값들이 자동으로 체크되게 하는 로직 ( init() ) 이 있다.

 

그리고 해당 작업을하면서 한가지 알게 된 것이 있다면

 

초기에는 팝업이 아닌 부모페이지에 DIV ELEMENT 를 하나 만들고

 

AJAX 로 팝업페이지를 해당 DIV에 .html() 로 붙인 후,

 

init() 호출 시 부모페이지의 GLOBAL_PROPERTY값으로 셋팅이 이루어지도록 하였으며

 

이것저것 선택 후 확인 시 DIV 를 지웠나? 숨겼나? 하는 방식으로 구현하였다.

 

하지만 2번 이상 AJAX (팝업) 호출 시 GLOBAL_PROPERTY의 값을 읽어 들이지 못하는 것을 발견하였다.

 

그래서 많은 시간을 들여 팝업으로 변경, PARENT.HIDDEN_FIELD.val() 로 init() 을 한 것...............인데.....

내가 팝업으로 변경하기전에 PARENT.HIDDEN_FIELD.val() 로 해봤었나 ? 기억이 안나네 음.

왠지 됐을 것 같기도 한데............... 아마 안돼서 굳!이! 팝업으로 했을거라 생각한다.

 

아무튼 그러하며 다시 본론으로 들어가자면

 

현재 오류가 나고 있는 부분을 보아하니 5 번 단계의 JSON.parse() 에서 였다.

 

오류 원인은 JSON.stringify() 하였을 시 데이터 표현의 차이였다.

 

 

 

2가지 환경에서 오류가 발생하고 있었는데

 

1. 호환성 보기 설정하였을 시

2. IE9 이하 버전

 

 

일단 호환성 보기는

 

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

 

요 메타태그로 간단히 해결되었지만 IE9 부터 그 이하 버전에서의 문제는 참으로..... 골치가 아팠다.

 

 

 

설명보다 한번 눈으로 보는게 훨 나으니 예제 데이터를 바로 적어보자면,

 

콜백 받은 후 해당 데이터를 찍었을 시

 

 

-- 정상 작동하는 데이터 형식

CALLBACK DATA : [{"dataList":[{"key_a":1001,"key_b":1002,"key_c":1003},{"key_a":1101,"key_b":1102,"key_c":1103}],"text":"0번째요"}, {"dataList":[{"key_a":2001,"key_b":2002,"key_c":2003},{"key_a":2101,"key_b":2102,"key_c":2103}],"text":"1번째요"}]

 

 

-- 오류환경에서의 데이터 형식

CALLBACK DATA : {"0":{"dataList":{"0":{"key_a":1001,"key_b":1002,"key_c":1003}, "1":{"key_a":1101,"key_b":1102,"key_c":1103}},"text":"0번째요"}, "1": {"dataList":{"0":{"key_a":2001,"key_b":2002,"key_c":2003},"1":{"key_a":2101,"key_b":2102,"key_c":2103}},"text":"1번째요"}}

 

 

 

 

짜란.

 

위와 같이 오류환경일 시 [] 가 아닌 {} 이며 인덱스 번호인지 key 번호 인지로 추정되는 번호가 리스트 형식의 값 앞에 찰싹 달라붙어있다.

 

처음에는 멍청하게 IE9 이하 환경에서 JSON.stringify() 가 정상동작을 안하는 줄 알았다.

(실제로 3일동안 겁나 검색하였을 시 IE8 이하버전 에서 JSON.stringify() 에 뭔가 문제가 있다는 글들을 보았으며

때문에 내 예상이 적중한 줄 착각하여 해당 문제에만 매달리느라 좀 더 넓게 보지 못했다. 쒯뜨)

 

하지만 문제는 다른 곳에 있었다.

(3일 내내 겁나 삽을 푸고 드디어.)

 

 

POPUP 화면에서

 

window.parent.callbackFunction(returnArrayJSONData);

 

하기 전에

 

console.log(JSON.stringify(returnArrayJSONData));

 

를 찍어봤더니 정상적인 형식으로 찍히는 것이다!!!

 

문제는 JSON.stringify() 가 아닌 POPUP PAGE 에서 PARENT PAGE 로 데이터 전송 시 뭔가 문제가 있던 거였다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

(ㅁㄴ아르마ㅣㄴ으라ㅣ;ㅂ3겁2ㅐ;3ㅑ4릅3op4u8tyglajkdfnbk;mad리 ㄴdcv afkaw3r l;q4tjl;akerㅎ awefkaklejfal; efㅁ efjaklefmal;efmakl;즈 o2img;l2kmgl shit )

 

그래서 일단 문제 해결은

 

-- POPUP PAGE

기존 : window.parent.callbackFunction(returnArrayJSONData);

변경 : window.parent.callbackFunction(JSON.stringify(returnArrayJSONData));

 

-- PARENT PAGE

function callbackFunction(returnData) {

 

    /******* 변경 전

    if (returnData.length > 0) {

        -- returnData 갖고 지지고 볶음

        GLOBAL_PROPERTY = returnData;

    }

    

    HIDDEN_FIELD.val(JSON.stringify(GLOABAL_PROPERTY));

    

 

    /******* 변경 후

    -- POPUP 에서 JSON.stringifi() 로 던졌으니 받자마자 JSON.parse()

    returnData = JSON.parse(returnData);

    

    if (returnData.length > 0) {

        -- returnData 갖고 지지고 볶음

        GLOBAL_PROPERTY = returnData;

    }

    

    HIDDEN_FIELD.val(JSON.stringify(GLOABAL_PROPERTY));

}

 

 

이와 같이 변경하여 해결.

 

그리고 이글의 결론은 팝업창에서 부모창으로 배열데이터 전송 시 IE9 이하 환경에서는 기존 알고 있는 데이터 형식과 다르게 전송 되니 주의해야 한다는 것!