발생일: 2011.12.30 문제: 엘리먼트에 hover 효과(롤오버)가 적용되어 있는 경우, CSS hover 로 구현된 것인지, mouseover/mouseout 이벤트로 효과를 준 것인지 쉽게 구별할 수 있는 방법이 있을까? 해결책: 마크업 담당자에게 문의하던 과정에서 알게된 방법~ ^^ 별 것 아닌 것 같지만, 요고요고 유용하다.ㅎㅎ 1. 개발자 도구의 엘리먼트 패널에서 대상 엘리먼트를 inspect 한다. 2. 대상 엘리먼트에 마우스 오버/아웃 해본다. 3. 클래스나 스타일의 변경이 직접적으로 보인다면 자바스크립트로 변경한 것. 아닐 경우, CSS에서 :hover 클래스로 호버 효과를 준 것이다. # 기타 참고. - CSS 가상 클래스 우선순위: http://cssdesign.kr/forum/v..
발생일: 2011.12.19 문제: 종종 어떤 서비스들의 Ajax 패킷을 보다보면, X-Requested-With 헤더에 XMLHttpRequest 값이 포함된 걸 볼 수 있다. Ajax로 요청하는 트위터의 타임라인을 예로 들어보면, 아래와 같이 요청 헤더에 X-Requested-With 헤더가 있다. GET /1/statuses/home_timeline.json?... HTTP/1.1 Host: api.twitter.com Connection: keep-alive X-Requested-With: XMLHttpRequest User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.12 Saf..
발생일: 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.12.16 문제: 좋은 URI란 무엇일까? 지난 시간들을 되돌아보면, 아무 생각 없이 습관적으로 URI를 지정한 적이 많았던 것 같다. 최근 '웹을 지탱하는 기술'이라는 책을 읽다가 URI 설계에 대한 좋은 내용이 있어 메모해둔다. 해결책: 좋은 URI란 무엇인가? 웹의 발명자 팀 버너스 리는 1998년 'Cool URIs don't change'라는 웹 페이지를 발표했다. http://www.w3.org/Provider/Style/URI.html 그렇다면, 좀처럼 변하지 않는 Cool URI를 만들기 위해서는 어떻게 해야할까? 1. 프로그래밍 언어에 의존적인 확장자를 이용하지 않는다. 2. 구현에 의존적인 경로명을 이용하지 않는다. 3. 프로그래밍 언어의 메서드명을 이용하지 않는다. ..
발생일: 2011.12.01 문제: git 으로 관리하고 있는 소스 폴더가 있는데, 사용하지 않는 파일을 git bash가 아닌 윈도우 폴더에서 삭제했다. 파일 삭제 후 커밋하고 github으로 푸시했는데, 이상하게 폴더에서 삭제한 파일은 github에 반영이 되어 있지 않더라. 이상하다고 생각하고, 매뉴얼을 찾아보다가 git rm 이란 명령어가 있는 걸 발견했다. rm 도 add 랑 같은 개념이라고 생각하고 가볍게 git rm -r . 명령어를 날렸는데, 폴더 내 모든 파일이 삭제되더라. 오... 갓. 해결책: git reset --hard HEAD 역시 스택오버플로우. ㅎㅎ http://stackoverflow.com/questions/2125710/how-to-revert-a-git-rm-r
발생일: 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 동일한 노드이..