[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

레이블이 IE인 게시물을 표시합니다. 모든 게시물 표시
레이블이 IE인 게시물을 표시합니다. 모든 게시물 표시

2017년 6월 2일 금요일

[NEWS] 기술 뉴스 #12 : 14-07-02..


출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

웹개발 관련

  • Announcing Internet Explorer Developer Channel : Internet Explorer도 개발자 채널을 열었다. Chrome Canary나 Firefox Nightly처럼 다음 버전에 릴리즈될 개발 버전을 미리 사용해 볼 수 있다.(영어)
  • Daum 우편번호 찾기 API : Daum에서 우편번호 찾기 API를 공개했다. HTTP 형식으로 데이터를 가져가는 방식은 아니고 JavaScript 형태로 팝업을 띄워서 우편번호를 찾는 형태이다. 웹사이트에서 주소입력을 받아야 하는 경우에 소규모에서는 구축하기 어려운 데이터라서 많은 개발자가 유용하게 사용할 것 같다. Daum의 이하영님의 글에 따르면 아직 정식오픈전에 개발자들의 피드백을 받는 중이다.(한글)
  • WebIDE Lands in Nightly : Firefox Nightly에 WebIDE가 추가되었다. 웹페이지나 웹 애플리케이션을 디버깅하는 개발자 도구를 넘어서 애플리케이션을 개발할 수 있는 WebIDE로 발전하는 첫걸음이다. 지금은 Firefox OS 를 중심으로 모바일을 타게팅으로 하고 있는 것으로 보인다.(영어)
  • is ServiceWorker ready? : 최근 주목을 받고 있는 ServiceWorker의 브라우저 지원상황이 어떤지 한눈에 보여주는 페이지(영어)

그 밖의 프로그래밍 관련

  • Octicons for everyone! : Octicons는 Github의 폰트 아이콘으로 Github내에서 사용하고 있다. 이번에 Octicons를 아무나 가져다 쓸 수 있게 공개했다. 이전에 저장소 관련 아이콘이 필요해서 문의했던 적이 있었기에 이번 소식이 더욱 반갑다.(영어)
  • Docker14 세션 영상 : Dockercon 2014의 세션 영상이 공개되기 시작했다.(영문)
  • Java Platform, Standard Edition 7 API 사양 : 어떤 분이 JavaSE 7 의
    API 문서를 우리말로 번역해 놓으셨다. API를 자세히 보고 싶지만, 영어라서 힘들었던 분들에게 크게 유용할 듯...(한글)
  • mod_spdy is now an Apache project : 구글이 Apache에서 SPDY를 사용할 수 있게 하는 모듈인 mod_spdy의 소스를 Apache에 기부해서 2.6부터는 모듈이 아니라 코어에 포함될 예정이다.(영어)

IT 업계 뉴스

  • Google I/O 2014 : 차기 버전인 안드로이드 L에 대한 소개와 안드로이드 웨어의 웨어러블 기기 발표와 자동차용 플랫폼 Android Auto들이 발표되었다. Google의 세션 영상은 Youtube에서 볼 수 있다.(영어)

볼만한 링크


댓글 없음:
라벨: , , , , , ,

2017년 4월 26일 수요일

[NEWS] 기술 뉴스 #9 : 14-05-16..


출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

웹개발 관련

그 밖의 프로그래밍 관련

IT 업계 뉴스

볼만한 링크

프로젝트

  • Velocity.js : 자바스크립트 UI 애니메이션의 성능을 가속하는 라이브러리
  • osxc : OS X의 설정을 자동화해주는 도구.(아직 써보지는 않음.)
  • API Changelog : 페이스북, 트위터, Github등의 API 문서에 변경사항이 생겼을 때 알려주고 변경된 히스토리를 볼 수 있는 사이트
  • Spring Cloud : Cloud Foundry나 Heruku등의 클라우드에서 디비나 캐시 등의 서비스와 연결을 쉽게 해주는 스프링 프로젝트

댓글 없음:
라벨: , , , ,

2016년 3월 2일 수요일

[JS]IE에서 dom:loaded(domready Event)의 잘못된 호출..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

포스팅 제목을 짓는데 좀 고민을 했네요. 결과로 보면 제목을 저렇게 짓기는 좀 애매한 부분이 있기는 하지만 해답까지 다 알게 된 후에는 검색할 필요가 없으니 그냥 문제를 겪은 상황으로 제목을 정했습니다. ㅎ

prototype.js를 아주 잘 쓰진 않지만 그래도 어느정도 사용해왔었는데 오늘 처음보는 현상을 겪었습니다. prototype.js에는 dom:loaded라는 이벤트가 있습니다. 이 이벤트는 DOM이 모두 로드되면 발생하는 이벤트이고 보통 많이 쓰는 window.onload와는 약간 다릅니다. window.onload보다는 좀 더 빠른 타이밍이라고 할 수 있습니다. DOM만 다 로드되면 호출되니까요. 저는 prototype.js라서 dom:loaded이지만 통칭 domready Event라고 할 수 있고 대개의 자바스크립트 프레임워크에는 이런 이벤트 리스너가 제공되고 있습니다.

이 이벤트에 대해서 단 한번도 문제를 겪은 적이 없었는데 오늘은 황당한 문제를 겪었습니다. dom:loaded 이벤트가 호출되었는데 엘리먼트를 호출하면 null이 나오면서 못찾는 것이었습니다. 약간의 텀을 주고 나면 당연히 다시 다 로드가 되고요. 즉 dom이 실제 다 로드되지 않았는데 dom:loaded가 호출되었다는 것이지요. 소스가 상당히 꼬여있는 상태였고 그걸 정리할 수도 없는 상황이라 고생을 좀 했는데 어쨌든 이유는 찾았습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>  
    <head>  
        <title>Untitled Document</title>  
        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>   
        <script type="text/javascript">  
        //<![CDATA[ 
            document.observe('dom:loaded', function() {
                alert($("testElement2"));
            });
        //]]>  
        </script>  
    </head>  
    <body>  
        <div id="testElement1"></div>
        <script type="text/javascript">  
        //<![CDATA[ 
            $("testElement1").innerHTML = "It's New Text.";
        //]]>  
        </script>  
        <div id="testElement2"></div>
    </body>  
</html>

간단히 보자면 위의 상황이라고 할 수 있습니다.

상황을 설명하자면 DOM중간에 스크립트를 넣어서 DOM이 다 로드되지 않은 상태에서 DOM을 동적으로 핸들링시도한 것입니다. 어찌된 일인지 이렇게 할 경우 실제 DOM이 로드되는 타이밍이 아니라 DOM을 동적으로 핸들링하는 시점에서 dom:loaded가 발생해 버립니다. 물론 IE에서만 그러고(역쉬!!) 파이어폭스, 사파리, 오페라, 크롬 등에서는 위와같은 현상이 발생하지 않습니다.

물론 위와같은 코드는 일단 사용법자체가 잘못되어 있습니다. DOM은 기본적으로 완전히 로드된 후에 다루는 것이 기본이지요. DOM이 load되지 않았는데 다룰려고 잘못하면 실패할 가능성이 높기 때문입니다. 위 코드는 그런 기본적인 룰(강제는 아니죠)을 어긴 것이긴 하지만 실제 사이트 소스들을 보면 동적으로 핸들링은 하지는 않더라도 body곳곳에 script태그를 삽입하는 경우를 많이 보곤 합니다. 현업에서 Obtrusive Javascript를 지향하는 것은 거의 보기가 힘들죠 ㅠ..ㅠ


위 예제는 간단히 볼 수 있게 만든 테스트입니다. dom:loaded가 호출되었지만 반이상정도는 null로 찍히는 것을 볼 수 있습니다. 물론 IE에서 테스트했을 때만 발생합니다. 너무 간단한 DOM이라서 위에 설명한 현상이 잘 발생하지 않아서 하단에 스크립트를 약간 두어서 dom load를 지연되도록 했습니다.(로컬에선 반정도만 발생하는데 확실히 웹상에 올리면 거의 발생하는군요.)

prototype.js쪽의 문제라고 해야할지 IE의 문제라고 해야할지 고민을 많이 했는데 이것저것 찾아보니 역시 IE의 문제(?)군요. IE and “Operation Aborted” 이 포스팅을 보면 해당 문제에 대해서 정리를 상당히 할 수 있습니다. 이 포스팅에 나온대로 MS에서도 비슷한 문제에 대해서 정리된 내용이 있지만(위의 포스팅 내용중에 나와 있습니다.) 위 포스팅내용대로 정확히 맞아떨어지지는 않습니다.

정확한 현상은 DOM이 다 로드되지 않았는데 innerHTML이나 appendChild등을 이용해서 동적으로 핸들링을 시도했을 경우 문제가 발생하며 IE는 이를 알려주지도 않습니다. 정확히 어떻게 해결하는지는 모르겠지만 다른 브라우저에서는 원하는대로 잘 작동합니다. IE 6, 7, 8이 다 그런걸 보면 의도적인 걸까요 ㅠ..ㅠ

document.body.appendChild(document.createElement('div'));

오직 dom로드 종료전에 위 코드처럼 dom핸들링이 연속적으로 사용되었을 때만 error 표시를 해줍니다.

사용자 삽입 이미지

IE 8에서는 아주 친절히 알려줍니다. (그냥 단순 innerHTML만 했을때도 알려주면 좀 좋아.. ㅡ..ㅡ) 제가 다 짠 소스는 아니었지만 역시 일반적으로 권장하는 룰은 따라주는게 좋다는 교훈을 다시한번 되새기게 되는군요. 사실 그냥 window.onload를 쓰면 문제 없습니다. 복잡한 소스에 조금이라도 고급(?)기법을 써보려고 하다보니 꼬인 것이긴 하죠. 덕분에 새로운걸 하나 알았지만요.

댓글 없음:
라벨: , , , , , , , ,
피드 구독하기: 글 (Atom)