< React(리액트) 개발환경 설정 >
1. node.js 설치 (react는 node.js 기반에서 구동됨)
https://nodejs.org/ko/ #최신버전으로 설치
# Node.js 를 설치하면 npm이 함께 설치되며, react 사용시 npm이 필요함.
# NPM : Node Package Modules
npm 최신 버전으로 업데이트
npm install -g npm
버전확인
node -v
npm –v
2. 코딩 에디터 설치
https://code.visualstudio.com/
(좌하단 버튼으로 react 관련 플러그인(Plugin) 설치)
3. React 사용 방법 2가지 : webpack 이용, browserify 이용
4. Global Package 설치 (webpack만 우선 설치해도 됨)
$ npm install -g babel webpack webpack-dev-server
Babel
: ECMAScript6 를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용 할 수 있게 해줍니다.
Webpack
: 모듈 번들러로서, Browserify 처럼 브라우저 위에서 import (require) 을 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐줍니다.
webpack-dev-server
: wepback에서 지원하는 간단한 개발서버로서 별도의 서버를 구축하지 않고도 웹서버를 열 수 있으며 hot-loader를 통하여 코드가 수정될때마다 자동으로 리로드되게 할 수 있습니다.
5. react 프로젝트 생성
1) 프로젝트 폴더 생성
mkdir myWebApp
cd myWebApp
2) 프로젝트 초기화.
npm init
…
Is this ok? (yes) yes
생성된 package.json 파일의 scripts 부분을 아래와 같이 바꿔서 나중에 npm으로 개발웹 서버를 실행시킬수 있도록 합니다.
...
"scripts": {
"dev-server": "webpack-dev-server"
}
...
# NPM은 package.json 파일을 이용해서 프로젝트에 대한 설정을 관리.
6 . react 설치
npm install --save-dev react react-dom
# webpack을 이용하면 작성한 모든 Javascript 파일이 bundel.js로 묶이기 때문에 --save-dev 옵션을 이용하여 개발용으로 설치.
# --save 옵션 : 모듈 설치시 package.json 을 자동으로 업데이트, package.json 이 존재하는 위치에서 실행
# react 입문자는 7~9 생략 후 10번으로 넘어가자.
# 보다 간단히 react app 을 생성하고 싶다면 마지막에 설명한 create-react-app 사용
7. Bootstrap 설치
npm install --save bootstrap react-bootstrap
SCSS 설치
npm install --save-dev sass-loader css-loader style-loader node-sass
8 .Babel 설치
npm install --save-dev babel-core babel-loader babel-cli babel-preset-react babel-preset-es2015 babel-preset-stage-0 babel-polyfill babel-preset-env file-loader url-loader babel-preset-react-hmre
설정
프로젝트 폴더에 .babelrc파일을 생성하고 아래와 같이 presets 값을 넣어줍니다.
.babelrc
{
"presets": ["env", "react", "es2015", "stage-0"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
* Babel 추가 정보 : https://nodejs.github.io/nodejs-ko/articles/2015/05/11/story-about-js-and-babel/
9. webpack 설치
npm install --save-dev react-hot-loader webpack webpack-dev-server webpack-dev-middleware webpack-hot-middleware
설정
프로젝트 폴더에 webpack 설정파일 webpack.config.js 을 생성하고 아래의 내용을 입력
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'webpack-hot-middleware/client',
'./src/index.js'
],
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: {
hot: true,
inline: true,
port: 4000,
contentBase: __dirname + '/public/',
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot-loader', 'babel-loader'],
include: path.join(__dirname, 'src')
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader' // use ! to chain loaders
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192' // inline base64 URLs for <=8k images, direct URLs for the rest
}
]
},
plugins: [ new webpack.HotModuleReplacementPlugin() ]
}
10. react app 만들기
1) public, src 폴더 생성
cd myWebApp
프로젝트 폴더에 public, src 폴더를 생성합니다.
webpack.config.js에서 개발 서버가 바라볼 기본 폴더가 public입니다.
2) public 폴더에 index.html 파일을 아래와 같이 생성합니다.
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React App with Babel + webpack</title>
</head>
<body>
<div id="contents"></div>
<script src="bundle.js"></script>
</body>
</html>
3) src 폴더에 components 폴더를 생성합니다.
src/components 에 Contents.react.js 파일을 생성하고 아래의 내용을 입력합니다.
src/components/Contents.react.js
import React from 'react';
class Contents extends React.Component {
render() {
return ( <h1>React + Webpack + Babel First Apps</h1> );
}
}
11. 개발 서버 실행
cd myWebApp
npm run dev-server
브라우져로 결과 확인 : http://localhost:4000에 접속
--------------------------------------------------------------------------------------
[ create-react-app 을 사용하는 방법 ]
* 리액트(react) 개발자 : Node, yarn, Webpack, Babel 등의 도구를 설치하여 프로젝트를 설정
* 리액트(react) 입문자 : 페이스북에서 제공해주는 도구 create-react-app 을 사용하여 react app 생성을 빠르게 진행할 수 있음.
* Yarn : 개선된 버전의 npm
1) create-react-app 설치 (윈도우 환경)
npm install -g create-react-app
또는
yarn global add create-react-app
리눅스, 혹은 macOS 유저여서 nvm 을 통하여 Node.js 를 설치했다면 yarn global 설치가 제대로 작동하기 위해선 다음 커맨드를 사전에 입력.
# macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
# Linux:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc
2) react app 생성
cd 'your project folder name'
create-react-app hello-react
--> 이때 react 가 설치되어 있지 않으면 hello-react 폴더가 만들어지면서 react 및 관련 모듈이 자동으로 설치되기 시작함.
--------------------------------------------------------------------------
Creating a new React app in D:\react_test\hello-react.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
Success! Created hello-react at D:\react_test\hello-react
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!
-----------------------------------------------------------------------------------
cd hello-react
npm start
또는
yarn start
브라우져 창(http://localhost:3000/)에 react 초기 페이지 나타남.
'프로그래밍(Programming) > 리액트(React)' 카테고리의 다른 글
| React(리액트)_Counter_with Redux(리덕스) (0) | 2018.12.26 |
|---|---|
| React(리액트) : 상태관리 라이브러리 MobX 개념 (0) | 2018.10.13 |
| React(리액트) ; Lifecycle API (0) | 2018.08.28 |
| React(리액트) ; props & state (0) | 2018.08.28 |
| React(리액트) 구조와 기초문법 (0) | 2018.08.28 |