발생일: 2013.01.02 키워드: 크롬 개발자 도구, Chrome Developer Tools, 네트워크 패널, Network panel 문제: 노트 정리하다 오래 전에 정리해둔 문서를 발견했다. 크롬 개발자 도구의 네트워크 패널에 대한 정리인데,패널의 각 요소에 대한 설명이 명확히 되어있지 않아 정리를 시작했던 걸로 기억한다. 2011년 말에 생성하고 마지막 업데이트 2013년 1월이라 나온다.꽤 오래된 노트이지만, 아직도 내용은 유효한 것 같아 옮겨둔다. 해결책: 크롬 개발자 도구 네트워크 패널의 각 속성 Size : 실제 응답 사이즈(헤더를 포함한 사이즈이며, gzip으로 압축된 경우 압축된 사이즈를 나타낸다) Content : 응답 컨텐츠(body) 사이즈, 압축하기 전 컨텐츠의 사이즈 Tim..
발생일: 2013.09.24 키워드: 노드, Node.js, Q, 프라미스, Promises 문제: 최근 진행 중인 프로젝트엔 모든 비동기 작업에 프라미스 패턴을 적용해 구현하고 있다. 프라미스 구현체로는 Q 라이브러리(https://github.com/kriskowal/q)를 사용하고 있다. 노드 서버에도 Q로 프라미스 패턴을 도입했는데,Q에서는 노드 콜백 패턴을 쉽게 프라미스 객체로 변경할 수 있는 메서드를 제공하고 있어서 편리하다. 해결책: https://github.com/kriskowal/q#adapting-node 노드의 콜백은 function (err, result) 형태의 패턴을 따른다.q 라이브러리에서는 이런 콜백을 프라미스 객체로 래핑할 수 있게 다양한 방법을 제공하고 있다. nfcal..
발생일: 2013.12.04 키워드: jquery, cache, 캐시, ifModified, Last-Modified 문제: 프로젝트에서 `$.ajax`를 래핑하는 모듈을 만들어서 적용하려고 한다.중복 요청을 제거하고, 필요에 따라 응답을 캐시하는 역할을 하게 될 거다. 그러고보니, `jquery.ajax`에도 캐시 옵션이 있었던 것 같은데,얘는 정확히 어떻게 동작하는 건지 궁금하다. 해결책: `$.ajax`의 옵션에 `ifModified` 속성이 있다. `ifModified` 속성 (기본값 false) 서버 응답에 대해 헤더를 설정하는 방식으로, 클라이언트에서 응답 데이터를 캐시하고 있진 않는다. - `ifModified`를 설정하고 서버 응답에서 `Last-Modified` 헤더가 있는 경우, 요청 ..
발생일: 2013.03.06 키워드: Audio, 오디오 문제: 예전에 오디오 라이브러리를 만들면서 HTML5 Audio에 대해 리서치했던 내용이다.정리한 지 좀 된 내용이긴 하지만, 노트를 정리하다 발견해서 옮겨둔다. :) 해결책: - 지원 범위http://caniuse.com/#search=Audio - 오디오 태그는 아래와 같이 사용한다. - 음원을 불러와 재생한다.new Audio("chime.wav").play(); - 재생할 수 있는가? canPlayType(타입) 예) audio.canPlayType('audio/wav'); 재생이 가능하면, "maybe" 또는 "probably"를 반환한다.재생할 수 없으면 빈 문자열을 반환한다. 문자열을 리턴하는 것은, 근본적으로 오디오와 비디오 코덱이 ..
발생일: 2013.11.26 키워드: 노드 패킷, Node packet, 찰스, Charles 문제: 노드로 리버스 프록시 역할을 하는 서버를 하나 돌리고 있는데,HTTP 프록시 도구에서 노드 패킷을 확인해보고 싶다. 어떻게 하면 될까? 해결책: 난 주로 찰스(Charles, http://www.charlesproxy.com/)를 쓰고 있는데,노드 프로세스에서 보내는 HTTP 패킷은 찰스에서 확인할 수 없다. 노드의 HTTP 요청을 래핑해주는 모듈이 여럿 있는데,이번 프로젝트에서는 `request` 모듈(https://github.com/mikeal/request)을 사용했다. 요청을 보낼 때 프록시로 HTTP 프록시 도구를 바라보도록 설정하는 방법으로 해결할 수 있다. http://afuchs.tumb..
발생일: 2013.07.17 키워드: 에러 스택, 에러 처리, error stack, log, 로그 파일, console.log 문제: 프로젝트에선 `console.log` 대신 별도의 로거 파일을 구현해서 사용하고 있다.그러다보니, 로그나 에러를 출력할 때 로그 발생 위치가 `logger.js`가 표시된다. 로그를 출력할 때, 로거를 호출한 파일을 출력할 수 없을까~? 해결책: http://stackoverflow.com/questions/1340872/how-to-get-javascript-caller-function-line-number-how-to-get-javascript-caller 위 링크에서 잘 설명해주고 있는데,로거에서 에러를 던지고 에러 스택의 문자열을 파싱하는 방식이다. 우리 프로젝트..
발생일: 2013.10.23 키워드: 크롬 익스텐션, Chrome Extension, 배포, 업데이트, auto update 문제: 웹스토어를 통하지 않고 직접 호스팅하는 크롬 익스텐션에 자동 업데이트를 적용하고 싶다.어떻게 하면 될까~? 해결책: http://developer.chrome.com/extensions/autoupdate.html 1. 익스텐션의 `manifest.json`에 `update_url`을 설정한다. 2. 호스팅하고 있는 서버에 `update_url`에 명시한 `xml` 형식의 파일을 올려둔다. 아래와 같은 형식이다. 3. 해당 경로에 패키징한 익스텐션 파일을 업로드한다. 4. 익스텐션이 설치된 각 사용자의 브라우저에서는 주기적(수 시간 단위)으로 `update_url`을 조회해..
발생일: 2013.11.15 문제: `npm install` 할 때, `production`으로 정의된 것만 설치할 수 없나~? 해결책: `--production` 옵션을 주는 방식으로 설치할 수 있다. `$ npm install --production` 노드 환경 변수에 `production` 값을 줘도 된다. `$ export NODE_ENV=production` http://stackoverflow.com/questions/9268259/how-do-you-install-development-only-npm-modules-for-node-js-package-json
발생일: 2013.11.20 문제: 프라미스 패턴 구현체 중 하나인 `Q` 라이브러리(https://github.com/kriskowal/q) 코드를 보다보니,`deprecated` 된 API를 구현하는 좋은 아이디어가 있어 메모해둔다. 해결책: Q 라이브러리는 어떤 API가 deprecated 되었을 때 아래와 같이 구현하고 있다. promise.valueOf = deprecate(function () { if (messages) { return promise; } var nearerValue = nearer(resolvedPromise); if (isPromise(nearerValue)) { resolvedPromise = nearerValue; // shorten chain } return near..
발생일: 2013.12.05 문제: 리버스 프록시 역할을 하는 노드 서버를 하나 띄워뒀다. 헌데, 클라이언트에서 `$.ajax()` 로 POST 요청을 보내면 서버에서 제대로 전달하지 못하는 경우가 있다. 왜 그런 걸까~ 해결책: 요청은 '클라이언트 --> 노드 프록시 --> 실제 API 서버'로 전달되고,노드 프록시는 클라이언트의 헤더와 바디를 그대로 API 서버로 전달한다. 클라이언트에서 노드 프록시로는 잘 전달되지만 프록시에서 API 서버로 제대로 전달되지 않았는데,확인해보니, 원인은 `jquery`에서 POST 데이터를 유니코드로 인코딩할 때, 공백을 `+`로 변환하는 것 때문이었다. http://code.jquery.com/jquery-1.10.2.js 코드에서 `jQuery.param` 부분을..