NodeJS+MongoDB Part3 - NodeJS+Express 서버 & React 연동

NodeJS+Express 서버 & React 연동

기존 nodeJS로 만든 서버가 있다면 생략하고

아래 설치 목록을 한번 더 체크 후 넘어가보기

// nodejs 
npm i init -y
npm i express

React의 프로젝트를 바로 사용할 수 없기에 Build를 하기

// react Project
npm run build

이후 Back과 Front가 같은 경로에 있다고 할 경우로 예시를 들자면

nodejs의 server.js에서 아래와 같이 코드를 작성하기

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

app.listen(8080, () => {
  console.log("hi");
});

// React의 폴더명이 shop 이라고 할 경우
app.use(express.static(path.join(__dirname, '../shop/build')))

// main 페이지
app.get('/', (req, res)=> {
	res.sendFile(path.join(__dirname, '../shop**********/**********build/index.html'))
})

만약 React에서 라우터를 사용했을 경우에 페이지 내에서 라우터 이동하는 건 잘 적용되지만 주소창에 해당 경로를 따로 입력해서 이동하려고 할 경우엔 페이지가 없다고 에러가 발생하는데 해당 문제는 아래와 같이 해결할 수 있다.

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

app.listen(8080, () => {
  console.log("hi");
});

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

// main 페이지
app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "../shop/build/index.html"));
});

// 아래 코드 추가해줘서 모든 경로를 React Build 파일로 넘겨주기
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../shop/build/index.html"));
});

 

---- 추후에 서버 구축후 db와 연결하면서 프로젝트를 진행하고 더 작성해보겠습니다 :)
nodeJS + MongoDB 강의 끝! ----