발생일: 2014.04.10 키워드: 그런트, Grunt, build, 빌드 문제: 그런트 빌드 시 커맨드라인 옵션으로 깃 해시를 넘기고 있는데, 간헐적으로 빌드에 실패한다. 예를 들어, 아래와 같은 식이다. $ grunt build --gitHash=9e14492 원인이 뭘까? 해결책: 빌드 코드에서는 아래와 같이 `option()`으로 옵션을 가져오고 있었다. grunt.option('gitHash’) 옵션 처리를 위해 Grunt 내부에서 `nopt`라는 라이브러리를 사용하는데, 이 라이브러리에서 자동으로 타입을 결정하고 있었던 것이 원인이었다. 해당 라이브러리에서 문자열로 넘어온 '3.10'이나 '9e123' 같은 옵션이 Number로 판단해 처리했기 때문이다. nopt 에는 knownOpt를 미리..
발생일: 2014.03.01 키워드: backbone, 백본, extend, defaults 문제: extend와 defaults 를 어떻게 구분해 사용하면 좋을까 고민하던 중에, 최근 팀에서 사용 방법을 정의했다. 해결책: extend는 주로 프로토타입 확장에서 사용했었는데, var fooPrototype = { getName: function () {}, setName: function () {} }; var barPrototype = _.extend(fooPrototype, { getName: function () {} }); // 하지만 이렇게 하면 `fooPrototype`의 값도 덮어쓰게 된다. fooPrototype.getName === barPrototype.getName; //—> tru..
발생일: 2014.01.27 키워드: npm, npmrc, npm 설정, sudo, root, npm global, npm -g 문제: 루트 권한으로 npm 글로벌 모듈을 설치할 때, 별도의 프록시를 사용하도록 설정하려고 한다. .npmrc 파일에 설정했더니 설정이 적용되지 않는다. 왜일까? 해결책: npm 에서 읽어오는 설정 파일의 경로는, $PREFIX/etc/npmrc 라고 했는데, $PREFIX 가 의미하는 건 노드의 설치 경로였다. 내 경우에는, 루트 권한으로 실행하는 경우 /usr/local/etc/npmrc 의 설정 파일을 참조하고 있었다. 아래 명령으로 prefix 값을 확인할 수 있다. $ npm config ls -l # 참고: https://github.com/npm/npm/issue..
발생일: 2014.05.11 키워드: npm, bitbucket, npm private repository 문제: npm 모듈을 bitbucket 의 private repository 로 설치하려고 한다. 기본적인 설치 방법은 아래 링크의 가이드를 따르면 된다. http://www.zev23.com/2014/03/npm-install-from-github-or-bitbucket_13.html 진행하다가 몇 번 삽질해서 잘 설치되지 않을 경우에 대한 체크리스트를 메모해둔다. 해결책: 1. 가져올 모듈의 package.json 에 repository 정의를 했는가? 2. private 리파지터리라면, ssh 인증을 추가했는가? 3. 혹시 아래처럼 적진 않았는지? $ npm install git@bitbuck..
발생일: 2014.12.01 키워드: 안드로이드 인앱 브라우저, android in app browser, 안드로이드 스크린 크기, android screen size, screenWidth, screenHeight, clientWidth, clientHeight, deivcePixelRatio 문제: 특정 페이지에서 screen.width 와 screen.height 값을 사용하는데, 일부 안드로이드 브라우저에서 해당 값이 디바이스의 크기가 아니라 해상도 기준으로 설정되는 문제가 있다. 해결책: 일부 안드로이드 기본 브라우저들은 스크린 너비, 높이 값이 디바이스 해상도 기준으로 설정되는 등 의도치 않은 값이 할당되어 있는 경우가 있다. 작업은 동료 A가 진행했는데, 보정 기준은 아래와 같다. - 기본적..
발생일: 2015.11.02 키워드: unicode, ES6, regexp, u flag, 정규식, Regular Expression 문제: JSConf EU 2015 컨퍼런스에서 Mathias Bynens가 발표한 ES6의 RegExp.prototype.unicode 동영상이 공유됐다. 발표 내용이 좋아서, 핵심적인 내용에 코드 샘플을 덧붙여 정리해봤다. 해결책: JSConf EU 2015: RegExp.prototype.unicode https://www.youtube.com/watch?v=raJcug_vW0c 자바스크립트에서도 캐릭터의 symbol을 직접 사용할 필요 없이, U+ 와 16진수 숫자(hexadecimal)로 코드 포인트를 직접 참조할 수 있다. 유니코드의 범위는 아래와 같이 크게 세 ..
발생일: 2015.10.21 키워드: react server rendering, 리액트 서버 렌더링, ReactDOMServer, ReactDOM, ReactDOMServer.renderToString 문제: 리액트 서버 렌더링을 구현해보려고 한다. 해결책: 먼저 전반적인 플로우에 대한 개념을 이해하면, 나머지를 적용하기 더 쉬울 것이다. S-1. 서버에 요청이 오면 클라이언트에 내려줄 데이터를 준비한 후, (A) S-2. React 컴포넌트를 사용해 HTML 문자열로 변환해둔다. (B) S-3. 클라이언트에는 데이터 (A)와 HTML 페이지 (B)를 함께 응답한다. C-1. 클라이언트에서는 응답받은 HTML을 출력하고, (B) C-2. 기존과 동일하게 리액트 컴포넌트를 시작하는데, C-3. 서버에서 내..
발생일: 2015.09.30 키워드: backbone, 백본, react, 리액트, backbone to react 문제: 우리 프로젝트는 백본을 기반해 자체 제작한 프레임워크를 사용하고 있다. 프로젝트를 처음 시작한 때는 2년 전이었고, 당시에 백본은 안정화되기도 했고 트렌드에도 전혀 뒤쳐지지 않은 기술이었다. 최근에는 (백본은 여전히 안정적이지만) 트렌드가 많이 변했다. 리액트가 등장하면서, Virtual DOM 개념으로 MVVM 에서 단일 플로우를 갖는 방향으로 패러다임도 변경되었다고 생각했다. 우리 프로젝트도 리액트로 전환해야 할까... 고민이다. 해결책: 우리 프로젝트는 규모도 있고, 안정화 단계에 들어가서 서비스 중인 상태이다. 개인적으론 코드 품질도 좋은 편이라 생각하고, 거의 대부분의 코드..
발생일: 2015.09.21 키워드: JavaScript Style Guide, JavaScript Convention, 자바스크립트 스타일 가이드, 자바스크립트 컨벤션 내용: React 가이드를 보다보니 기본적인 스타일은 Airbnb 의 스타일을 따른다고 되어 있다. https://github.com/airbnb/javascript 우리 프로젝트는 구글의 스타일 가이드를 참조해 가이드를 작성해뒀었는데, 에어비앤비의 스타일을 보니 생각했던 범위보다 훨씬 상세하게 가이드를 정리해뒀다. 몇 가지 동의하기 어려운 (이라기 보단 적용하기 싫은 이라고 하는 게 좋겠다) 가이드도 있었고. ㅎㅎ 아래 목록은 가이드 중에 기존 우리가 사용하던 가이드와 다른 몇 가지이다. - 함수를 정의할 땐, 표현식 (function..
발생일: 2015.06.03 키워드: React, 리액트, important 문제: React 에서 `!important`가 포함된 스타일을 적용하려고 한다. 대략 아래와 같은 코드이다. render() { var style = `{this.props.height} !important`; return ( ); } 헌데, 스타일 적용은 되는데, 변경된 이후에 업데이트가 되지 않는다. 왜일까? 해결책: 확인해보니, React 라이브러리에서 `!important` 를 설정하는 것까진 지원하고 있지만, 해당 속성을 업데이트하진 않고 있다고 한다. 페이스북 내에서도 이 속성을 설정할 지 말지에 대해 논쟁이 있는 것으로 보이고, 2015년 6월 현재 아직 이슈가 해결되지 않은 상태이다. https://github...