React (front) 와 Node (back) 연동시키기

<본 블로그는 코딩애플의 블로그를 참고해서 공부하며 작성하였습니다 :-)>

=> Node+Express 서버와 React 연동하려면

 

🚀 react와 node 연동하기

1) react

: HTML을 이쁘게 만들어주는 툴

- npx create-react-app react-project

- App.js 만들고 개발하기 npm run start

- 개발 끝난다면 -> npm run build

- -> html 파일 (main page) 이 생성

 

2) node

- server.js 만들기

- npm init -y

- npm install express nodemon cors

- server 실행하기 -> nodemon server.js

 

3) db 데이터를 서버를 통해 react로 보내기

- 받은 데이터로 react가 html 생성하기

- html 을 서버가 만들면 server-side rendering

- htlm 을 리액트가 만들면 client-side rendering

  - react-router-dom

 

☀️ Server.js

const express = require("express");
const app = express();
const path = require("path");

app.listen(8080, function () {
  console.log("listening on 8080");
});

// 리액트와 nodejs 서버간 ajax 요청
app.use(express.json()); // 유저가 보낸 array/object 데이터를 출력해보기 위해 필요
var cors = require("cors"); // 다른 도메인주소끼리 ajax 요청 주고받을 때 필요
app.use(cors);

// static 을 이용하여 특정 폴더의 파일들 전송 가능
app.use(express.static(path.join(__dirname, "react-project/build")));

app.get("/", function (req, res) {
  // res.sendFile(path.join(__dirname, "리액트로 만든 html 파일 경로"));
  res.sendFile(path.join(__dirname, "react-project/build/index.html"));
});

// db 데이터 뽑아서 보내주는 API
// ex) db 에 있는 상품명 보여준다면
app.get("/product", function (req, res) {
  res.json({ name: "상품명" });
});

// react router 쓰는 경우 최하단에 추가 하기
app.get("*", function (req, res) {
  // res.sendFile(path.join(__dirname, "리액트로 만든 html 파일 경로"));
  res.sendFile(path.join(__dirname, "react-project/build/index.html"));
});

 

☀️ react-project/src/App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <div>리액트로 만든 html 페이지</div>
    </div>
  );
}

export default App;