[#. Node] Node Rest API + React 연동하기, Axios로 Node에서 React로 데이터 가져오기, cors 및 proxy 설정하기 2

 

 

 

 

developer0809.tistory.com/111

[#. Node] Node+React 시작하기, 초기 세팅하기

 

 

developer0809.tistory.com/116

[#. Node] Node Rest API + mySQL 시작하기, 연동하기 1

Node, React 초기 세팅 및 mySQL 연동을 먼저 하고 오자

 

 

 

 

 

 

 

이 구조를 기준으로 진행하겠다

 

 

 

①  React 기본 라우터 설정

 

frontend 폴더에서 명령어를 입력한다

 

npm install --save react-router-dom

 

 

⑴ frontend/src/components/MainPage/MainPage.js 추가

 

import React from 'react';

const MainPage = () => {
  return (
    <>Main Page</>
  )
}

export default MainPage;

 

 

 

⑵ frontend/src/index.js

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';	// 추가

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

reportWebVitals();

 

 

 

⑶ frontend/src/App.js

 

import { Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';
import './App.css';
import MainPage from './components/MainPage/MainPage';
import NavBar from './components/NavBar/NavBar';

function App() {
  return (
    <div className="App">
      <Suspense fallback={(<div>...</div>)}>
        <NavBar />
        <Switch>
          <Route exact path="/" component={MainPage}></Route>
        </Switch>
      </Suspense>
    </div>
  );
}

export default App;

 

 

 

 

 

② Node + React 데이터 주고받기(Node cors 설치 및 설정, React proxy 설정)

 

 

⑴ Node cors 설치 및 설정 

 

 

ⓐ backend 폴더에서 cors 설치

 

npm install --save cors

 

 

 

ⓑ backend/server.js 수정

 

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");	// 추가

const app = express();

// parse requests of content-type: application/json
app.use(bodyParser.json());

// parse requests of content-type: application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors())	// 추가

// simple route
app.get("/", (req, res) => {
  res.json({ test: "success!" });
});

require("./routes/customer.js")(app);

// set port, listen for requests
app.listen(5000, () => {
  console.log("Server is running on port 5000.");
});

 

 

 

 

 

⑵ React axios 설치 및 프록시 설정

 

ⓐ frontend 폴더에서 axios 설치

 

npm install --save axios

 

 

 

ⓑ frontend/package.json 수정

 

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000/",	// 추가
  "dependencies": {
  }
}

 

 

 

 

 

⑶ React view에서 Node 데이터 가져오기

 

import React, { useEffect } from 'react';
import Axios from 'axios';

const MainPage = () => {

  useEffect(() => {
    Axios.get('/customers')
      .then(res => {
        console.log(res);
      })
  }, [])

  return (
    <></>
  )
}

export default MainPage;

 

 

받아온 데이터를 잘 가져오는 것을 콘솔에서 확인할 수 있다