발생일: 2014.01.22 키워드: npm, shrinkwrap 문제: 노드에서 모든 모듈의 의존성 버전을 명확한 버전으로 확정하려고 한다. `package.json` 파일을 모두 수정하지 않고, 한 방에 처리할 수 있는 방법이 있을까? 해결책: $ npm shrinkwrap 위 명령은 `package.json`에 정의된 모듈의 버전을, 정확한 버전으로 정의한 맵 파일을 만든다. 맵 파일의 이름은 shrinkwrap.json 파일이다. `npm install`로 의존성 모듈을 인스톨할 때 `shrinkwrap.json` 파일이 있을 경우, 정해진 버전으로 인스톨한다~ 노드 모듈을 프로덕션에 내보낼 때 유용하게 사용할 수 있다. 자세한 건 아래 링크를 참고한다. https://npmjs.org/doc/s..
발생일: 2014.01.06 키워드: RequireJS, module 문제: 진행 중인 프로젝트에서는 RequireJS를 써서 모듈 관리를 하고 있다. 각 모듈에서 자기 자신의 모듈 이름을 가져와 처리하는 케이스가 생겼는데, 어떻게 하면 될까? 해결책: 매직 모듈이 있었다. `module`을 import 한 후, `id` 속성으로 가져오면 된다. define([ ‘module' ], function (module) { module.id; //—> 현재 모듈의 아이디 }); https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#wiki-magic
발생일: 2013.12.29 키워드: MutationObserver, DOM 감시, DOM 변경, 변경 추적 문제: 네이버 뉴스 사용자 댓글 간편보기 익스텐션(http://ohgyun.github.io/naver-news-user-comments-viewer/)을 만들었다. 뉴스 목록이 있고 간편보기 버튼이 각 엘리먼트의 옆에 붙어있는 UI이다. 이 버튼은 페이지가 로드된 후에 붙이도록 했는데, 뉴스를 ‘더보기’로 불러온 경우에도 버튼이 붙도록 처리가 필요했다. 특정 엘리먼트의 DOM Tree 변경을 감지하고 있다가, 렌더링할면 될 것 같다. 어떻게 하면 될까? 해결책: 검색해보니, DOM Tree 변경 감시를 위한 `MutationObserver`라는 API가 있다. https://developer.m..
발생일: 2013.11.23 키워드: RequireJS, r.js, 압축, optimizer, 최적화, minification 문제: 진행하고 있는 프로젝트에선 RequireJS를 사용하고 있다. 전반적으로 싱글 페이지 애플리케이션이지만, 별도로 분리되어 있는 페이지도 있어서, 스크립트의 공통 부분과 각 페이지에서 필요한 부분을 나눠서 압축하려고 한다. RequireJS에는 전용 압축 도구인 `r.js`가 있고, 구미에 맞게 처리할 수 있도록 다양한 옵션을 제공한다. 옵션을 자세히 살펴보고, 리서치하면서 정리한 메모들이다. 해결책: ## Require.js Optimizer http://requirejs.org/docs/optimization.html - 다이나믹으로 로드되는 모듈은 `include` 옵..
발생일: 2013.12.15 키워드: 익스텐션, extension, 웹폰트, webfont 문제: 네이버 영어사전 익스텐션(http://goo.gl/Ui7kBU)에 나눔고딕 웹폰트를 적용하려고 한다. 어떻게 하면 될까? 해결책: 일단, 간단 정리! 익스텐션의 컨텐트 스크립트에서 웹폰트 사용하기 1. 웹폰트를 익스텐션 내 임의의 디렉토리에 넣어둔다. 2. manifest 파일에서 `web_accessible_resources` 속성에 해당 경로를 추가한다. 3. 자바스크립트에서 동적으로 스타일을 추가한다. 영어사전의 경우 본문에 로드되는데, CSS에서는 익스텐션의 경로를 알 수 없기 때문이다. 3.1 `chrome.extension.getURL()`로 현재 익스텐션의 URL을 가져온다. 3.2 스타일 태그..
발생일: 2014.01.13 키워드: 웹 오디오, web audio 문제: 노트 정리하다가 2013년 2월 초에 정리해뒀던 노트를 발견했다.HTML5 웹 오디오 API를 사용할 때 참고했던 사이트 목록이다. 해결책: Getting started with web audio api http://www.html5rocks.com/en/tutorials/webaudio/intro/ 웹 오디오 API를 소개하는 튜토리얼 전반적인 부분을 쉽게 이해할 수 있게 설명해뒀다. Developing game audio with the web audio api http://www.html5rocks.com/en/tutorials/webaudio/games/ 웹 오디오 API로 게임 사운드를 구현하는 것에 대한 튜토리얼 게임 ..
발생일: 2012.07.15 키워드: 즉시실행함수, IIFE 문제: 즉시실행함수의 패턴에 대한 글인데,예전에 팀 메일로 공유하려고 정리해뒀던 건가보다. 지금은 익숙한 코드라 대수롭게 보이지 않지만,다른 누군가에겐 생소할 수도 있을만한 내용이라 옮겨둔다. (메일로 보냈던 내용을 그대로 옮긴 거라 어투가 평소 포스트 스타일과 다르다.^^;; 대신 실명만 이니셜로 변경~! 그 때 팀 사람들이 보고 싶넹~ ㅠ_ㅠ) 해결책: 즉시실행함수 표현식(IIFE, Immediately-Invoked Function Expression) 패턴 오전에 차트 수정할 게 좀 있어서 라파엘 코드를 들춰보다가, 표현식으로 함수를 정의한 케이스가 있어서 공유드려요. 지난 번에 S의 코드리뷰 할 때에도 비슷한 얘기가 나왔었고,얼마 전에..
발생일: 2013.04.17 키워드: Firefox, 파이어폭스, Gaia, XUL, zool 문제: 무엇 때문이었는지 잘 생각이 나지 않지만, `XUL`에 대해 알아보면서 정리해뒀던 메모다. 브라우저의 렌더링 엔진으로 웹킷이 대세임에도,파이어폭스에서 웹킷을 도입하지 않는 이유에 대한 인터뷰가 인상적이었다. 노트를 정리하다가 발견해서 옮겨둔다. 해결책: Gaia- https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia- Firefox OS 의 유저 인터페이스 레이어- 단순히 Gecko로 구현된 표준 웹 API를 사용해 운영체제에 접근할 수 있는 인터페이스일 뿐이다. (참고로, Gecko는 레이아웃 엔진. HTML, CSS, XU..