react - node 서버와 연동

node 프로젝트 생성

npm init

 

기본 설정

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

app.use(express.static(path.join(__dirname, 'public')));
app.use('/favicon.ico', (req, res) => {
    res.status(204);
})
app.use("/", (req, res) => {
    console.log("루트루트");
    res.status(200).json({ result : "" });
})

app.listen(8989, () => {
    console.log("시작시작 8989");
})

 

node 프로젝트 안에 react project 생성(npx create-react-app 프로젝트명) 혹은 외부 리액트 프로젝트를 node 프로젝트 안에 위치시킴

react-project, react-shop이 리액트 프로젝트

필요한건 빌드 산출물이기 때문에 스크린샷에는 빌드 산출물만 넣었다.

 

위에 작성한 기본 서버에 수정

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

// static 폴더 변경
app.use(express.static(path.join(__dirname, 'react-shop/build')));
// 루트 접속 시 보여줄 파일 변경
app.get('/', (req,res) => {
    res.sendFile(path.join(__dirname, 'react-shop/build/index.html'));
})
app.use('/favicon.ico', (req, res) => {
    res.status(204);
})

app.listen(8989, () => {
    console.log("시작시작 8989");
})

 

이 상태에서 브라우저의 리프레쉬 버튼을 클릭하면 이상하게 작동됨

하나 추가('*')

의미는, 아무 주소값이 들어올 경우 라고 해석하면 됨

문제가 발생한 이유는, 리액트 프로젝트를 보여준 후에는 리액트의 라우터로 이동을 했는데, 브라우저의 리프레쉬 버튼을 누르면 서버로 요청하게 되어 서버의 라우터를 보게 됨

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

// static 폴더 변경
app.use(express.static(path.join(__dirname, 'react-shop/build')));
// 루트 접속 시 보여줄 파일 변경
app.get('/', (req,res) => {
    res.sendFile(path.join(__dirname, 'react-shop/build/index.html'));
})
/*
 * 추가된 사항
*/
app.get('*', (req,res) => {
    res.sendFile(path.join(__dirname, 'react-shop/build/index.html'));
})
app.use('/favicon.ico', (req, res) => {
    res.status(204);
})

app.listen(8989, () => {
    console.log("시작시작 8989");
})

 

둘 다 쓰고 싶다. / 로 접속할 땐 node의 페이지를, /react로 접속할 때는 react 페이지를 보여주고 싶은 경우

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

// 미들웨어를 구분하여 static 설정
app.use('/', express.static(path.join(__dirname, 'public')));
app.use('/react', express.static(path.join(__dirname, 'react-shop/build')));

// 라우터도 구분하여 페이지를 보여주게 세팅
app.get('/react', (req,res) => {
    res.sendFile(path.join(__dirname, 'react-shop/build/index.html'));
})
app.get('/', (req,res) => {
    res.sendFile(path.join(__dirname, 'public/main.html'));
})
app.use('/favicon.ico', (req, res) => {
    res.status(204);
})

app.listen(8989, () => {
    console.log("시작시작 8989");
})

위와 같이 코드를 구성하고 리액트 프로젝트의 package.json에 homepage라는 항목을 추가하여 주소값을 추가한다.

{
  "homepage": "/react",	// 추가된 사항. 이 설정이 추가된 후에 build가 되어야 정상작동
  "name": "shop",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.24.0",
    "babylon": "^6.18.0",
    "bootstrap": "^5.1.3",
    "node-sass": "5.0.0",

 

매번 리액트를 build 하면서 개발하기는 쉽지 않다. 라이브 개발을 위해서 react의 proxy를 활용한다.