(해당 포스팅은 '2019-04-30' 최종 수정되었습니다.)

다시 찾아온 히니입니다 :>

이번에는 React를 설치하는 과정을 설명하겠습니다.

저는 이번에 '생활코딩 인강', '노마드코더 인강', 'React 공식사이트 문서', 'React.js를 이용한 모던 프런트엔드 구축 책'으로 공부 한 후 정리합니다.

미리 말씀드리지만, 윈도우 기준으로 설명합니다.

(나중에 맥 기준 설명 추가할 수 있으면 할게요!)

 


( 흐름을 보시려면 맨 아래쪽의 '정리' 먼저 보셔도 됩니다. )

React를 실행해볼 수 있는 환경에는

1. 온라인 컴파일러

2. 기존 html 파일에 script로 불러오기

3. toolchian 설치

가 있습니다.

React 공식 사이트에서 가장 추천하는 방법은 2번인데요.

아무래도 간단하고 기존 사이트에 적용하기 쉬워서인 것 같은데,

생활코딩과 노마드코더에서는 3번을 이용해서 react를 설치합니다.

3번 방법이 제대로 된 설치이기 때문이죠!

그래서 저도 3번 방법 기준으로 정리해봤는데,

1번은 사이트만 알려드리면 돼서 공식사이트에서 추천하는 사이트의 url만 가져왔습니다.

 

 


 

1번 방법

온라인 컴파일러

 

URL만 올리겠습니다.

설치없이 들어가셔서 코드 짜고 그냥 실행하시면 됩니다!

https://codepen.io/pen?&editable=true&editors=0010 (codepen*)

https://codesandbox.io/s/new(codesandbox)

https://glitch.com/edit/#!/light-chef?path=README.md:1:0(Glitch)

 

 


 

2번 방법

script로 불러오기

 

 

2번 방법이 궁금하신 분은 공식사이트를 참조하시길 바랍니다.

 

https://reactjs.org/docs/add-react-to-a-website.html

 

간단히 코드 올려드리자면

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- Don't use this in production:-->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head>

<body>
    <div id="root"></div>
    <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
    <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. Read this section for a production-ready setup with JSX: https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project In a larger project, you can use an integrated toolchain that includes JSX instead: https://reactjs.org/docs/create-a-new-react-app.html You can also use React without JSX, in which case you can remove Babel: https://reactjs.org/docs/react-without-jsx.html -->
</body>

</html>

이러합니다.

 

 


 

 

3번 방법

Tool chain

 

Tool chain 이란 서로 관련 있는 개발 도구들의 집합입니다.

공식 사이트에서는 경우에 따라 여러가지 Tool chain을 추천합니다.

 

https://reactjs.org/docs/create-a-new-react-app.html#more-flexible-toolchains

 

 

저는 Create React App 이라는 Tool chain을 사용할겁니다.

이 또한 페이스북이 제공하는 툴입니다.

(페이스북 당신은 대체...)

Create React App은 하나의 명령으로 React 프로젝트를 시작할 수 있는 개발환경을 세팅해줍니다.

(내부적으로 Babel과 webpack을 사용한다고 되어있지만, 공식 사이트에서 이것들을 알 필요는 없다고 명시함)

Tool chain 중

'패키지 매니저' 인 Yarn, npm은 개발환경을 설치, 업데이트하기 쉽게 해줍니다.

'번들러' 인 webpack, parcel은 모듈러 코드를 작성하고 그것들을 작은 패키지로 묶어서 로딩시간을 줄여줍니다.

'컴파일러'인 babel 은 모던 자바스크립트가 오래된 브라우저에서도 작동하게 해줍니다.

 

 


 

 

과정

1. npm 설치

CreateReactApp을 깔려면 npm이 필요합니다.

[npm 링크]

 

1-1. node.js 설치

https://nodejs.org/ko/download/

위의 node.js 사이트에서 사용중인 운영체제에 맞춰 node.js를 설치합니다.

(node.js를 설치하면 npm도 함께 설치됩니다.)

 

1-2. 커맨더 결정

여기서, 앞으로 쓸 커맨더를 결정하세요!

윈도우에서는 cmd, 맥은 터미널, 공통으로 VSC(Visual Studio Code)을 추천합니다.

다른 커맨더도 많으니 각자에게 맞는 커맨더를 찾아서 준비하시길 바랍니다.

 

1-3. npm 버전 확인

커맨더에

npm -v

를 입력해 node.js가 깔려있는지, 버전은 무엇인지 확인해보세요.

2. create-react-app 설치하기

npm을 설치했다면 create-react-app을 설치할 차례입니다.

npm install -g create-react-app

이렇게 명령어를 입력하면 최신 버전이 설치됩니다.

 

 


 

버전을 선택해서 설치하고 싶으면

npm install -g create-react-app@2.1.8

이런식으로 명령어를 입력하면 됩니다.

여기서 -g 옵션은 어디서든지 create-react-app을 이용할 수 있게 해준다는 뜻입니다.

 

 

npx create-react-app my-app

npx로 설치하셔도 상관없습니다

npx는 npm을 설치하면 같이 설치되는데, 프로그램을 1회용으로 설치하는 특수 소프트웨어입니다.

npx로 설치하면 사용하고 지워버립니다.

실무적으로 할 때는 항상 최신버전을 사용할 수 있는 npx가 주로 사용됩니다

sudo npm create-react-app my-app

리눅스나 유닉스에서는 앞에 sudo만 붙이면 됩니다.

권한 오류 때문입니다.

 

 


 

3. 폴더 생성하기

설치 후에는 컴파일할 파일들을 담을 폴더를 생성해야합니다.

create-react-app practice_react // 'practice_react'이라는 react app폴더 만들기

create-react-app practice_react
// 'practice_react'이라는 react app폴더 만들기

 

4. 컴파일 시작

시작하려면

create-react-app 한 폴더로 이동 후 npm start 명령을 입력하면됩니다.

cd practice_react npm start

프로그램이 실행되면 localhost: 3000 페이지가 웹에 자동으로 띄워집니다.

 

 


npm이 아닌 yarn으로 실행시키려면

npm install -g yarn yarn start

yarn을 설치한 후 시작하면 됩니다.

yarn도 npm과 같은 패키지 매니저입니다.

yarn과 npm의 차이점 및 특성은 다음에 정리해보겠습니다!

[ yarn 링크 ]

[패키지 매니저 링크]

그 전까지 아래 사이트를 참조해주세요

https://happygrammer.tistory.com/154


 

* 반드시 create-react-app 적용한 그 폴더에서 패키지 매니저를 start 해야합니다.

 


저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

다음 포스팅은 '리액트 구조, 소스파일 (프로세스)' 입니다.

(해당 포스팅은 '2019-06-10' 최종 수정되었습니다.)

 

정말 오랜만에 웹으로 찾아온 히니입니다 :>

 

이번에는 React에 대해서 배우고 정리해보겠습니다.

저는 이번에 '생활코딩 인강', '노마드코더 인강', 'React 공식사이트 문서', 'React.js를 이용한 모던 프런트엔드 구축 책'으로 공부 한 후 정리합니다.

미리 말씀드리지만, 윈도우 기준으로 설명합니다.

(나중에 맥 기준 설명 추가할 수 있으면 할게요!)


우리는 필요에 의해 배웁니다.

또는 미래의 필요를 대비해서 배우기도 하죠!

저는 이후 케이스이지만, 어쨌든 우리가 왜 React를 배울까? 어떤 쓸모가 있을까?에 대해서 먼저 설명하겠습니다.

 

( 바쁘시면 맨 아래쪽의 '정리'만 보셔도 됩니다. )

 


 

일단, React 는 무엇일까요?

 

React는 자바스크립트 라이브러리로 UI를 만들기 위해 사용됩니다.

페이스북의 첫번째 오픈소스 프로젝트랍니다.

 


 

여기서 알 수 있는 첫번째 장점, '라이브러리로서 다른 소프트웨어들과 섞어서 쓸 수 있다' 입니다.

 

노마드코더에서는 '장고, 루비온레일즈, nodejs'와 함께 쓴다고 하더군요!

 


 

두번째 장점은, 가장 큰 장점이라고 생각되는 '구조가 편리하다' 입니다.

== '컴포넌트 기반 개발'

== '조합형 사용자 인터페이스' 이라고 봐도 되겠습니다.

 

생활코딩에서 가장 강조하는 부분인데,

긴 줄의 코드를 작은 요소(component)들로 나누어서 작업할 수 있게 되어있으므로

가독성, 재사용성이 좋고 유지보수가 편리합니다.

'분할 정복' 방식을 적용할 수 있습니다.

 

[분할 정복 방식 링크]

 


 

세번째 장점은, '배우기 쉽다' 입니다.

 

html과 자바스크립트(js)의 기초를 아는 사람이라면 쉽게 배울 수 있습니다.

React에서는 공식 사이트에서 추천하는 바와 같이

(반드시 그럴 필요는 없습니다.)

주로 JSX를 사용하여 코드를 작성하는데, JSX가 자바스크립트 기반이기 때문입니다.

 

JSX란 JavaScript eXtension 의 약자로 페이스북이 개발한 자바스크립트 라이브러리입니다.

 

[JSX 연결링크]

 


 

네번째 장점은, '데이터의 단방향 흐름' 입니다.

 

React에서는 데이터가 부모요소로부터 자식요소로만 전달됩니다.

(이는 이후에 state, props 파트에서 보실 수 있으며, 인지만 하고 계시면 됩니다.)

 

[State, Props 연결링크]

 

 


(건너뛰셔도 됩니다)

 

페이스북에서는 React를 내놓으면서 MVC 패턴의 한계를 느끼고,

다른 컨셉인 Flux/Redux를 제안했습니다.

 

http://webframeworks.kr/tutorials/react/flux/

WebFrameworks.kr - Flux와 Redux

https://www.zerocho.com/category/React/post/57b60e7fcfbef617003bf456

(React) 리덕스 패턴(Redux pattern), react-redux

 

[Flux, Redux 링크]

 

Flux와 Redux 설명이 되어있는 포스팅입니다.

간단히 설명하자면, MVC(양방향 데이터 흐름) 가 대규모 어플리케이션을 다루기에 너무 복잡해서

페이스북이 다른 컨셉인 Flux/Redux(단반향 데이터 흐름) 를 제안했다는 것입니다.


 

데이터가 단방향으로 흐르기 때문에 복잡하지 않음.

State가 꼬이지 않고 명료하게 드러난다.

 


 

다섯번째 장점은, '효과적인 업데이트' 입니다.

== '반응형 UI 렌더링'

 

페이지가 리로드될 때, 웹사이트의 모든 부분을 다시 띄운다면 시간이 오래 걸리고 비효율적이겠죠.

하지만 React는 시각요소인 DOM을 만들어서 이전과의 차이만큼만 효과적으로 업데이트합니다.

 

수명주기 메소드의 shouldComponentupdate() 를 보면 이해하실 수 있습니다.

[ shouldComponentupdate 링크 ]

 


 

여섯번째 장점, '방대한 정보' 입니다.

 

React는 이미 방대한 커뮤니티와 라이브러리, 오픈소스가 있으므로

문제가 있으면 참고할만한 곳이 많습니다.

 


 

 

 

저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

 

다음 포스팅은 'React 설치' 입니다.

 

+ Recent posts