발생일: 2013.09.13 문제: 얼마 전에 데일이 크롬 개발자 도구의 콘솔에 움직이는 GIF 같은 걸 넣은 사이트를 보여줬다.오. 콘솔에서 애니메이션이 돌아가는데, 정말 완전 덕스럽다. ㅎㅎ 그나저나, 크롬 개발자 도구 콘솔에 스타일을 지정할 수 있었던건가? 해결책: 아래처럼 `%c` 값으로 콘솔에 CSS 스타일을 적용할 수 있다. console.log('%cHello, color log!', 'color:red'); 이참에 나도 재밌는 걸 만들어봤다.콘솔에 이미지를 출력하는 모듈이다~http://ohgyun.github.io/console-text-image/example/example.html 나중에 이스터 에그로 쓰면 좋을 듯^^ # 참고카나리 버전에서 스타일 적용이 가능하다는 애디 오사미의 포..
console.table : 콘솔에 테이블 형태로 출력하기
발생일: 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.07.24 문제: Git에서 원하는 파일 변경이나 커밋만 가져오려면 어떻게 해야할까? 해결책: 두 가지 방법이 있다. git cherry-pick 커밋 커밋 대상에 내가 원하는 변경만 있다면 - 해당 커밋의 변경만 가져온다. 이전 변경 내용이 있었다면, 이건 적용되지 않는다. 이게 머지툴이 있으면 BASE 파일 (적용하려는 커밋의 바로 조상 커밋)을 가져와서 하는 거라 해결 가능하지만, 이 때는 파일 diff 만으론 처리할 수 없다. - 커밋되지 않게 하려면 -n 옵션을 쓴다. git checkout 커밋 파일명 원하는 파일만 가져오는 거 이건 파일을 덮어써서 바로 stage 상태로 보낸다. 바로 덮어써지는 게 싫으면 --patch 옵션을 쓰면 된다. http://stackoverflo..
자바스크립트 메모리 프로파일링
발생일: 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..
발생일: 2013.07.31 문제: 개인 프로젝트 서버는 노드 서버와 몽고 디비로 구현했다.몽고 디비의 래퍼로 몽구스(mongoose)를 사용하고 있는데,관계형 디비에 익숙하다보니 여간 삽질을 하고 있는 게 아니다. 여튼, 어떤 문서에 in 쿼리로 버추얼 속성을 넘겨서 조회하려고 하는데,이상하게 조회가 되지 않는다. 왜일까? 해결책: 버추얼 속성이기 때문에 쿼리 대상이 되지 않은 게 문제였다.쿼리를 조회하려면 버추얼 속성을 사용하면 안된다. in 쿼리http://stackoverflow.com/questions/5818303/how-do-i-perform-this-query-in-mongoose-mongodb-for-node-jshttp://stackoverflow.com/questions/8303900..
발생일: 2013.08.25 문제: 얼마 전에 립모션(Leap Motion)을 구입했다.문서나 예제도 많고, JavaScript API도 있어서 바로 실행해보기 아주 쉽더라.^^ 전체적인 개념을 빠르게 이해할 수 있게 큼직한 개념을 정리해뒀다. 해결책: 브라우저 동작 방식 - 서버에서 웹소켓 서버를 띄우고 디바이스에서 읽은 정보를 Push 하는 구조- 클라이언트(노드, 브라우저)에서는 웹소켓 클라이언트를 생성해 해당 메시지를 받도록 구현했다. Frame - 이벤트를 처리하는 프레임은 디바이스 프레임과 애니메이션 프레임으로 나눴다.- 디바이스 프레임은 립모션 디바이스에서 발생하는 모든 프레임을 받는다.- 애니메이션 프레임은 브라우저에서 requestAnimation 의 타이밍에 맞춰 가장 최근에 받은 프레..