18/06/16 02_router 와 webpack

1. router

 - 리엑트 라우터는 여러 개의 페이지를 가진 애플리케이션을 만들 때 사용한다.

 - 리엑트 라우터를 사용하면 애플리케이션의 페이지 이동 등을 쉽게 구현할 수 있다.

* 홈 화면, 게시판, 공지사항을 가지고 있는 총 3페이지의 홈페이지를 만들자.

* 작업 순서

 - package.json 에서 'react-router'와 'react-router-dom'을 추가한다. (저장후 npm install 해야함..)

 - index.html 에 HTML을 넣어줄 root를 만든다.

 - index.js 에서 App과 root를 연결한다.

 - Home.js, Board.js, Notice.js 파일을 만들고 각 파일안에 컴포넌트를 만든다.

 - App.js 에서 위의 3파일을 import하고 라우터를 이용하여 url에 따라 컴포넌트를 변경해서 출력하게 설정한다.

package.json

{
  "name": "react-router",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

index.html

<div id="root"></div>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

Home.js

import React, { Component } from 'react';

class Home extends Component{
    render()
    {
        return(
            <div>
                <h1>Home Page</h1>
                <p>
                    <ul>
                        <li><a href="/board">게시판</a></li>
                        <li><a href="/notice">공지사항</a></li>
                    </ul>
                </p>
            </div>
        );
    }
}
export default Home;

Board.js

import React, { Component } from 'react';

class Board extends Component{
    render()
    {
        return(
            <div>
                <h1>자유게시판</h1>
                <p>
                    <a href="/">홈으로</a>
                </p>
            </div>
        );
    }
}
export default Board;

Notice.js

import React, { Component } from 'react';

class Notice extends Component{
    render()
    {
        return(
            <div>
                <h1>공지사항</h1>
                <p>
                    <a href="/">홈으로</a>
                </p>
            </div>
        );
    }
}
export default Notice;

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home';
import Board from './Board';
import Notice from './Notice';
import Movie from './Movie';
// 아래는 여러개를 import할때 사용.. 위는 패키지를 안했기떄문에 사용할수 없대요.
// as로 별칭을 지을수 있다.
import {BrowserRouter as Router, Route} from 'react-router-dom';


//<Route exact path={"/"} component={Home} /> /*링크가 걸렸을때 Home을 보여주어랏*/
class App extends Component {
  render() {
    return (
        <Router>
            <div>
                <Route exact path={"/"} component={Home} />
                <Route path={"/board"} component={Board} />
                <Route path={"/notice"} component={Notice} />
            </div>
        </Router>
    );
  }
}

export default App;

2. webpack

- 웹팩이란 자바스크립트 또는 CSS 등의 리소스 파일을 하나로 합쳐주거나, JSX처럼 특수한 기법으로 작성된 파일을 변환하는 도구

2-1. 웹팩과 웹 서버

* 웹팩을 이용하여 파일을 변환하고 서버 프로그램을 작성하여 웹 서버를 실행시키자.

*작업 순서

 - package.json 에 라이브러리들을 추가한다. (너무많아.. 아래 소스 확인, 저장 후 npm install 해줌.)

 - webpack.config.js 파일을 생성하여 웹팩 변환 작업과 관련된 설정을 지정한다.

 - movie-server.js 파일을 생성하여 서버 프로그램 작성

 - index.html, App.js, index.js 파일을 작성한다.

 - 터미널을 열고 'npm run build' 입력

 - 터미널을 열고 'node movie-server' 입력

 - http://localhost:3000/ 접속하면 웹서버가 실행된 것을 확인 할수 있다.

package.json

{
  "name": "react-mini-project",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "node movie-server.js",
    "build": "webpack",
    "watch": "webpack -w"
  },
  "dependencies": {
    "express": "^4.15.3",
    "superagent": "^3.5.2",
    "mongoose": "^5.0.11",
    "mongodb": "^3.0.5",
    "webpack-dev-server": "^3.1.1",
    "axios": "^0.18.0",
    "request": "^2.85.0",
    "xml2js": "^0.4.19",
    "urlencode": "^1.1.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "webpack": "^2.6.1"
  }
}

webpack.config.js

const path = require('path')
module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

movie-server.js

const express=require("express")
const app=express();
const path=require('path')
const port=3000
app.listen(port,()=>{
    console.log('서버 실행완료:',"http:localhost:${port}")
})
app.use("/",express.static('./public'))
app.get('/',function (req,res) {
    res.sendFile(path.resolve(__dirname,'public','index.html'));
})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

App,js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

터미널을 열고 아래와 같이 명령어를 입력한다. 'npm run build'

webpack.config.js 에서 설정한 파일이름과 경로로 변환된 파일이 들어왔다. 좌측의 bundle.js

터미널을 열고 아래와 같이 명령어를 입력한다. 'node movie-server'