[Node+Express]React 연동

1. 웹 서버 만들기는 이전 포스팅 참고..

2. nodemon 설치하는 방법도 이전 포스팅 참고..

3. React 설치하는 방법도 이ㅣ이전포스팅 참고..

   혹시 몰라서 써두는 React 프로젝트 만드는법

   1. nodejs 최신버전 설치
   2. cmd창 열어서 npx create-react-app 프로젝트명
   3. vscode같은 에디터로 폴더 열기
   4. 개발하면서 코드 중간중간 보고싶으면 npm run start
   5. 개발 끝나면 npm run build 입력하면 완성본 html 파일이 build 폴더 내에 생성됨

4. 여차저차 리액트 프로젝트 만들었으면 이 폴더를 서버있는 프로젝트 폴더에 갖다넣는다.
   

5. 이제 누가 내 사이트로 접속시 react로 만든 html을 보여주면 된다.

app.get("/", (요청, 응답) => {
  응답.sendFile(path.join(__dirname, '리액트로만든html경로'));
});

경로는 리액트프로젝트폴더명/build/index.html

그런데 이렇게 서버에서 리액트 폴더에서 html을 가져다쓰려면 상단에
app.use(express.static(path.join(__dirname, '리액트프로젝트폴더명/build')));
추가해줘야한다.
express.static이라는 걸 쓰면 특정 폴더 안의 파일들을 static파일로 잘 보내줄 수 있기 때문에..

아래는 server.js 리액트 연결한 코드

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

app.listen(8080, () => {
  console.log("http://localhost:8080 에서 서버 실행중");
});

app.use(express.static(path.join(__dirname, "node-react-study/build")));

app.get("/", (요청, 응답) => {
  응답.sendFile(path.join(__dirname, "node-react-study/build/index.html"));
});

🤔리액트에서 라우팅을 담당하는 경우

리액트에서 react-router-dom으로 라우팅을 담당하는 경우,
리액트가 라우팅을 할 수 있도록 전권을 넘겨주기 위해
server.js의 가장 하단에 코드 추가!!

app.get('*', function (요청, 응답) {
  응답.sendFile(path.join(__dirname, '/리액트프로젝트폴더명/build/index.html'));
});

꼭!! 가장 하단에 놓아줘야함!!!

🤔리액트에서 DB 데이터 출력?

server.js

서버에 저렇게 작성해두고, 리액트 파일에서 상품데이터가 필요한 경우에는 /product로 GET요청을 해주면 된다.
AJAX 사용하면 통신 가능!

AJAX의 원활한 사용을 위해 서버코드 상단에

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

추가해준 다음,
터미널 열어서 npm install cors 입력해서 설치해주기

결론은 리액트에서 DB 데이터 가져오려면..
1. DB 데이터 뽑아서 보내주는 API를 server.js에 작성
2. 리액트는 거기로 GET 요청하기