꿀벌개발일지

발생일: 2013.12.02 문제: 진행 중인 프로젝트에서 백본(Backbone) 라이브러리를 사용하고 있는데,대상 API가 완벽히 RESTful 하진 않다. RESTful 한 부분만 백본의 `sync` 프로세스를 적용할 것인지,아니면 아예 사용하지 않을 것인지에 대해 토의가 필요했다. 유지보수를 생각해서 팀에서는 사용하지 않는 것으로 결정했다.나중에 새 멤버가 들어오면 구현되어 있는 모습을 이해하기 어려울 수 있고,어떤 건 `sync`로 구현하고 어떤 건 그냥 구현하는 룰이 명확하지 않을 거라는 것 때문이었다. 여튼, 토의 준비 과정에서 정리해뒀던 `sync` 과정을 메모해둔다. 해결책: `Backbone.sync()`를 호출하는 각 메서드는 아래와 같이 동작한다. fetch()1. 서버에 'GET' ..

발생일: 2013.10.10 문제: 이번 ABC Talk 주제론 `node.js 시작하기`를 선정했다.node.js에 대해 얘기는 많이 들어봤지만, 실제로 코드 작업을 해보지 않은 사람들을 대상으로 했다. 장단점이나 특징에 대해선 검색하면 쉽게 찾을 수 있어서,이론은 짧게 설명하고 실제 작업 시 기억해야할 만한 것들만 전달하기로 했다. 실습 위주로 진행하고 간단한 걸 뚝딱 만들어내서,'별 거 아니군~'이란 느낌을 주는 게 목적이었는데, 잘 전달됐는지 모르겠다.ㅎㅎ 여튼, 슬라이드랑 예제 링크를 메모해둔다. 해결책: Node.js 시작하기 from Ohgyun Ahn 실습 예제: https://github.com/ohgyun/nsrank/

발생일: 2013.09.26 키워드: 노드웹킷, Node Webkit, NW, NW.js, 일렉트론, Electron, 크로미엄, Chromium, 크로스 플랫폼, cross platform 문제: 얼마 전에 노드웹킷(Node Webkit)을 사용해 프로토타이핑 하는 작업을 맡았었다. 나도 처음 접해보는 거였고, 살펴보면서 메모해둔 게 있어 옮겨둔다. 해결책: https://github.com/rogerwang/node-webkit 소개 크로미엄과 노드를 활용해 네이티브 애플리케이션을 만들 수 있는 환경.HTML, JavaScript, CSS 같은 웹 기술로 네이티브 앱을 만들 수 있다. node-webkit slidehttps://speakerdeck.com/zcbenz/node-webkit-app-r..

발생일: 2013.10.04 문제: 어디서 보고 읽게 된 건진 잘 기억나지 않지만,노드에서 자식 프로세스를 실행하는 `spawn`과 `exec` 메서드의 차이를 잘 정리해둔 포스트가 있었다. 포스트를 읽으면서 메모해둔 게 있어 옮겨둔다. 해결책: http://www.hacksparrow.com/difference-between-spawn-and-exec-of-node-js-child_process.html `spawn`과 `exec`가 하는 작업은 동일하지만, `spawn`은 스트림(stream)을 리턴하고, `exec`는 버퍼(buffer)를 리턴한다. `spawn`은 `stdout`과 `stderr` 스트림을 포함한 객체를 리턴한다.자식 프로세스의 표준 출력을 `stdout` 객체로 받아 처리할 수 ..

발생일: 2013.09.13 문제: 얼마 전에 데일이 크롬 개발자 도구의 콘솔에 움직이는 GIF 같은 걸 넣은 사이트를 보여줬다.오. 콘솔에서 애니메이션이 돌아가는데, 정말 완전 덕스럽다. ㅎㅎ 그나저나, 크롬 개발자 도구 콘솔에 스타일을 지정할 수 있었던건가? 해결책: 아래처럼 `%c` 값으로 콘솔에 CSS 스타일을 적용할 수 있다. console.log('%cHello, color log!', 'color:red'); 이참에 나도 재밌는 걸 만들어봤다.콘솔에 이미지를 출력하는 모듈이다~http://ohgyun.github.io/console-text-image/example/example.html 나중에 이스터 에그로 쓰면 좋을 듯^^ # 참고카나리 버전에서 스타일 적용이 가능하다는 애디 오사미의 포..

발생일: 2013.09.26 문제: 깃헙에서 팔로잉하는 사람들이 Semantic UI(http://semantic-ui.com/)를 즐겨찾기 해두는 걸 보고,해당 페이지를 둘러보다 콘솔 로그를 보게 됐다. 어랏. 콘솔에 로그가 테이블 형태로 출력되네~이런 기능이 있었던가? 해결책: 아직 API 페이지에는 명시되어 있지 않는데, `console.table()`이란 있더라. `console.table(tableData);` 로 호출하면 되고,`tableData`는 key/value 형태의 값을 포함한 배열이어야 한다. 자세한 예제는 아래 이미지를 참고! Semantic UI에서는 `console.group`이랑 같이 섞어서 출력했는데,이렇게 하니 로그도 깔끔하게 보이고 자세한 내용을 디버깅하기도 좋더라. 잘..

발생일: 2013.07.19 문제: `URL.createObjectURL()`이란 게 있었네.요고 뭐지? 해결책: https://developer.mozilla.org/en-US/docs/Web/API/window.URL.createObjectURL 특정 파일 객체나 로컬 파일 또는 데이터의 참조를 가리키는 새로운 객체 URL을 생성한다.생성한 값은 현재 창이나, 객체를 생성한 문서 내에서만 유효하다.새 객체 URL은 특정 File 객체나 Blob 객체로 표현할 수 있다. var objectURL = window.URL.createObjectURL(blob); 매개변수로 전달한 blob는 URL을 생성할 File 객체나 Blob 객체이다.생서된 objectURL은 해당 파일의 전체 내용을 URL 텍스트로..

발생일: 2013.07.19 문제: 자바스크립트에서도 Blob를 지원하나? 해결책: https://developer.mozilla.org/en-US/docs/Web/API/Blob?redirectlocale=en-US&redirectslug=DOM%2FBlob Blob 객체는 변하지 않는, 로우 데이터의 파일과 같은 객체이다.Blob는 자바스크립트 네이티브 형식으로 필요없는 데이터를 표현하는데 쓰인다. File 인터페이스가 Blob 기반으로 되어 있고, blob의 기능을 상속받고 확장하고 있다. Blob를 생성하는 가장 쉬운 방법은 `Blob` 생성자를 호출하는 방법이다.이미 생성되어 있는 다른 blob 객체에서 `slice()`를 호출해 생성할 수도 있기도 하다. Blob 객체에는 size와 type ..

발생일: 2013.07.11 문제: 크로스 브라우징 이슈를 해결하기 위해 CORS 프록시 서버를 구현해야 한다.서버에서 추가할 작업이 많지 않다고 들었는데, 어떤 것들을 구현해주면 될까? 해결책: 아래 링크를 참고하면 된다.http://www.html5rocks.com/en/tutorials/cors/ 아래는 위 링크의 내용 중 기억할 만한 몇 가지만 메모해둔 것이다. withCredentials CORS는 기본적으로 쿠키를 보내거나 설정하지 않는다. 쿠키를 보내거나 설정하고 싶다면, `withCredentials` 속성을 설정한다. xhr 객체에도 설정해야 하고, 서버에서도 `Access-Control-Allow-Credentions` 헤더에 true를 할당해서 보내야 한다. xhr.withCreden..

발생일: 2013.09.12 키워드: 자바스크립트 메모리 프로파일링, JavaScript Memory Profiling, Web Page Memory Analysis, 웹 페이지 메모리 분석, node-inspector, node.js memory profiling, 노드 메모리 프로파일링 문제: 열 번째 ABC Talk에서 발표한 주제.웹페이지 메모리 분석과 관리라는 제목으로, 자바스크립트 메모리 프로파일링에 대한 내용이다. 해결책: JavaScript Memory Profiling from Ohgyun Ahn 아래 링크에서 데모를 확인할 수 있다. https://github.com/ohgyun/javascript-memory-profiling 2017.02.01 추가 - node.js 인 경우, no..