발생일: 2011.12.17 문제: Google Closure Compiler를 살펴보다가 구글의 꼼꼼한 자바스크립트 스타일 가이드를 보고 마음에(?) 드는 부분이 있어 메모해둔다. 해결책: 먼저, Google Closure Complier는 간단하게는 자바스크립트 압축 도구라 할 수 있고, 나아가서는 자바스크립트를 미리 컴파일 해볼 수 있는 도구이다. 재미있는 건, 컴파일 시점에 주석으로 달아놓은 어노테이션을 분석해서, 코드 내에서 의도하지 않은 방향으로 쓰인 경우를 찾아 경고해준다는 거다. 컴파일러와 어노테이션이 밀접하게 관련이 있어서이겠지? 구글의 자바스크립트 스타일 가이드의 Type Expression 부분이 유난히 꼼꼼하게 설계되어 있다. (JSDoc과는 비교가 안될 정도로 꼼꼼하다) 변수의 타..
발생일: 2011.12.16 문제: 요새 가장 관심있는 부분 중의 하나는, 큰 프로젝트에 적용할 수 있는 자바스크립트 프레임워크를 만드는 거다. (라이브러리 말고 프레임워크.) 짬짬히 시간을 내서 만들어보고 있는데, 생각처럼 쉽지가 않다. 처음엔 자바의 스프링 프레임워크에서 영감을 받아 시작했다가, 최근엔 Addy Osmani의 Large Scale Javascript Application에 대해 작성한 포스트를 보고 다시 고민에 빠졌다. 2년 전에 Nicholas Zakas가 이 주제에 대해 발표한 이후로, 최근에는 Addy Osmani가 이 분야에 대해 굉장히 전문적이고 많은 관심을 보이는 것 같다. 훌륭한 자료들이 많아 메모해둔다. 해결책: Scalable Javascript Application ..
발생일: 2011.11.10 문제: 얼마 전 작은 애플리케이션을 하나 만들었는데, 애플리케이션을 구성하는 모듈의 대부분을 모듈 패턴(Module Pattern)으로 구현했었다. 모듈 패턴은 아래 예제와 같이 즉시실행함수와 클로저를 이용해 유효범위를 만들어, private/public 개념을 흉내낸 패턴이다. var module = (function() { var private = 0; // private 멤버 (클로저 변수) function doPrivate() { private++; } // Public API return { doPublic: function() { doPrivate(); } }; }()); (좀 더 자세한 내용은 여기를 참조) 여튼, 개인적으로는 모듈 패턴을 사용하는 것을 꽤 선호했..
발생일: 2011.11.07 문제: 라이브러리 없이 각 노드의 관계를 비교하려고 하다보니 compareDocumentPosition() 이라는 메서드가 있더라. 비슷하게 contains()가 있다는 건 알고 있었는데, compareDocumentPosition()은 첨 들어본다. 자세히 알아보자. 해결책: compareDocumentPosition() 메서드는 W3C DOM Level 3 Core 스펙에 정의되어 있다. 현재 노드와 파라미터로 전달되는 노드와의 관계를 비교해, 비트마스크 연산을 통한 정수값을 리턴한다. node.compareDocumentPosition(otherNode) 와 같이 호출할 수 있으며, 각 노드의 관계에 따라 아래 값을 리턴한다. 비트 값 관계 000000 0 동일한 노드이..
발생일: 2011.11.03 문제: 페이지에 beforeunload 이벤트를 바인딩 해두고, location.href 속성을 변경했다. 이때 발생하는 beforeunload 프롬프트에서 '취소'를 누를 경우, IE7에서 '지정되지 않은 오류입니다 (Error not specified 또는 Unspecified error)'라는 문구로 에러가 발생한다. 문제가 뭘까? 해결책: 같은 문제에 대한 재현 방법은 아래와 같다. 1. beforeunload 이벤트를 바인딩하고, 2. 페이지 변경을 위해 location.href 속성에 새로운 값을 할당하거나, 또는 eval() 구문을 통해 페이지를 변경한다. 3. beforeunload 이벤트에 의해 발생하는 프롬프트에서 '취소'를 클릭한다. 4. IE7에서는 지정..
발생일: 2011.10.28 문제: HttpWatch나 파이어버그, 크롬 개발자 도구 등 네트워크 모니터링 툴을 보면, 분석된 네트워크 정보를 파일로 저장할 수 있는 내보내기(export) 기능이 있다. 그 중 대표적인 포맷이 .har 확장자를 갖는 HAR 포맷이다. HAR (HTTP Archive) 포맷은 뭘까~? 정리해봤다. 해결책: 간단하게 뭐? HAR 포맷은 HTTP 로딩 정보에 대한 파일 표준이다. HTTP 헤더, 파일 사이즈, 다운로드 타임 등을 포함한 HTTP 로딩 정보를 가지고 있으며, HTTP 모니터링 툴에서 수집된 정보를 내보내는 용도로 사용된다. 어떻게 만들어졌나? HAR 포맷이 탄생하게 된 배경에는, 구글에서 웹 성능을 담당하고 있고 YSlow의 개발자인 Steve Souders(이..
발생일: 2011.10.27 문제: window.performance.timing 객체에 대해 정리해보자. 해결책: 웹 애플리케이션의 성능이 이슈가 되면서, W3C는 애플리케이션의 성능을 측정할 수 있는 방법을 만들어내는 것을 목적으로 Web Performance Working Group을 구성했다. 2011년 10월 현재, 여러 스펙이 Draft 상태로 구축되었으며, 지금 알아볼 네비게이션과 엘리먼트에 접근하는 타이밍과 관련된 Navigation Timing 스펙은 ED(Editor's Draft) 상태에 있다. Navigation Timing API는 IE9~, FF7~, Chrome 등의 브라우저에 performance.timing 객체로 구현되어 있다. (구현 상태: http://caniuse.c..
발생일: 2011.10.26 문제: 그 동안 개발할 때엔 대부분 파이어폭스를 사용했었는데, 최근엔 크롬 개발자 도구도 파이어버그 못지 않게 훌륭한 것 같다. 파이어폭스보다 가볍고 빠른 데다, 개발자용 확장(extension)도 많아 더욱 끌린다. 마음에 든 참에 크롬 개발자 도구(Chrome Developer Tools)를 좀 자세히 보다가, 유용한 활용 팁들을 정리해봤다. 해결책: 1. 단축키 크롬 개발자 도구에서 유용한 간단한 단축키 몇 가지~ - 개발자 도구 열기(엘리먼트 패널) : Ctrl + Shift + C (맥일 경우 Command) - 개발자 도구 내 탭 전환 : Ctrl + [ or ] - 개발자 도구에서 콘솔 열고 닫기 : esc 도구를 여는 단축키가 3가지 있는데, 맥의 경우엔 기본 ..
발생일: 2011.10.25 문제: 엘리먼트(element)와 노드(node)의 정확한 차이가 뭘까? 해결책: W3C의 DOM(Document Object Model) 스펙에 따르면, 노드 인터페이스(Node Interface)는 DOM의 가장 기본이 되는 데이터 타입이다. 노드 인터페이스를 구현한 여러 오브젝트가 있으며, 노드 타입으로 구분할 수 있다. 예) 엘리먼트 노드, 텍스트 노드, 속성 노드 등등 정리: 노드는 엘리먼트의 상위 개념이다. * 참고: - 노드 인터페이스와 타입별 nodeName과 nodeValue의 리턴값을 확인하고자 한다면: Interface Node Spec - DOM Structure Model에 대한 상세 스펙을 보고자 한다면: DOM Structure Model Spec ..