꿀벌개발일지

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

발생일: 2015.05.14 키워드: Module, 모듈, import, export, module.exports, export default 내용: ES6에는 언어 레벨에서 모듈을 정의할 수 있는 방법을 제공한다. `import`와 `export` 키워드로 외부 모듈을 가져오거나 설정할 수 있으며, 비동기 모델을 포함하고 있다. (모듈이 로드될 때까지 실행되지 않는다) 하지만, 2015년 5월 현재, 모든 브라우저에 구현되어 있지 않다. ES6의 모듈 시스템을 사용하려면, ES6 Module Transpiler, Babel, Traceur 등과 같은 트랜스파일러를 사용해야 한다. 먼저, 모듈을 정의하는 `export` 문법은 아래와 같다. export name1, name2, ..., nameN; ex..

http://ohgyun.com/586 에 이어서... Immutable은 React와 효과적으로 동작할 수 있다. React 에선, `shouldComponentUpdate()`메서드를 오버라이드하면, 컴포넌트를 다시 렌더링할 것인지를 판단할 때 훅으로 동작한다. 렌더링 전에 이전 값을 캐시해뒀다가(momoize) 비교하면, 불필요한 렌더링을 효과적으로 걸러낼 수 있을 것이다. 기본값은 아래처럼 true 이다. 여기에 정말 값이 변경되었는지를 추가하면 좀 더 효율적으로 처리할 수 있는데, 대략 아래와 같은 코드일 것이다. 이 코드를 사용하는 믹스인이 바로 PureRenderMinxin 이다. 이 믹스인은 `shouldComponentUpdate()`를 오버라이드 했고, 현재/이전 값을 비교해서 값이 동..