리액트 연결한 서버 만들기

NodeJS 서버 만들기

1. express 라이브러리 설치

 

npm install express

 

 

Node express 서버 실행

node server.js : 서버실행

nodemon server.js : 서버 실행하면 수정 후 서버 다시 실행하지 않아도 됨

 

Server.js 파일 생성

const express = require("express");

const path = require("path");
const app = express();
const port = process.env.PORT || 3000;

리액트와 서버 연동하기

const express = require("express");

const path = require("path");
const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());
app.use(express.static(path.resolve(__dirname, "../build")));

app.get("/", (req, res) => {
  res.sendFile(path.resolve(__dirname, "../build/index.html"));
});

app.get("/api/test", (req, res) => {
  try {
    res.status(199).json("테스트 결과 받았다");
  } catch (error) {
    console.error(error);
    res.status(500).json("에러인디요");
  }
});

app.listen(port, () => {
  console.log(`서버 실행 중: http://localhost:${port}`);
});

1. 리액트 프로젝트 빌드

npm run build

2. / 경로에 대한 GET 요청

"메인페이지 접속 시 build 폴더의 index.html 보내줘"

app.use(express.static(path.resolve(__dirname, "../build")));

app.get("/", (req, res) => {
  res.sendFile(path.resolve(__dirname, "../build/index.html"));
});

sendFile : Express.js에서 제공하는 메소드로, 서버에서 클라이언트로 파일을 전송하는 역할

 

주로 정적 파일, 예를 들면 HTML, CSS, JavaScript 파일 등을 클라이언트에게 제공하는 데 사용

 

3. `/api/test`경로에 대한 GET 요청

app.get("/api/test", (req, res) => {
  try {
    res.status(199).json("테스트 결과 받았다");
  } catch (error) {
    console.error(error);
    res.status(500).json("에러인디요");
  }
});

/ 경로의 요청은 정적 파일 index.html을 반환하고, /api/test 경로의 요청은 "테스트 결과 받았다"라는 JSON을 반환합니다.