[React] 기본 설정

1. 디렉토리 생성

 - mkdir testdir

 - cd testdir

/usr 위치에 임의로 설정

 

2. npm init -y

 - package.json 생성

 

3. 의존성(Dependencies) 설치

 - npm i --save express react react-dom

 - express(Node.js 웹 프레임워크)

 - react(react 자바스크립트 라이브러리)

 - react-dom(브라우저에 렌더링하기 위한 모듈)

 

4. Dependencies 설치

 - npm i -D babel-core babel-loader babel-plugin-transform-class-properties babel-preset-env babel-preset-react babel-preset-stage-2 clean-webpack-plugin concurrently css-loader style-loader html-webpack-plugin nodemon webpack webpack-cli webpack-dev-server

 - 바벨, 웹팩 등 기본적으로 필요한 모듈 리스트

 

5. babel presets 적용

 - ".babelrc" 파일 생성

 - { "presets" : ["env", "react", "stage-2"] }

 

6. 폴더 생성

 - "server" : back-end, "client" : front-end 폴더 생성 -> 2개의 폴더 생성(server, client)

 - mkdir src/client

 - mkdir src/server

 

7. 프로젝트 루트에 public/index.html 생성

 

8. webpack 설정

 - 프로젝트 루트에 "webpack.config.js"

 

9. src/server/index.js 생성(Express 설정)

const express = require("express");

const app = express();

app.use(express.static("dist"));

app.get("/api/getHelloWorld", (req, res) => res.send("Hello World!"));

app.listen(8080, () => console.log("Listening on port 8080"));

 

10. nodemon 설정

 - 프로젝트 루트에 "nodemon.josn" 생성 : { "watch" : ["src/server/"] }

 - watch에 해당하는 폴더에 파일 변화가 생길 경우 서버를 재시작하도록 설정

 

11. src/client/App.js 추가

import React, { Component } from 'react';

import './app.css';

 

class MyComponent extends Component {

   state = {

     hello: "Hello World"

   }

 

   render() {

           return(

                 <div>

                        <h1>{ this.state.hello}</h1>

                 </div>

           );

    }

}

export default MyComponent;

 

12. src/client/app.css 추가

h1 {

     color: red;

     text-align: center;

}

13. src/client/index.js 생성(Express 설정)

     import React from 'react';

     import ReactDOM from 'react-dom';

     import App from './App';

 

     ReactDOM.render(<App />, document.getElementById('root'));

 

14. package.json에 스크립트를 추가해서 명령어를 수정변경할 수 있음 <- npm script

"scripts": {

     "start": "babel-node src/server/index.js",

     "build": "webpack --mode production",

     "client": "webpack-dev-server --mode development --devtool inline-source-map --hot",

     "server": "nodemon --exec babel-node src/server/index.js",

     "dev": "concurrently \"npm run server\" \"npm run client\""

}