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

웹서버에서 리액트를 가져다 쓰고 싶을 때

웹 서버란 -> 유저가 웹 문서를 요청했을 때 웹 문서를 보내주는 것
서버 -> 유저가 데이터 요청했을 때 데이터 보내주는 것
등.. 데이터 주는 곳이라고 생각하면 됨

리액트란 html을 예쁘게 만들어주는 툴

리액트연동
예를 들어,
유저가 내가 만든 포트폴리오 주소를 주소창에 침

유저 : 서버야 주소 입력 했으니 주소 html 줘
서버 : 리액트로 만든 html 파일 보내줌

서버 만드는 법
- node.js 검색해서 설치
- 작업 폴더 만들고 에디터로 오픈
- server.js 만들어서 코드 붙여넣기

// server.js

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

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

- 터미널 열어서 npm init -y (default 값으로 설정된 package.js 를 만듬, y..? —> Yes)
- npm install express

이러면 서버가 만들어짐
리액트 프로젝트 열어서 빌드 함 --> 빌드하는 법 (npm run build)
https://min-ji07.tistory.com/entry/Github-github%EC%97%90-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%98%AC%EB%A6%AC%EA%B8%B0

빌드 폴더 생성하면 서버에서 가져다 쓸 수 있음
리액트 프로젝트를 서버 프로젝트 안에 넣음(node_modules) 파일과 같이 있으면 됨
누가 메인 페이지를 접속 했을 때 내가 만든 index.html 파일을 보여주고 싶을 때 입력 코드

메인 페이지 접속했을 때 초록색으로 보이는 파일 보여주세요

// server.js 파일 밑에 입력해주면 됨
app.get('/', function(요청, 응답){
	응답.sendFile(path.join(__dirname, '리액트로 만든 html 파일 경로(index.html)'));
    					// react-project/build/index.html 
});

저렇게 코드를 짜주고 해당 코드 위에 아래 코드를 추가해줌
해당 폴더 안에 있는 static 코드를 가져다 쓰겠다는 뜻임

app.use(express.static(path.join(__dirname, 'react-project/build')));

리액트 라우터 사용시 추가 해 줄 코드
최하단 작성

app.get('*', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});

유저가 주소창에 없는 경로를 입력했을 때 index 페이지로 이동


디비에 있던 데이터를 리액트에서 보여주고 싶을 때
서버에서 디비 데이터를 뽑아 그대로 프론트엔드로 보냄

유저가 상품 페이지 접속했을 때 데이터 베이스에 있던 상품을 보여주려면

app.use(express.json());
// 유저가 보낸 array/object 데이터 출력할 때 필요
let cors = require('cors');
// cors 사용시 npm install cors 입력
app.use(cors());
// cors는 다른 도메인주소끼리 ajax 요청 주고 받을 때 필요함
// 해당 코드 추가해야 ajax 잘 된다고 함

app.get('/product', function(요청, 응답){
	응답.json(필요한 데이터)
    // 서버 /product 주소에 데이터 요청함
    // 리액트는 해당 주소에 GET 요청 하면 됨
});

완성 된 server.js 파일

// server.js

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

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

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

app.use(express.static(path.join(__dirname, 'react-project/build')));

app.get('/', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html '));
});

app.get('/product', function(요청, 응답){
	응답.json(필요한 데이터)
});

app.get('*', function(요청, 응답){
	응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});

작성 후 서버 실행 코드 입력

node server.js
localhost:8080에서 서버 확인

 

 

에러 검색하다 찾았는데 참고 할 것!

https://xiubindev.tistory.com/115

나를 너무나 힘들게 했던 CORS 에러 해결하기 😂