[React] React생성부터 Node.js 연동까지 - 4) Node.js 연동

• Router 설정

[React] React생성부터 Node.js 연동까지 - 3) Router 설정

# Node.js 연동

• 기존에는 npm start로 3000 포트의 리액트 실행
• 화면이 출력되면 필요한 데이터를 DB에서 조회해서 가져오고 싶은 경우 Node.js로 연동해서 사용합니다
• 서버 설정하면 리액트는 3000, 노드는 8008 혹은 자신이 설정한 포트로 시작합니다
  • 리액트 시작 : npm start
  • 서버 시작 : server.js가 있는 경로에서 node server.js

# 필요 모듈 설치

npm init -y
npm install express
npm install cors
npm install --save-dev nodemon
npm install axios

# npm start로 server, react 모두 실행 설정

• server와 client를 2개 켜야하는게 불편한 경우 설정을 통해 동시에 실행 가능합니다
  (개발할 땐 client, setver 하나씩 켜서 하는게 편합니다)
• 중간에 scripts 부분 수정
  • 따로 실행 : "start" : "react-scripts start"
  • 한 번에 실행 : "start": "react-scripts build && node server.js"

  "scripts": {
    "start": "react-scripts build && node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

# server.js

• 루트 경로에 server.js 파일 생성해줍니다

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

const port = process.env.PORT || 8008; // 포트 설정

// CORS 사용
const cors = require('cors');
const corsOption = {
    origin: "*",
    optionSuccessStatus: 200,
};
app.use(cors(corsOption));
app.use(express.json());

// /api/tests 경로로 접속하면 아래 작업 후 데이터 전송해줌
app.get('/api/tests', async (req, res) => {
    res.send({message:'Hi'});
});

// 정적 파일 미들웨어 설정
app.use(express.static(path.join(__dirname, '/build')));

// 모든 요청에 대해 index.html 제공
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '/build', 'index.html'));
});

// 서버 확인
app.listen(port, () => {
    console.log('server is running on ' + port);
});

# 서버 url 설정

루트 경로에 .env 파일에 서버 경로랑 클라이언트 경로를 설정해줍니다.

fetch 혹은 axios 이용해 보낼 때 편리하게 사용할 수 있습니다

* env 파일을 설정한 후에는 build 필수 (npm run build)

[ .env ]

REACT_APP_CLIENT_URL=http://localhost:3000
REACT_APP_API_URL=http://localhost:8008

 

# Test.js 수정

• Test.js에 페이지 로드되면 /tests 경로로 데이터 요청 후 응답 결과가 화면에 출력하도록 코드 작성합니다
• 서버에서 보낸 데이터를 받아오려면 res.data.변수

import { useEffect, useState } from 'react';
import axios from 'axios';

export default function Test() {
    const [test, setTest] = useState('test');

    useEffect(() => {
        axios.get(`${process.env.REACT_APP_API_URL}/api/tests`)
            .then(res => setTest(res.data.message))
    })
    return (
        <>{test}</>
    )
}

# 결과

• 서버 하나만 키도록 설정한 경우
  • npm run build → npm start → locahost:서버포트로 접속 (localhost:8008)
• 각각 하나씩 실행 : server.js 파일 있는 경로에서 명령어 실행 → locahost:클라이언트 포트로 접속 (localhost:3000)
  • 서버 실행 : node server.js (혹은 nodemon server.js)
  • 클라이언트 실행 : npm start