[JAVASCRIPT] 갤럭시 S3, 갤럭시 노트 2 스크립트 문제 해결

일하다가 특이한 문제를 해결한 경험이 있어 공유합니다.

1. 문제

갤럭시 노트2, 갤럭시 S3 > 기본 인터넷 브라우저 > 상품 리스팅 화면 에서 나오지 말아야 할 것들이 나오고, 나와야 할 상품이 나오지 않았습니다.

2. 문제 분석

해당 브라우저는 chrome inspect 로 디버깅이 불가능하여, 사내에 있는 weinre라는 툴을 사용하여 디버깅했습니다.

문제시 되는 영역에 

try {
    /* 문제 영역 */
} catch ( e ) {
    console.log( e );
}

이렇게 코드를 추가하여 디버깅 하였습니다.

2. 문제 원인

화면의 상품을 교체할 때, 특정 버튼을 제거하는 코드가 있었는데, 아래처럼 구현이 되어 있었습니다.

var btnArea = productArea.querySelectorAll('.btn');
if (btnArea.size > 0) {
    btnArea[0].remove();
}

그런데 해당 브라우저 에서는 remove 메서드를 인식할 수 없었습니다. 해당 기기의 크롬 메서드에서 잘 실행이 되는 것을 보면, 아마 해당 메서드가 표준이 아니거나 인터넷 브라우저가 예전의 규약을 사용한다 던지 하는 것 같습니다. (정확한 원인은 표준을 보기 전까지는 잘 모르겠습니다.)

보통은 아래 처럼 돔 엘리먼트를 제거하죠.

btnArea[0].parentNode.removeChild(btnArea[0]);
 

3. 문제 해결

아래 처럼 코드를 수정했습니다.

$(productArea).find('.btn').remove();
 

한줄로 쉽게 삭제하려던 영역을 지울 수 있습니다.

그리고 위 그림처럼 Java의 NullPointException같은 

Uncaught TypeError: Cannot read property 'remove' of undefined(…)

이런 문제를 해결할 수 있었습니다.

4. 결론

- 어떻게든 디버깅을 할 수 있는 환경을 만들어야 합니다. 그렇지 않으면 문제 해결하는데 엄청 오래걸립니다.

- 표준을 잘 따라야 합니다.