발생일: 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 ..
발생일: 2011.10.12 문제: 버튼을 클릭하면 오디오가 재생되고, 오디오 재생 상태에 따라 버튼의 모양을 변경하려고 한다. 엘리먼트의 onplay / onended 이벤트를 컨트롤 해서, 재생될 때 아이콘의 모양을 변경하면 간단히 해결될 것 같았다. 대상이 되는 audio 엘리먼트에 간단하게 아래와 같이 이벤트를 할당했다. audio.addEventListener("play", function () { // 재생 모양으로 아이콘 변경 }, false); audio.addEventListener("ended", function () { // 대기 모양으로 아이콘 변경 }, false); 음.. 헌데,.. 최초로 버튼을 클릭했을 땐 play 이벤트가 잘 호출되는데, 두 번째 클릭(또는 두 번째 재생)부..
발생일: 2011.09.24 문제: 이번에 작은 크롬 익스텐션을 만들어봤다. (네이버 영어사전 크롬 익스텐션) 현재 보고 있는 페이지에 스크립트를 추가하고, 검색을 요청하면 크롬 익스텐션에서 비동기로 데이터를 가져와 출력하는 방식이다. 이를 위해 페이지가 로드되면, 스크립트가 head 태그에 삽입되고, 결과를 보여줄 레이어 엘리먼트를 만들어서 document.body에 추가되도록 했는데,.. 특정 페이지에서 레이어가 나오지 않는다. 프레임셋으로 나뉘어진 페이지의 경우엔 body가 존재하지 않아, 엘리먼트를 추가할 수 없는 것이 원인이었다. 웁쓰. 우째해야 할까? 좋은 꼼수를 찾아내서 메모해둔다. 해결책: 익스텐션에서 content_script 를 추가할 때, top 프레임에만 추가할 것인지, 모든 프레임..
발생일: 2011.09.20 문제: 터미널에서 입력 상태를 종료할 때엔, Ctrl+D를 눌러 종료한다. 그러다가 문득, Ctrl+D 가 무슨 뜻인지 궁금해졌다. 뭔가 d로 시작하는 약자인가? 그러고보면, Ctrl+C 랑은 어떤 차이가 있는 거지? 해결책: Ctrl+D (^D) 는 "end of file" 을 의미한다. 터미널이 입력 상태이고, 라인의 맨 처음일 때에만 작동한다. Ctrl+C (^C) 는 "interrupt" 를 의미한다. 실질적으로는 stop 명령을 내리는 INT signal 을 보낸다. 비슷하게 Ctrl+\ (^\) 로 QUIT signal을 보내서 종료할 수도 있다. Ctrl+Z (^Z) 는 현재 진행 중인 작업을 백그라운드로 보낸다. (종료되는 것이 아니다) #. 참고. - What..
발생일: 2011.09.20 문제: 얼마 전 팀 내에서 진행했던 미니 프로젝트가 어느 날 갑자기 크롬에서 돌아가지 않는다. 제티 서버에 올라가 있고, 웹소켓을 이용해 동작하는 서비스인데, 소켓 생성이 제대로 되지 않는 것 같다. 콘솔 로그를 보니 아래와 같은 에러가 발생한다. Unexpected response code: 400 400번이면 Bad Request 인데... 뭐가 문제일까? 크롬 버전을 확인해보니 14.0.835.163 이다. 해결책: 지난 2011년 9월 16일에 크롬 안정화 버전 14.0.835.163 이 배포되었다고 한다. 이번 배포에서는 크롬의 웹소켓 프로토콜 업그레이드가 있었다고 한다. 보안 문제 때문에 진행되었고, 기존의 웹소켓 프로토콜과 하위호환성을 지원하지는 않는다고 한다. ..
발생일: 2011.09.19 문제: 유닉스 가이드를 읽던 중 아래와 같은 예제 구문이 나왔다. $cat notexist > /dev/null 2>&1 저 /dev/null 2>&1 형태는 예전에 크론탭 동작하는 쉘에서도 언뜻 본 기억이 있는데,.. 정확히 무슨 뜻일까? 해결책: 위 구문을 이해하기 위해 일단 유닉스의 파일 디스크립터(File Descriptor)에 대해 알아보자. 유닉스 프로그램이 파일에 뭔가 작업을 하기 위해서는 일단 파일을 열어야 한다. 이 때, 유닉스는 열려있는 파일을 구분하기 위해 파일에 간단한 숫자를 붙인다. 이 숫자를 파일 디스크립터라고 하고, 0부터 9까지 존재한다. 유닉스 프로그램은 기본적으로 아래 3개의 "파일"을 열어둔다. - Standard Input (표준 입력, S..