꿀벌개발일지

발생일: 2015.05.15 키워드: 깃헙, github, rawgit, gitraw, script 문제: 라이브러리나 샘플 페이지를 테스트할 때 주로 JSBin(http://jsbin.com/) 같은 도구를 사용하는데, 깃헙 라이브러리에서 자바스크립트 raw 파일을 참조해 페이지에 넣으면 아래와 같은 메시지가 나오면서 실행되지 않는다. because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. raw 파일의 응답 컨텐츠 타입이 text/plain 이라 브라우저에서 실행하지 않는 게 문제다. 지금까진 그냥 raw 파일의 내용을 태그 안에 붙여넣어서 실행했는데, 이 방법 정말 귀찮다. 누군가..

발생일: 2015.05.22 키워드: node, node.js, clipboard, 클립보드, 복사 문제: 업무 중에 특정 빌드 후에 동일 템플릿으로 Pull Request 를 보내는 프로세스가 있는데, 나도 모르게 항상 기존 PR에서 템플릿을 검색하고 있더라. 빌드 후에 템플릿을 자동으로 클립보드에 복사해주면 편할 것 같다. 노드에서 특정 문자열을 클립보드에 복사할 수 있나? 해결책: 아래와 같이 자식 프로세스를 생성해서 `pbcopy` 명령을 호출하는 식으로 해결할 수 있다. var template = ...; var pbcopy = function (data) { var proc = require('child_process').spawn('pbcopy'); proc.stdin.write(data);..

발생일: 2015.05.25 키워드: React, 리액트 문제: React 에서 DOM 렌더링 없이 컴포넌트만 마운트시키려고 한다. 단순히 document 나 window 의 이벤트만 받아서 처리할 목적이다. 어떻게 하면 될까? 해결책: render() 메서드에서 `null` 이나 `false`를 리턴하면 된다. class extends React.Component { componentDidMount() { // 여기서 document 나 window 의 이벤트를 처리 } render() { return null; } });

발생일: 2015.05.17 키워드: gulp, browserify, 걸프, 브라우저리파이, multiple entries, merge-stream, merge stream 문제: browserify 로 파일을 병합할 때, 시작 파일이 여러 개인 경우를 처리하려고 한다. 예를 들면, 시작 파일 `main1.js`, `main2.js`으로부터 `main1.bundle.js`, `main2.bundle.js`로 떨어지게 말이다. 그리고, 이 태스크가 완전히 종료된 후에 다른 태스크가 실행될 수 있어야 한다. 뭔가 스트림을 머지한 후에 리턴해야 할 것 같은데, 어떻게 하면 될까? 해결책: 스트림을 머지하는 목적의 유틸리티 모듈인 `merge-stream`이 있고, 이 모듈을 이용하면 해결할 수 있다. 바로 코..

발생일: 2015.05.16 키워드: gulp, browser-sync, browserSync, 걸프, 브라우저싱크, livereload, 라이브리로드 문제: 기존엔 그런트를 사용하고 있었고, 파일 변경 시 브라우저를 새로고침할 땐 livereload 모듈을 사용하고 있었다. 걸프에도 동일한 태스크가 있을 텐데, 어떻게 추가하면 될까? 해결책: browser-sync 모듈을 사용하면 된다. $ npm install browser-sync --save-dev 빌드 코드를 보면서 설명하는 게 이해하기 쉬울 듯 하다. var gulp = require('gulp'); var express = require('express'); var browserSync = require('browser-sync'); // ..

발생일: 2015.05.17 키워드: Gulp, 걸프, 에러 핸들링, error handling 문제: 걸프 빌드 시 에러가 나면 프로세스가 모두 종료되어 버린다. 좀 더 효과적으로 에러 처리를 할 수 있는 방법 없을까? 해결책: 걸프는 스트림을 파이프로 연결해 빌드를 수행하기 때문에, 에러가 발생하면 파이프를 타고 전달돼 전체 프로세스가 종료되어 버린다. 만약, watch 를 걸어둔 상태였다면, 문법 에러 정도로 프로세스가 종료되어버려 아주 불편할 수 있다. 아래처럼 간단한 에러 핸들러를 추가하는 방법으로, 에러가 발생했을 때 원하는 방식으로 처리하고, 다른 태스크는 정상적으로 진행되도록 할 수 있다. function handleError(err) { console.log(err); this.emit(..

발생일: 2015.05.17 키워드: gulp, browserify, gulp + browserify, vinly-source-stream, 걸프, 브라우저리파이 문제: 모듈의 의존성 관리는 browserify 를 사용하고 있는데, gulp 빌드에 포함하려고 한다. browserify 모듈을 파이프에 끼어넣어 봤는데, 의도처럼 잘 되진 않는다. 어떻게 하면 될까? 해결책: browserify 는 gulp 플러그인이 아니기 때문에, browserify 의 스트림을 걸프에서 사용하는 vinyl 객체로 변경해줘야 하며, 이 용도로 vinyl-source-stream 모듈이 추가로 필요하다. 대략의 빌드 스크립트는 아래와 같다. var gulp = require('gulp'); var browserify = r..

발생일: 2015.05.16 키워드: grunt to gulp, gulp, grunt, 걸프, 그런트 문제: 프로젝트의 빌드 툴을 그런트에서 걸프로 변경해보려고 한다. 그런트에 이미 굉장히 익숙하고 사용하는데에도 전혀 불편함이 없는데다, 여전히 활발히 사용되고 있는 빌드 도구라 사실 바꾸지 않아도 될 것 같긴 했다. 그치만, 빠른 속도로 성장해서 이미 많은 프로젝트의 빌드 도구로 자리잡고 있는데다, '그런트보다 성능이 좋다'라는 얘기를 들어와서 변경을 검토해보려고 한다. 특히 최근 프로젝트의 규모가 커지면서 그런트 빌드 시간이 많이 늘어났는데, 빌드 시간을 단축할 수 있다는 얘기에 더 혹 하게 되더라. 걸프는 어떤 특징이 있고, 뭐가 좋은가? 해결책: 걸프에 대한 자료는 이미 검색하면 많이 나와서, 여기..

발생일: 2015.05.16 키워드: Google Recaptcha, Captcha, 캡차, 리캡차 문제: 진행하고 있는 서비스에 구글 리캡차를 적용하려고 한다. "리"캡차이지만, 현재 활용되고 있는 방식은 예전과 다르게 원클릭으로 사람인지 판단하는 방식이다. 브라우저의 인터랙션을 보고 사용자인지를 판단하는 것 같은데, 생각보다 뭔가 더 똑똑한 알고리즘이 내장되어 있을 것 같다.ㅎㅎ 어떻게 적용하면 되지? 해결책: 발급과 적용 과정 모두 엄청 간단하다. 1. 리캡차 개발자 페이지에서 캡차를 등록한다. https://developers.google.com/recaptcha/docs/start 서비스명과 캡차가 노출될 도메인 목록을 작성한 후에 서브밋하면 바로 키가 발급된다. 2. 등록이 완료되면, 공개키와..

발생일: 2015.05.15 키워드: 서브라임 텍스트, Sublime Text, JsFormat, JsBeautifier, JsBeautify, .jsbeautirc 문제: 진행하고 있는 개인 프로젝트에 ES6와 React 구문을 함께 사용하려고 한다. 에디터론 서브라임 텍스트를 사용하고 있고, JsFormat 플러그인으로 자동 포맷을 설정하고 있었다. 헌데, React로 작성한 코드의 XML 부분이 올바르게 포맷팅되지 않는다. 좋은 방법이 없을까? 해결책: JsFormat은 내부적으로 JsBeautifier를 사용하고 있는데, 살펴보니 `e4x`라는 옵션이 추가됐다. XML 구문을 무시하고 beautify 하란 옵션이다. 문서를 더 살펴보니 옵션 뿐 아니라, `.jsbeautirc` 파일로 설정 정보를..