210802 React + Node.js(express) 연결하기

React + Node.js(Express) 연동하기 (1)
React + Node.js(Express) 연동하기 (2)
여기까지 오는데 위의 두 게시물이 정말 큰 도움이 되었다 감사합니다🙇‍♀️

이하의 과정은 node.js가 설치 되어 있다는 가정 하에 진행됩니다.

React 프로젝트 + Express 설치

1. 프로젝트를 생성할 폴더를 만든다.
   (관극 일기 게시판을 만들고 싶기 때문에 폴더이름을 musical이라고 둠)
2. 생성한 폴더 안으로 들어가 npx create-react-app client
   
3. express 설치를 위한 명령어 실행 npm install express

   Express는 node.js의 핵심 모듈인 http와 connect 컴포넌트를 기반으로 하는 웹 프레임워크로, 개발을 빠르고 손쉽게 할 수 있도록 도와주는 역할을 한다. 이는 미들웨어 구조 때문에 가능한 것.
   
   미들웨어함수는 요청 오브젝트(req)와 응답 오브젝트(res), 그리고 어플리케이션 요청-응답 사이클 도중 그 다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수이다. 간단하게 말하면 미들웨어란 클라이언트에게 요청이 오고, 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리를 하는, 거쳐가는 함수들이라고 볼 수 있겠다.

Node.js 서버 구축

1. client 파일과 같은 위치에 server 폴더를 만들고, 서버가 실행될 때 찾아갈 server.js, Router 폴더와 테스트를 위한 test.js를 만든다.
   
2. server.js 파일에 다음과 같이 작성

const express = require('express');
const app = express();
const test = require('.//Router/test');

app.use('/', test);

const port=5000; //React가 3000번 포트를 사용하기 때문에 node 서버가 사용할 포트넘버는 다른 넘버로 지정해준다.
app.listen(port, ()=>{console.log(`Listening on port ${port}`)});

3. test.js에 다음과 같이 작성

const express = require('express');
const router = express.Router();

router.get('/', (req, res)=>{
  res.send({ test: "hi"});
});

module.exports = router;

4. 최상단 폴더위치(musical)에서 제대로 실행되는지 확인한다.
   node ./server/server.js
5. 웹 브라우저에서 http://localhost:5000/으로 접속해서 "hi"가 뜬다면 성공
6. 추가적으로 nodemon, concurrently를 설치한다

   nodemon: node 명령어는 파일을 변경할 때마다 이전 명령어를 종료하고 다시 실행해야하는 불편함이 있는데 nodemon을 이용하면 바로바로 업데이트 가능
   concurrently: react 서버와 node 서버를 동시에 실행시키기 위한 모듈

npm install nodemon --save
npm install concurrently --save
(dev를 붙이면 local에서만 사용하겠다는 의미)

7. package.json에 추가적인 설정을 해준다.

  "scripts": {
    "server": "cd server && nodemon server",
    "client": "cd client && npm start",
    "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
  },
    "devDependencies": {
    "nodemon": "^2.0.7"
  },
    "dependencies": {
    "concurrently": "^6.0.0",
    "express": "^4.17.1",
  },

8. npm start를 실행하고 3000번, 5000번 포트로 접속해서 이상이 없다면 성공!
   
   
   
   

React + Node.js 연동하기

1. react와 node 서버 간에 데이터를 주고 받기 위해서는 프록시 모듈이 필요하다

   Proxy: '대신'이라는 사전적 의미를 가지고 있으며 클라이언트와 서버 사이의 네트워크 통신을 '대리'로 수행하는 미들웨어이다.

2. 프록시 설치 npm install htpp-proxy-middleware --save

3. 프록시 설정을 위해 client/src에 setupProxy.js를 생성

const proxy = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    proxy('/api', {  //도메인 api로 호출
      target: 'http://localhost:5000/', //통신할 서버의 도메인주소
      changeOrigin: true,
    })
  )
}

4. 통신을 위한 axios 라이브러리 설치 npm install axios
5. Router/test.js 내용 수정

const express = require('express');
const router = express.Router();

router.get('/', (req, res)=>{
  res.send({ test: "hi"});
});

module.exports = router;

6. client/App.js 수정

import axios from "axios";
import { useEffect } from 'react';

function App() {
  const callApi = async()=>{
    axios.get("/api").then((res)=>{console.log(res.data.test)});
  };

  useEffect(()=>{
    callApi();
  }, []);
  
  return (
    <div className="App">
	...
    </div>
  );
}

export default App;

7. 실행