ㄷㅣㅆㅣ's Amusement

[React] Node.js + React -- 1. 초간단 프로젝트 만들기 본문

Programming/React

[React] Node.js + React -- 1. 초간단 프로젝트 만들기

ㄷㅣㅆㅣ 2017. 4. 13. 19:29

[React] Node.js + React -- 1. 초간단 프로젝트 만들기

React를 처음 공부할 때에는 Rails에서 했으나, 요즘 트렌드가 Node (Node.js)이고 앞으로도 계속 그러할 것이므로... 

Node.js도 공부하면서 다시 포스팅을 시작한다. (구글 형님들의 V8엔진은 역시 후덜덜)


(React가 무엇인지 궁금하다면 클릭!!)


일단 놀라운 것은, Node.js에서 React를 돌리게끔 하는것은 Rails의 그것보다 만배는 더 쉽다는 것이었다!!

(개인차가 있을 수 있으나, 대부분 Ruby보다 JavaScript가 더 친숙할 것이라는 가정 하에...)

(물논 나에게 React를 가르쳐줬던 사수는 Ruby on Rails의 절대고수였었다.)


1. Node.js 설치

 - 공식 URL :  https://nodejs.org/ko/ 

 - 이 포스트에서 쓰는 버전 :  Mac Ver. , Windows(x64) Ver. , Linux Ver. , Raspberry-Pi Ver.

 (우분투를 대충 10년 써보니, 왜 LTS를 써야하는지 생각하지도 않고 바로 LTS를 설치한다.  그러다보니 모든 LTS가 붙는 것에대한 선호.)


2. npm 사용하기

- Rails보다 편리하다고 느낀 이유의 9할은 npm덕분이다.. 노드(Node.js)를 사용하는 형님들이 어찌나 친절하게 도와주는지 내가 할게 거의 없다. 다음의 명령으로 react용 프로젝트를 만들어주는 놈을 설치한다.


$ sudo npm install -g create-react-app
cs


- '-g' 옵션은 global의 약자로, 특정 어플(Node.js 어플)만이 아니라 전역적으로 쓰겠다는 것이다. 그리고 /usr/local/ 영역을 사용하므로 super user 권한으로 실행해야 한다.

- 다음과 같은 결과가 나오면 성공. 

/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
/usr/local/lib
└─┬ create-react-app@1.3.0
  ├─┬ chalk@1.1.3
  │ ├── ansi-styles@2.2.1
  │ ├── escape-string-regexp@1.0.5
  │ ├─┬ has-ansi@2.0.0
  │ │ └── ansi-regex@2.1.1
  │ ├── strip-ansi@3.0.1
  │ └── supports-color@2.0.0
  ├─┬ commander@2.9.0
  │ └── graceful-readlink@1.0.1
  ├─┬ cross-spawn@4.0.2
  │ ├─┬ lru-cache@4.0.2
  │ │ ├── pseudomap@1.0.2
  │ │ └── yallist@2.1.2
  │ └─┬ which@1.2.14
  │   └── isexe@2.0.0
  ├─┬ fs-extra@1.0.0
  │ ├── graceful-fs@4.1.11
  │ ├── jsonfile@2.4.0
  │ └── klaw@1.3.1
  ├─┬ hyperquest@2.1.2
  │ ├─┬ buffer-from@0.1.1
  │ │ └─┬ is-array-buffer-x@1.2.1
  │ │   ├─┬ has-to-string-tag-x@1.2.0
  │ │   │ └── has-symbol-support-x@1.2.0
  │ │   ├─┬ is-object-like-x@1.2.0
  │ │   │ ├── is-function-x@1.2.0
  │ │   │ └── is-primitive@2.0.0
  │ │   └─┬ to-string-tag-x@1.2.0
  │ │     ├── lodash.isnull@3.0.0
  │ │     └── validate.io-undefined@1.0.3
  │ ├─┬ duplexer2@0.0.2
  │ │ └─┬ readable-stream@1.1.14
  │ │   ├── isarray@0.0.1
  │ │   └── string_decoder@0.10.31
  │ └─┬ through2@0.6.5
  │   ├── readable-stream@1.0.34
  │   └── xtend@4.0.1
  ├── semver@5.3.0
  ├─┬ tar-pack@3.4.0
  │ ├─┬ debug@2.6.3
  │ │ └── ms@0.7.2
  │ ├─┬ fstream@1.0.11
  │ │ ├── inherits@2.0.3
  │ │ └─┬ mkdirp@0.5.1
  │ │   └── minimist@0.0.8
  │ ├─┬ fstream-ignore@1.0.5
  │ │ └─┬ minimatch@3.0.3
  │ │   └─┬ brace-expansion@1.1.7
  │ │     ├── balanced-match@0.4.2
  │ │     └── concat-map@0.0.1
  │ ├─┬ once@1.4.0
  │ │ └── wrappy@1.0.2
  │ ├─┬ readable-stream@2.2.9
  │ │ ├── buffer-shims@1.0.0
  │ │ ├── core-util-is@1.0.2
  │ │ ├── isarray@1.0.0
  │ │ ├── process-nextick-args@1.0.7
  │ │ ├── string_decoder@1.0.0
  │ │ └── util-deprecate@1.0.2
  │ ├─┬ rimraf@2.6.1
  │ │ └─┬ glob@7.1.1
  │ │   ├── fs.realpath@1.0.0
  │ │   ├── inflight@1.0.6
  │ │   └── path-is-absolute@1.0.1
  │ ├─┬ tar@2.2.1
  │ │ └── block-stream@0.0.9
  │ └── uid-number@0.0.6
  ├─┬ tmp@0.0.31
  │ └── os-tmpdir@1.0.2
  └─┬ validate-npm-package-name@3.0.0
    └── builtins@1.0.3



3. react 앱 만들기


$ create-react-app nodereact
cs

- 매우 간단하다. 다만 현재 최신인 1.3.0버전에서는 대문자 사용을 막아놓았다.

- 설치가 끝나면 다음과 같이 실행방법도 친절하게 알려준다.

Success! Created nodereact at /Users/childc/Documents/react/blog/nodereact

Inside that directory, you can run several commands:


  npm start

    Starts the development server.


  npm run build

    Bundles the app into static files for production.


  npm test

    Starts the test runner.


  npm run eject

    Removes this tool and copies build dependencies, configuration files

    and scripts into the app directory. If you do this, you can’t go back!


We suggest that you begin by typing:


  cd nodereact

  npm start


Happy hacking!

- 그런데 마지막에 "Happy hacking!"은 무슨 의미란 말인가... 내가 Happy hacking keyboard 2 pro를 사용하긴 하는데...


4. 서버 띄워보기.

1
2
$ cd nodereact
$ npm start
cs

- 진짜 간단하다. 너무쉽다.. 그동안 왜 rails를 T,.T

- 사용하는 환경이나 OS에 따라 다르겠지만, 웬만하면 다음과같은 결과가 나오면서 자동으로 브라우저가 열린다.

Compiled successfully!


The app is running at:


  http://localhost:3000/


Note that the development build is not optimized.

To create a production build, use npm run build.


5. Safari 화면.



0 Comments
댓글쓰기 폼