[ React ] React 의 특징 , create-react-app 시작하기

React ?

A JavaScrirpt library for building user interfaces

( 리액트는 UI 를 만들기 위한 자바스크립트 라이브러리입니다. )

 

웹 세계는 정신없이 변화하고 있다.

무언가가 순식간에 시장을 휘업잡는듯 하다가 언제 그랬냐는 듯 사라진다.

 

React는 현재 최강의 웹이라고 할 수 있는 Facebook이 만든 Javascript라이브러리이다.

React는 단숨에 수많은 개발자들을 사로잡았다.

Facebook을 비롯하여 Airbnb, Netflix, Dropbox, Twitter, Evernote, Uber 등 세계를 선도하는 서비스들이 React를 사용한다.

 

 

/ 특징

# component 

앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능하다.

유지가능한 앱을 만드는데 적합 

# JSX

선언적이라고 번역되는 Declarative한 개발을 도와주는 도구이다.

간단하게 말해 한눈에 이해하기 쉬운 개발을 만들어 준다.

 

# Virtual DOM 

React의 가장 큰 특징이자 뜨거운 논쟁을 불러일으키는 대상.

아주 자세하고 이해가 쏙쏙 되는 velopert님의 설명을 참고하길 바란다.

너무너무너무 좋다 ~! 

https://velopert.com/3236

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

 

 

 

 

 

준비 

Node.JS

https://nodejs.org/en/ 

Node.js

/ 설치 확인

node -v

npm 

Node Packaged Manager의 줄임말로

Node.js로 만들어진 프로그램을 쉽게 설치해주는 일종의 '앱스토어'

: node.js 를 사용하여 개발한 앱들을 명령어를 사용하여 손쉽게 설치할 수 있는 프로그램

: Node.js 설치 시 함께 설치되므로 따로 설치 할 필요 없다.

 

/ 설치 확인

npm -v

 

npx

npx는 npm 5.2.0 버전부터 새로 추가된 도구이다.

 

npx가 존재하지 않았을 경우, npm을 통해 react app을 생성하였다.

npm의 로컬 바이너리와 상호작용하는 것을 빠르고 간편하게 해주지 못하는 단점들의 해결방법으로 여러가지가 있었지만, scripts에 넣어야하는 등의 귀찮음이 있었다. 게다가 --를 이용하여 인자를 넘겨야했다. 

 

또한 create-react-app 의 경우,

npm으로 global 하게 설치하게되면

 

1. 자주 사용하지 않는 무거운 패키지가 local storage에 남는다.

2. local storage에 있는 패키지도 새로운 버전이 나왔을 시 이미 존재한 패키지를 제거하고 다시 설치해야 한다.

 

.. .. 내 기준에서는 너무너무 귀찮았다 !

 

이러한 npm의 단점을 보완해줄 수 있었던 최고의 해결책이 npx이다.

우리가 로컬로 설치된 것들을 사용하기 위해서 오직 $npx mocha 만 입력하면 된다.

만약 추가적인 과정이 필요하거나 shell auto-fallback을 설정한다면, 프로젝트 디렉토리 안에서

$mocha 를 이용하면 된다.

 

npx는 최신 버전에 해당하는 패키지를 설치하여 실행하고, 실행된 이후에 해당 패키지를 제거한다.

 

 

/ npx 버전 확인

npx -v

 

/ npx 로 react-app 생성

 

npx create-react-app {app 이름}

 

 

 

Create React App

React를 사용하다보면 ES의 최신버전가지 사용해야하는 경우가 존재한다.

하지만 몇몇 브라우저에서는 최신버전을 지원해주지 않는다. ( 특히 IE .. )

그렇기 때문에 우리는 webpack 이나 babel 등 과 같은 방법이 필요하다.

:  우리는 이제  'create-react-app'을 통해서 하나의 명령어로 react web app 을 set up 할 수 있다.

> npx create-react-app {app 이름}

 

React App Start ! 

> npm start

Compiled successfully!
 
You can now view movie-app in the browser.
 
  Local:            http://localhost:3000/
  On Your Network:  http:///
 
Note that the development build is not optimized.
To create a production build, use npm run build.

 

 

 

 

 

 

 

 

 

 

 

 

참고문서 )

https://ko.reactjs.org/docs/create-a-new-react-app.html

https://medium.com/@RianCommunity/react%EC%9D%98-%ED%83%84%EC%83%9D%EB%B0%B0%EA%B2%BD%EA%B3%BC-%ED%8A%B9%EC%A7%95-4190d47a28f

https://ssungkang.tistory.com/entry/React-React-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-create-react-app

https://velog.io/@dev_glennn/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9-React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD