[Express]프로젝트 시작 - React와 Express 연동

 들어가기 앞서, Node.js 설치를 해야합니다!

 

[ client 폴더 & server 폴더 생성 ]

 

 먼저, 프로젝트를 진행할 폴더를 VS Code로 열어줍니다.

 

프로젝트 하위 경로에서 다음 명령어를 입력하여 server 단에서 필요한 모듈을 관리할 package.json을 생성합니다. 

 

$ npm init -y

 

 프로젝트 하위 경로에 server 폴더를 만들고, 서버 측 코드를 작성할 server.js 파일을 생성합니다. 

 

 

 다음은 client, 즉 리액트 프로젝트를 생성합니다. 

 

$ npx create-react-app client

 

 

 

 

[ server단 패키지 설치 및 사용 ]

 

1. express

$ npm i express

 

 

 express 설치가 완료되면 server/server.js 에 다음 코드를 입력하여 서버를 생성합니다. 

 

 다음과 같이 입력하면, 도메인이 http://localhost:4000 인 서버가 생성됩니다. 

 

// server/server.js

const express = require('express');
const app = express();
const PORT = 4000;

app.get('/', (req, res) => {
	res.send({hello: 'hello'});
});

app.listen(PORT, () => {
	console.log(`Server running on ${PORT}`);
});

 

 서버를 실행할 때에는 다음 명령어를 입력합니다. 

 

$ nodemon server/server.js
// 또는
$ node server/server.js

 

 

 

2. nodemon

$ npm i nodemon

 

 node server/server.js 명령어를 사용해도 되지만, 

 

 이는 자바스크립트 파일(server.js)들을 수정할 때 마다 매번 Ctrl+C 를 눌러 노드를 종료 후 다시 실행해야 한다는 번거로움이 있습니다. 

 

 nodemon을 사용하면, 자바스크립트 파일 수정 시 서버를 자동으로 재실행해주어 이러한 번거로움을 해결할 수 있습니다.

 

 

 

3. cors

  CORS는 Cross Origin Resource Sharing의 약자로, 도메인 및 포트가 다른 서버로 클라이언트가 요청했을 때 브라우저가 보안상의 이유로 API를 차단하는 문제가 발생합니다. 

 

 예를들어 클라이언트가 3000 포트이고 서버가 4000 포트일 때, 클라이언트가 서버에 접근하면 연결을 차단하게 됩니다. 

 

 Node.js는 cors 미들웨어 라이브러리를 제공하여 응답에 Access-Control-Allow-Origin 헤더가 자동으로 추가되어 나가게 됩니다.

 

$ npm i cors

 

// server/server.js

const express = require('express');
const app = express();
const PORT = 4000;

// CORS
const cors = require('cors');
app.use(cors());

app.get('/', (req, res) => {
	res.send({hello: 'hello'});
});

app.listen(PORT, () => {
	console.log(`Server running on ${PORT}`);
});

 

 

 

4. body-parser

 body-parser 는 요청의 본문을 해석해주는 미들웨어입니다. 보통 폼 데이터나 AJAX 요청의 데이터를 처리해줍니다. 

 

 body-parser를 설치하지 않으면, 클라이언트에서 POST 요청을 보냈을 때, 요청의 body 정보를 읽을 수 없습니다. 

 

$ npm i body-parser

 

 사용법은 다음과 같습니다. 

 

// server/server.js

const express = require('express');
const app = express();
const PORT = 4000;

// CORS
const cors = require('cors');

// body-parser
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extends: false }));

app.use(cors());

app.get('/', (req, res) => {
	res.send({hello: 'hello'});
});

app.listen(PORT, () => {
	console.log(`Server running on ${PORT}`);
});

 

 

5. concurrently

 프로젝트를 개발하다 보면, 매번 client 실행과 server 실행 명령어를 일일이 치기 번거로운 문제점이 있습니다. 

 

 concurrently 모듈은 리액트 서버와 노드 서버를 동시에 실행 시키기위한 모듈입니다. 

 

 모듈 설치 후, package.json 파일을 다음과 같이 수정합니다. 

 

$ npm i concurrently

 

// package.json

...

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client": "cd client && npm run start",
    "server": "nodemon server/server.js",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
  }
  
...

 

 

 

 

 

 

[ client단 패키지 설치 및 사용 ]

 

1. http-proxy-middleware

 리액트 앱이 있는 client 폴더에서 proxy 설정을 해주어 서버와 proxy로 연결하기 위해 사용하는 방법입니다. 

 

 client 폴더를 이동하여 미들웨어를 설치합니다. 

 

$ cd client
$ npm i http-proxy-middleware

 

 리액트 프로젝트 내의 src 폴더로 이동하여 setupProxy.js 파일을 하나 생성하여 다음과 같이 작성합니다.

 

// client/src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){
  app.use(
    createProxyMiddleware(['/api'],{
      target: "http://localhost:4000",
      changeOrigin: true
    })
  )
}

 

 '/api'는 프록시를 사용할 경로이고, target은 프록시로 이용할 서버의 주소입니다. 

 

 

 

 

2. axios

 

 axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 입니다.

 

 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경합니다. 

 

$ cd client
$ npm i axios

 

 

 

 

[ 테스트 ]

 

// server/server.js

const express = require('express');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser')
const PORT = 4000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());

app.get('/api', (req, res) => {
  res.send({hello: 'hello'})
})

app.listen(PORT, () => {
  console.log(`Server is running on ${PORT}`)
})

 

// client/src/App.js

import React, { useState, useEffect } from 'react';
import './App.css';
import axios from 'axios';

const apiUrl = 'http://localhost:4000/api'

const App = () => {
  const [text, setText] = useState('');

  const sendRequest = async() => {
    const response = await axios.get(apiUrl)
    setText(response.data.hello);
  }

  useEffect(() => {
    sendRequest();
  }, []);

  return (
    <>
      <h1>{text}</h1>
    </>
  );
};

export default App;