IE8에서야 정상이 되어가는 자바스크립트 엔진. 하지만...

M$에서 Internet Explorer 8.0을 공개했습니다.
하지만, IE8에선 여러가지 문제점이 터지고 있더군요.

저에겐 그 중 하나가 BBCode for TiStory 2.4오동작을 한다는 것이었습니다.
원인을 확인해보니 일관성이 없는 IE의 js 엔진억지로 맞춰놓은 코드가 원인이었습니다.

아래는 HTML 소스 전체를 뒤져서 <div class="bbcode">가 발견되면 발견된 메시지 박스를 띄우는 코드입니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttribute('class') == 'bbcode')
            alert("non MSIE!");
</script>
</body></html>

이 별 특성 없는 코드는 Opera, Firefox, Chrome 에서는 버전에 상관없이 잘 동작합니다.

사용자 삽입 이미지

하지만, 대한민국의 국민 웹브라우저 IE에서는 좀 다릅니다.
IE6, IE7에서는 정상동작을 하지 않습니다.
정확히는 getAttribute() 함수를 씹어먹어버립니다.

오류도 띄우지 않습니다. 그야말로 "아무것도 묻지도 따지지도 않고" 넘어갑니다.

이 코드를 IE6, IE7에서 동작시키려면 아래와 같이 변경해야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    if (/msie/i.test (navigator.userAgent)) { // IE6, 7만을 위하여...
        for (var i = 0; i < tags.length; i++)
            if (tags[i].getAttributeNode('class').value == 'bbcode')
                alert("MSIE!");
    }
    else
    {
        for (var i = 0; i < tags.length; i++)
            if (tags[i].getAttribute('class') == 'bbcode')
                alert("non MSIE!");
    }
</script>
</body></html>

추가된 if (/msie/i.test (navigator.userAgent)) 는 브라우저의 userAgent를 읽어 msie인지 확인하는 부분입니다.
그리고, getAttribute() 함수 대신에 getAttributeNode() 함수를 사용해서 동일하게 동작하도록 만들었습니다.
이렇게 수정하면 IE6, IE7에서도 동일하게 동작합니다.

그런데... 이 코드는 불행하게도 IE8에서는 동작하지 않습니다.

사용자 삽입 이미지

이게 뭐냐고!!!!!!!!!


IE8에서는 getAttributeNode() 함수의 동작방식이 정상적으로 바뀌었기 때문입니다.
IE8을 포함한 거의 모든 웹브라우저에서 정상동작하도록 하려면 아래와 같이 변경해야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>IE javascript</title></head>
<body>
<div>no class name</div>
<div class="bbcode">class name : bbcode</div>
<script type="text/javascript">
    var tags = document.getElementsByTagName('div');

    for (var i = 0; i < tags.length; i++)
        if (tags[i].getAttributeNode('class') &&
            tags[i].getAttributeNode('class').value == 'bbcode')
            alert("MSIE!");
</script>
</body></html>

이제야 MS의 웹브라우저가 정상적인 궤도에 가까워졌습니다.

하지만, 이 상태로 만세를 불러줄 수만은 없는 것이... IE6, IE7에만 최적화된 페이지가 너무나 많기 때문입니다.
더불어 이렇게 버그 투성이로 렌더링하는 것이 소위 "호환성 보기"의 실체란 점도 있습니다.

부디 우리나라의 웹 개발자들이 특정 회사의 브라우저에 종속적이지 않고 웹표준을 준수하면 좋겠습니다.
아마 그랬으면 이런 원초적인 버그가 진작에 해결되지 않았을까요?


덧. 이 사태의 진정한 문제는 IE6, IE7 때문에 getAttribute() 함수 자체가 못쓰는 함수가 되었다는 점입니다.



Trackback 0 Comment 13
  1. Favicon of http://solarhalfbreed.tistory.com BlogIcon Ludens_ 2009.03.27 00:57 address edit & delete reply

    제대로 하는 일이 없는 마소랍니다(음?)

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.03.27 01:07 address edit & delete

      동감입니다.

  2. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.03.27 09:46 address edit & delete reply

    묻지도 말고 따지지도 말고 돈으로 해결하는 마소상조!

    어제 다음블로거 뉴스에서 차니님께서 올리신
    오픈웹 패소 라는 기사가 마음을 아프게 하더라구요 ㅠ.ㅠ

    언제쯤 MS 제국에서 벗어 날수 있을려나요..

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.03.27 12:59 address edit & delete

      현실적으로 보면 결코 쉬운 일이 아닐 것 같습니다.

  3. Favicon of http://oktoya.net BlogIcon okto 2009.03.28 16:43 address edit & delete reply

    갑자기 궁금한거..
    외국에서는 인터넷 뱅킹을 어떤식으로 하는지 혹시 아시나요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.03.29 00:31 address edit & delete

      모른다능~

    • Favicon of http://www.graychang.com BlogIcon 회색코끼리 2009.04.01 23:06 address edit & delete

      아무것도 안깔리고, 어느 웹브라우저 에서나 가능합니다.ㅋ
      그냥 https 로 접속되는거 같던데... ㅡ_ㅡㅋ (태국)

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.02 00:14 address edit & delete

      코끼리// 그렇군요. 사실 https 만으로도 기본적인 네트워크 보안은 충분할 것 같습니다. 좋은 정보 감사요~

    • Favicon of http://jvmblog.tistory.com BlogIcon jVM 2009.04.02 18:52 address edit & delete

      아무것도 안깔리고, 어느 웹브라우저 에서나 가능합니다.
      그냥 https 로 접속됩니다.(독일)
      로그인할 때 PIN을 이용하여 사용자 인증.
      기타 중요한 작업 수행시에는 TAN을 이용하여 인증.
      TAN은 다 사용하고 나면 우편을 통해 새로 발부됩니다.
      한국은행들의 온라인뱅킹하고는 비교도 안되게 편리합니다만 예를 들어 송금의 경우 같은 은행내의 계좌로 송금해도 하루이틀은 걸리는 극악의 처리속도가 좀 불편한 점이지요.

    • Favicon of http://oktoya.net BlogIcon okto 2009.04.02 22:03 address edit & delete

      다른 나라에서는 그냥 되는거였군요-_-

  4. Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.03.29 22:47 address edit & delete reply

    진짜 우리나라는 은행 포함해서 IE 아니면 안되는게 너무 많고.. 그런 사이트들도 IE8로 들어가면 막 배경이 까매지고 날리가 나더군요.. 게다가 IE8 삭제했더니 롤백이 제대로 안되서 완전 포맷하고.. 뷁뷁뷁이런 OTL

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.03.29 22:48 address edit & delete

      IE8에서 급격히 IE의 기조를 "정상적인" 웹브라우저로 전환해서 단기간적으로는 문제가 클 겁니다.
      하지만, 장기적으로는 웹 표준화 면에 있어 좋은 방향으로 진행될 것이라 기대합니다.

  5. 홍길동 2009.08.03 13:34 address edit & delete reply

    한가지 브라우저 맞춰서 개발하기 싫지만 이미 안정화된(?) 웹에 다시 손댄다는 것이... 쉽지만은 않겠죠...
    그래도 웹표준화 해야 하는게 정답이니까... 시간을 조금만 더 주시지... 그게 안되죠...