Rev. 2.73

위 표는 마켓쉐어에서 제공하는 최근 2년간의 브라우저 트렌드 입니다. 장난삼아 위 그래프를 근거로 향후 8년간의 가상 트렌드를 만들어 보았습니다. MS가 이 현상을 계속 방치한다면 6년 후인 2014년이 되는 해에 파이어폭스가 IE를 추월하는 그림이 그려지게 됩니다.

2년간의 점유율을 근거로 한 것이기 때문에 구글크롬 브라우저의 변화를 넣지 못한 것이 아쉽습니다만, 가장 유력하게 발생할 수 있는 이변은 바로 크롬일 것으로 생각됩니다. 놀랍게도 크롬은 시작부터 0.78%의 점유율로 무섭게 브라우저 시장을 잠식하고 있습니다. 탄생한지 12년이나 흐른 지금의 오페라 브라우저 점유이 고작 0.69%이기 때문입니다. 이 기세라면 IE가 추월당하는 시기가 더욱 앞당겨 지지 않을까요? 크롬의 선전을 기대합니다.

Comments

console.png

클라이언트 사이드 웹개발에 유용하게 사용되는 자바스크립트 디버그 콘솔은 더이상 없어서는 안될 매우 중요한 요소가 되었습니다. 최근에는 브라우저 자체적으로 디버그 콘솔을 제공하거나 부가 기능으로 제공하여 개발을 이롭게하고 있습니다. IE에서도 이와 비슷한 Companion.JS라는 플러그인이 있지만 파이어버그보다는 다소 기능이 떨어지거나 사용법이 다르고 특히, 변수 출력의 디테일면에서 차이를 보이기 때문에 사용하는데 불편함이 있었습니다. 그래서 자바스크립트를 이용한 자바스크립트 디버그 콘솔을 만들게 되었습니다.

Prototype 기반이고, 파이어버그의 콘솔과 유사하게 만들려고 노력했습니다, 타입이 object인 경우 이를 분석하여 배열/노드/객체를 구분하고, 커맨드 라인을 사용할 수 있으며, 약소하지만 Ajax 통신하는 모습을 모니터링 할 수도 있어요. 단점은 콘솔의 호출 수와 작동 속도가 반비례 한는 것입니다. 호출이 많을수록 브라우저의 작동속도가 떨어지는 것이죠. 때문에 개발과정에서만 사용하는 것을 권장하며, 되도록이면 간격을 두어 콘솔을 호출하는 것이 좋습니다. console.js는 아래와 같은 방법으로 응용할 수 있습니다.

<script type="text/javascript">
  if (Prototype.Browser.IE && !window.console) 
    document.write('<script type="text\/javascript" src="console.js"><\/script>');
</script>

<script type="text/javascript">
  (function() {
    var set = function(type) {
      var func = (typeof console != 'undefined' && typeof console.log != 'undefined')?
        !!(console[type])? console[type] : console.log : Prototype.emptyFunction;
      /* fix for the firebug less than or equal to version v1.1 */
      return (typeof func.bind == 'function') ? func.bind(console) : func; 
    };
    ["debug", "log", "info", "warn", "error"].each(function(type, i) {
      (i)? debug[type] = set(type) : debug = set(type);
    });
  })();
</script>

위 코드는 제가 즐겨 사용하는 디버그 콘솔 호출 함수입니다. debug 함수를 만들어 사용하는데 파이어버그 콘솔 API를 따르는 디버그 콘솔을 제공하는 대부분의 브라우저들(파이어폭스, 크롬, 사파리 등)에서 사용할 수 있습니다. console 메서드들을 오버라이딩하여 사용하는 방식으로 통합적으로 사용할 수 있게 만든 것이죠. 물론 console.log 메서드를 그대로 사용해도 무방합니다.

다운로드 :

* original - console.js (14.1kb)
* minified - console.js (10.1kb)

업데이트 :

* 2008.10.08 - IE6에서도 Ajax 통신을 모니터링 할 수 있습니다.
* 2008.10.08 - Object 분석 결과 처리가 개선되었습니다.
* 2008.10.08 - Ajax 통신에 소요된 시간을 표시합니다.
* 2008.10.09 - Ajax 통신 결과물(responseText)을 표시합니다.
* 2008.10.09 - Ajax 통신 상황(status)의 오류를 표시합니다.
* 2008.10.10 - 자동으로 스크롤 위치를 계산합니다.

Comments

javascriptmemoryleak.jpg

인터넷 익스플로러에서 발생하는 메모리 누수(Memory Leak)현상을 발견해주는 도구인 JavaScript Memory Leak Detector가 공개되었습니다. IE Developer Toolbar와 같이 하단에 들러 붙는 구조로 모양 또한 흡사합니다.(도구 > 도구 모음(T) > 탐색 창(E) > js memory leak detector) 메모리 누수가 발생한 지점을 찾아주고 순환 참조된 자바스크립트 코드를 알려줍니다.

메모리 릭의 발생 원인은 IE의 DOM을 관리하는 JScript 때문입니다. JScript는 MS가 자바스크립트를 본따 만든 자바스크립트 호환 언어입니다. 자바스크립트 객체가 DOM 객체에 대한 레퍼런스를 포함할 때, 순환구조가 형성되고, 자바스크립트 객체의 참조가 사라지면, 가비지 컬렉터(Garbage collector)에 의해 사용되고 있던 메모리 공간을 다시금 할당해야 합니다. JScript 메모리 관리자는 순환에 대해 잘 이해하지 못하기 때문에 순환이 발생할 때 메모리 교정이 일어나지 않게 되고, 교정되지 않은 메모리를 가리켜 누수(Leaked)되었다고 합니다. 일정 시간이 지나면, 메모리 자원부족으로 브라우저가 죽어버리는 치명적인 결과를 초래하게 되는 것이죠.

아.. 괜시리 화가 치밀어서 M$에 한마디 해야겠어요.

이따위 도구들 하나도 안반갑고요! 망할놈의 릭이 발생하는 원인이나 해결하란 말예요!

Comments