발생일: 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.07 키워드: CSS3, 트랜지션, 애니메이션, transition, animation 문제: 얼마 전 회사 해커톤에선 립모션으로 비트박스를 만드는 걸 만들었었다.ㅎㅎ손가락으로 특정 비트를 선택하서 요기로 저기로 보내는 컨셉이었는데,커서에 글로우 효과가 계속 되도록 애니메이션을 주고 싶었다. 최근엔 CSS3는 많이 다뤄본 적이 없어서,트랜지션 속성을 쓰는 게 나을 지 애니메이션 속성을 쓰는 게 나을지 고민하면서메모해둔 게 있어 옮겨둔다. 해결책: http://www.kirupa.com/html5/css3_animations_vs_transitions.htm 트랜지션은 CSS 프로퍼티에 의해서만 발생한다.:hover 같은 슈도 클래스에 의해서이거나, 클래스를 넣고 빼는 등의 동작에 ..
발생일: 2013.09.23 키워드: 단순함, 애플, apple, simplicity 문제: 지인이 페이스북에 좋아요 했던 기사에 있던 내용인데,애플 디자이너인 조너선 아이브와의 인터뷰이다. 기억하고 있어야 할 만한 좋은 내용이란 생각에 메모해둔다~ 해결책: http://deulpul.net/m/3980584 단순함 "전에도 말한 바 있지만, 단순함이란... 거슬러 올라가자면... 무엇의 핵심을 말하려 할 때 도저히 피할 수 없고 빠뜨릴 수 없는 무언가를 발견한다면 바로 그게 단순함입니다. 많은 사람은 잡동사니로 채워져 있지 않는 것이 단순함이라고 생각합니다. 언제나 그런 것은 아닙니다. 진정한 단순함이란, 일을 계속 진행하다가 '아, 이제 더 이상 다른 합리적인 대안은 없군' 하는 단계에 이를 때 성취..
발생일: 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` 부분을..