리액트 - express 서버와 연결하기

리액트 프로젝트를 만들었으면 html로 컴파일

npm run build // 프로젝트를 html 파일로 만들기

---

서버 만들기 앞서 package.json만들고 express 설치

npm init -y // default로 설정된 package.json 생성. -y는 'yes'를 의미한다.
npm install express // express 설치

---

epress 서버 만들기

const express = require("express");

const path = require("path");

const app = express();

app.listen(8080, function () {

    console.log("listening on 8080");

});

---

리액트와  ajax 통신 환경 설정하기

npm install cors // cors 모듈 설치

app.use(express.json()); // 유저가 보낸 array/object 데이터를 출력하기 위함

var cors = require("cors"); // cors는 다른 도메인 주소끼리 ajax 요청을 주고받기 위해 필요한 브라우저 정책입니다.

app.use(cors());

---

특정 폴더(프로젝트의 build)의 파일을 static 파일로 전송하기

app.use(express.static(path.join(__dirname, "react-project/build"))); // 프로젝트위치/build

app.get("/", (요청, 응답) => {  

    응답.sendFile(path.join(__dirname, "react-project/build/index.html"));  // 메인페이지('/')로 접속하면 html파일을 보내주세요.

}); 

---

서버는 특정 url로 접속하면 html을 보내주는 역할을 합니다. (API)

서버가 /product로 GET요청을 하면 DB에서 데이터를 받아와 보내주는  API 만들기

app.get("/product", (요청, 응답) => { // '/product'로 ajax 이용해서 GET 요청을 보내면 됩니다.

    응답.json({ name: "uriri" });

});

---

react router로 라우트 기능을 하려면

server.js 가장 아래에 위치해야합니다.⭐

app.get("*", (요청, 응답) => { // "*" 어떤 url을 접속하든

    응답.sendFile(path.join(__dirname, "react-project/build/index.html"));  // index.html 을 띄워주세요 

});