nodejs 와 react를 합치기

https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/

https://baegofda.tistory.com/210

https://baegofda.tistory.com/211

• 프로젝트 디렉토리에 들어가서 create react-app을 client라는 폴더로 해준다.
  yarn create react-app client
npm start 체킹

• 프로젝트 디렉토리로 돌아가서 node express generator를 server라는 폴더로 해준다.
  npx express-generator server
cd server
npm install
npm start 체킹

• 이런식으로 디렉토리가 보이면 정상이다.
  ㄴclient
  ㄴ..
  ㄴserver
  ㄴbin
  ㄴwww
  ㄴnode_modules
  ㄴ..
  ㄴpublic
  ㄴ..
  ㄴroutes
  ㄴindex.js
  ㄴusers.js
  ㄴviews
  ㄴ..
  ㄴapp.js
  ㄴpackage-lock.json
  ㄴpackage.json

server 설정

• server/bin/www 를 수정해줘야한다. 포트를 9000으로 바꿔주자(나중에 react랑 포트가 겹치는거 방지)

15: var port = normalizePort(process.env.PORT || '9000');
16: app.set('port', port);

• server/routes 라는 폴더에 testAPI.js를 추가해주자!

var express = require("express");
var router = express.Router();

router.get("/", function(req, res, next) {
    res.send({result: "testAPI is working properly"});
});

module.exports = router;

• 그럼 이 파일을 연결해주기 위해서, server/app.js 에서 app.use를 사용할것이다. 그전에 require로 파일을 불러와줄것이다.

var testAPIRouter = require('./routes/testAPI');

app.use('/testAPI', testAPIRouter);

• npm start 해서 로컬로 돌려본다.

• 이러면 http://localhost:9000/testAPI로 들어가보면 get request가 전달되어서 response된걸 볼 수 있다.

client 설정

• 서버 설정이 끝났으니까 이제 react로 클라이언트 쪽을 손봐야한다.

• 서버와 통신하기 위해 프록시 모듈을 설치해준다.
  yarn add http-proxy-middleware

• 그리고 프록시 설정을 해주기위해 client/src/setupProxy.js 라는 파일을 생성한다.

• client/src/setupProxy.js에다 아래 내용을 작성한다.

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

module.exports = function (app) {
	app.use(
		createProxyMiddleware("/testAPI", {
			target: "http://localhost:9000",
			changeOrigin: true,
		}),
	);
};

• 그리고 라우팅될 화면을 component로 만들어준다. get method를 사용할거기 때문에 axios를 사용해서 response를 받아준다.
  src/component/Main.js

import React from 'react';
import { Link } from 'react-router-dom';

const Main = (props) => {
	return (
		<>
			<h3>안녕하세요. 메인페이지 입니다.</h3>
			<ul>
				<Link to="/testAPI"><li>testAPI</li></Link>
				<Link to="/testWs"><li>testWs</li></Link>
			</ul>
		</>
	);
};

export default Main;

src/component/NotFound.js

import React from 'react';

const NotFound = () => {
    return (
        <div>
            404 Error
        </div>
    );
};
  
export default NotFound;

src/component/TestApi.js

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

const TestAPI = () => {
	const [datas, setDatas] = useState("");
	const callApi = async () => {
		axios.get("/testAPI").then((res) => setDatas(`${res.data.result}`));
	};

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

	return (
		<div>
			{datas}
		</div>
	);
};
  
export default TestAPI;

• client/src/App.js를 수정해준다.

import axios from "axios";
import { useEffect } from "react";
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './components/Main';
import TestAPI from './components/TestAPI';
import NotFound from './components/NotFound';
import './App.css';

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

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

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Main />}></Route>
          <Route path="/testAPI" element={<TestAPI />}></Route>
          <Route path="*" element={<NotFound />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

• 이렇게 마무리가 된다.

9000포트로 서버가 열려있고, 3000포트로 클라이언트가 접속할 수 있는데, 3000포트에서 프록시를 통해 9000포트 서버와 통신을 할 수 있게 되었다.