발생일: 2013.06.24 문제: 자바스크립트 템플릿 엔진 중의 하나인 `Handlebars`에 대한 간단한 소개이다. 팀에서 어떤 템플릿 엔진을 쓸 지 정하지 않았을 무렵에,내가 개인적으로 좋아하는 핸들바를 추천하기 위해 메모해뒀던 것이다. 지금 팀에서는 `Mustache`를 쓰고 있지만,난 여전히 개인 프로젝트에는 핸들바를 즐겨쓴다. ㅎㅎ 해결책: 페이지: http://handlebarsjs.com/ 깃헙: https://github.com/wycats/handlebars.js/ 템플릿 엔진 선택 가이드 http://garann.github.io/template-chooser/ 자바스크립트 템플릿 사용 가이드: http://net.tutsplus.com/tutorials/javascript-ajax..
발생일: 2013.06.20 문제: 팀에서 제이쿼리 모바일을 쓰기로 결정하고, 처음 시작해보면서 메모해뒀던 내용이다.노트를 정리하다가 있어 옮겨둔다. 해결책: 먼저, 간단한 소개를 보고,http://view.jquerymobile.com/1.3.1/dist/demos/intro/ 초간단 샘플을 만들어볼 수 있다.http://learn.jquery.com/jquery-mobile/getting-started/ 다음으로 jQuery 문서를 보면서 시작할 수 있다.http://jquerymobile.com/demos/1.2.0/docs/about/intro.html 페이지 페이지를 구성하려면, `data-role="page"` 속성을 준다.페이지에는 전체 사이트에서 유일한 id를 부여한다. 한 페이지에 여러 ..
발생일: 2013.06.26 문제: 오늘 스택오버플로우 뉴스레터에 흥미로운 질문이 하나 있더라. http://stackoverflow.com/questions/17207712/when-to-use-try-in-a-method-name 메서드명이 `try`로 시작한다면, 어떤 걸 의미하는 건지,이에 대한 공식적인 문서가 있는 지에 대한 질문이었다. 실제로 나도 종종 `tryX` 형태의 메서드 이름을 사용했는데,내 의도는 주로 '실패할 가능성이 있는 작업을 시도'한다는 거였다. 정말 공식적인 문서가 있는 걸까? 해결책: 위 질문은 C# 카테고리였는데,이에 대한 마이크로소프트의 가이드가 있다. http://msdn.microsoft.com/en-us/library/vstudio/ms229009%28v=vs.1..
발생일: 2013.06.24 문제: 이번 프로젝트에는 제이쿼리 모바일을 쓰게 됐다.그냥 말로만 듣고 있다가, 자세히 살펴보는 건 처음이다. 페이지가 로드되거나 한 페이지에서 다른 페이지로 이동할 때,발생하는 이벤트 목록이나 순서가 좀 헷갈린다. 잘 정리해서 한 눈에 볼 수 없을까? 해결책: jQuery Mobile 의 이벤트 순서를 확인할 수 있는 페이지를 만들었다. http://ohgyun.github.io/jqm-events-order/index.html 콘솔을 열고, 로그에 찍히는 이벤트명을 확인해보면 된다. 관련 코드는 아래에서 참고할 수 있다.https://github.com/ohgyun/jqm-events-order
발생일: 2013.06.19 문제: 노드에서 파일을 읽어 Buffer 객체에 저장한다던가, 브라우저에서 File API로 파일 처리를 하는 등,최근에는 자바스크립트에서도 바이너리 데이터를 처리할 수 있게 됐다. 지금까지는 주로 래핑한 객체의 API만 사용해왔었는데,오늘은 시간을 내서 JavaScript Typed Array (자바스크립트 타입 배열)에 대해 자세히 살펴봤다. 해결책: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays MDN의 Typed arrays 페이지를 보면서 메모한 거라 원문의 내용과 거의 동일하다. 개요 웹 애플리케이션이 점점 더 파워풀 해지면서, 오디오나 비디오 처리, 웹소켓으로 로우 데이터에 접근하는 등자..
발생일: 2013.06.18 문제: HTML5의 WebStorage API 중 하나인 Local Storage에 대해 살펴봤다. 해결책: 개요 HTML5에서는 클라이언트에 데이터를 저장하는 2개의 객체를 제공한다.하나의 세션 단위로 데이터를 저장하는 SessionStorage 와,만료 기간이 없는 LocalStorage 가 있다. 두 가지 모두 key/value 쌍으로 저장하며, 사용 방법은 거의 비슷하다.여기서는 Local Strorage 에 대해 자세히 살펴보려고 한다. 간단 사용법 사용법은 정말 간단하다.전역으로 할당되어 있는 localStorage의 메서드를 사용하며, 데이터는 key/value 쌍으로 구성된다. 아래와 같이 setItem() 과 getItem()으로 값을 저장하거나 가져올 수 있..
발생일: 2013.04.29 문제: 지난 주 스터디 주제는 정규식이었다. 이미 정규식은 모두 익숙하고,챕터의 내용 자체가 짧기도 해서 금방 끝내고 커피 마시러 갔더랬다.ㅎㅎ 스터디 때 몇 가지 알려드리려고 메모해둔 게 있어 옮겨둔다.나름대로 특징적인 내용을 뽑아 정리했던 건데, 다시 읽어보니 딱히 그렇지도 않더라.그냥 복습 삼아 한 번 주-욱 읽어보면 좋다. ^^ 해결책: ES5에서 리터럴 정의는 항상 새로운 객체를 리턴한다. var pat = /abc/; ES5에서는 이 구문이 실행될 때마다 새 RegExp 객체를 생성한다. lastIndex 속성이 잘못 사용될 것을 우려한 의도적인 설계이다. /a/ === /a/; //--> false 구형 IE에서는 항상 같은 객체를 리턴한다. 유니코드 문자열 사용..
발생일: 2013.04.29 문제: 요새 C Programming Language 책을 읽고 있는데,책 초반부에 Parameter 와 Argument 의 차이점에 대한 설명이 있다. 두 가지가 서로 다른 의미를 갖고 있지만,그 동안은 거의 구분하지 않고 사용하고 있었던 것 같다. 실제로 얼마 전 스터디에서는,두 가지를 같은 의미로 혼용해서 설명하다가 의사 전달이 제대로 되지 않았던 경험도 있다. 책에서 두 단어의 차이를 명확하게 설명하고 있어, 그 구문을 옮겨둔다. 해결책: We well generally use parameter for a variable named in the parenthesized list in a function definition, and argument for the valu..
발생일: 2013.04.29 문제: 노드 모듈에서 상대적인 파일의 위치를 찾는 방법이 좀 헷갈린다. 이해하기 쉽게, 간단히 메모해둔다. 해결책: 1. arguments 로 파일명을 전달받고, 해당 파일의 위치를 가져오려고 한다면. 노드가 현재 실행되고 있는 디렉토리 정보는 아래 명령으로 알 수 있다. process.cwd(); // process 모듈은 전역이다. 상대 경로로 파일명을 전달받았다면, 아래와 같이 해당 파일의 절대 경로를 가져올 수 있다. var path = require('path'); path.join( process.cwd(), filename ); 2. 현재 파일을 기준으로 다른 파일을 읽어오려 한다면. 현재 파일의 디렉토리는 `__dirname` 변수에 저장되어 있다. 따라서, 아..
발생일: 2013.04.29 문제: Grunt 로 테스트를 빌드 과정에 포함시키려 한다. 헌데, grunt-contrib-qunit 나 grunt-contrib-jasmine 을 써서 빌드에 포함하려고 하는데,phantomjs 가 설치되어 있지 않다며 실행되지 않는다. 이미 phantomjs 를 설치해뒀는데, 아무래도 제대로 인식되지 않는 모양이다. 어떻게 해결해야 할까? 해결책: grunt-contrib-qunit 과 grunt-contrib-jasmine 모듈은,headless 브라우저인 phantomjs 위에서 동작한다. 두 모듈 모두 phantomjs 노드 모듈에 의존하고 있는데,이 모듈은 다른 노드 모듈에서 phantomjs를 사용할 수 있도록 API를 제공하는 어댑터이다. 두 모듈이 제대로 실..