node.js 에서 es2015 (es6), react (jsx) 문법 실행하기

서버사이드 node.js에서 es2015 (es6)문법과 react를 위한 jsx 문법을 실행할 경우가 있습니다. (ex : React의 서버 사이드 랜더링이 필요할 경우) 이때는 아래와 같이 babel을 설치하여 사용하시면 됩니다. 바벨 명령어 도구 설치 $ npm install -g babel-cli 로컬 모듈에 바벨 2015 지원

WebPack에서 Fetch API 적용하기

React를 WebPack으로 묶어서 프론트엔드를 개발하고 있는데, 백엔드와의 통신부분을 jQuery를 쓰다가 Fetch API로 바꾸게 되었다. (React Native와 코드 공유를 좀 더 높이기 위해서) 처음에 WebPack에 node-fetch를 붙이려고 했더니, 빌드에 문제가 생겨서 whatwg-fetch 패키지로 선회를 하게 되었다.

plugins: [
  new webpack.ProvidePlugin({
    'fetch': 'imports?this=&gt;global!exports?global.fetch!whatwg-fetch'
  })
]

plugins: [

new webpack.ProvidePlugin({

'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'

})

]

사용하려면 webpack config 파일에서

React를 browserify로 빌드하기

react의 구동 환경은 브라우저임에도 불구하고 react 컴포넌트들을 다운받아 보면 var React = require(‘react’); 이와 같이 시작하고 있는 것들을 심심찮게 보게 된다. 물론 이런 문법이 바로 브라우저에서 돌아갈리는 만무하다. 그래서 이럴때 필요한게 바로 browserify나 webpack이다. 개인적으로 browserify를 사용하므로 이에 대해 알아보자.

react-native init으로 새로운 프로젝트 생성시 실패할 때

$ react-native init ProjectName 위의 명령을 입력했다가 아래와 같은 상황에 마주쳤다

...

npm ERR! Darwin 13.4.0

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--save" "react-native"

npm ERR! node v4.0.0

npm ERR! npm v2.14.2

npm ERR! shasum check failed for /var/folders/zj/6kg3tgzj4tq59qkjby48f4cw0000gn/T/npm-6489-ef2af11b/registry.npmjs.org/which/-/which-1.1.2.tgz

npm ERR! Expected: 486c48af6dfecc7a7dcf9c655acf108d2dcbdf3d

npm ERR! Actual:   da39a3ee5e6b4b0d3255bfef95601890afd80709

npm ERR! From:     https://registry.npmjs.org/which/-/which-1.1.2.tgz

npmERR!

npm ERR! If you need help, you may report this error at:

npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:

npm ERR!     /Users/cesilphp/Downloads/react_app/npm-debug.log

`npm install --save react-native` failed

...

npm ERR! Darwin 13.4.0

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--save" "react-native"

npm ERR! node v4.0.0

npm ERR! npm v2.14.2

npm ERR! shasum check failed for /var/folders/zj/6kg3tgzj4tq59qkjby48f4cw0000gn/T/npm-6489-ef2af11b/registry.npmjs.org/which/-/which-1.1.2.tgz

npm ERR! Expected: 486c48af6dfecc7a7dcf9c655acf108d2dcbdf3d

npm ERR! Actual: da39a3ee5e6b4b0d3255bfef95601890afd80709

npm ERR! From: https://registry.npmjs.org/which/-/which-1.1.2.tgz

npmERR!

npm ERR! If you need help, you may report this error at:

npm ERR! <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:

npm ERR! /Users/cesilphp/Downloads/react_app/npm-debug.log

`npm install --save react-native` failed

npm에 문제가 있었는지 아래와 같은 명령어를 실행해서 해결하였다. $ sudo chown -R $(whoami) “$HOME/.npm” $ npm -g install npm 출처 : https://github.com/npm/npm/issues/7555