(React) 쇼핑몰 만들기 - node.js 서버와 연동하기

현재 내컴퓨터에는 nodejs가 설치가 되어있는 상태이다.
nodejs 에서 만든 서버를 통해 쇼핑몰 사이트를 연동시켜보자.

node-react 연동하기

1. nodejs 설치
2. 작업 폴더 만들고 vscode로 열기
3. server.js 파일을 만들고 다음 코드를 적는다.

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

app.listen(8888, function () {
  console.log("Server running at http://localhost:8888/");
});

4. 터미널에서 npm init -y
5. npm install express
6. react 로 만든 프로젝트를 npm run build 하여 생긴 build폴더를 node 작업폴더로 이동한다.
7. 아래 코드를 추가한다.

app.use(express.static(path.join(__dirname, "build")));

app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "build/index.html"));
});

app.get("*", function (req, res) {
  res.sendFile(path.join(__dirname, "build/index.html"));
});

8. node server.js 이렇게 서버를 가동하면 주소의 메인페이지로 들어갈때 쇼핑몰 프로젝트가 뜬다.
9. 리액트에서 만든 라우터를 사용하기 위해 get("*")가 필요하다. 이게 없으면 node 서버에서 라우터를 찾기 때문이다.
10. 데이터베이스를 요청하여 갖고오고 싶을땐 아래 코드 같이 라우터를 만들면 된다.
    npm install cors 터미널에서 설치한 후 아래코드.

app.use(express.json());
var cors = require('cors');
app.use(cors());

app.get('/product', function(req, res){
  res.json(객체, 배열 등)
})