(해당 포스팅은 '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 해야합니다.

 


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

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

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

+ Recent posts