[Node.js] Node + Express 서버와 React 연동

1. 서버 만들기

1. nodejs 설치
2. 서버 프로젝트 폴더 만들고 vscode로 열기 > server.js 파일 만든 뒤 세팅하기
3. 터미널 열어서 npm init -y
4. npm install express

 

 * 세팅 할 것

<server.js>

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

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

 

2. 연동

1. 리액트 프로젝트를 별도로 만들기
2. 리액트 프로젝트 빌드하기 npm run build
3. 리액트 프로젝트 폴더를 서버 프로젝트 폴더에 넣기
4. 서버 파일에 리액트 프로젝트 빌드해서 생긴 html 파일 get요청하기

// ''폴더안에 있는 파일들을 사용하겠다~전송하겠다~
app.use(express.static(path.join(__dirname, 'react-project/build')));

// '' : 리액트로만든html파일경로
app.get('/', function (요청, 응답) {
    응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});

 

 

추가) 3. 리액트 라우터로 여러 페이지 나눠둔 상태일 때

// 리액트 라우터 사용하는 경우
app.get('*', function (요청, 응답) {
    응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});

*최하단에 코드 위치하는게 좋음

 

 

추가) 4. DB 데이터를 리액트에서 보여주려면

1. DB 데이터 뽑아서 보여줄 API 작성
2. 리액트 프로젝트에서 해당 API 주소로 GET 요청

❗ ajax 사용하려면 cors 설치하기

npm install cors

 

cors 세팅

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

 

api 예시

app.get('/product', function (요청, 응답) {
    응답.json({ name: 'black shirts' });
});