[React] 데이터를 위한 server 만들기 [express, axios]

 

1. server 디렉토리 안에 config와 routes디렉토리, server.js 를 만든다.

 

 

 

 

2. server.js 

 

const express = require('express');
const app = express();
const api = require('./routes/index');


// api 처리는 './routes/index'에서 일괄처리
app.use('/api', api);
 
// server port 4000 할당
// 클라이언트와 다른 번호로 충돌나지 않도록
const PORT = 4000;
app.listen(PORT, () => {
    console.log(`Server run : http://localhost:${PORT}/`)
})

 

 

3. Proxy ; 

이를 위해서 package.json에 proxy를 넣어준다. 

 

 

 

4.  express, axios를 install 해준다. 

 

 

 

 

5.  app.js에 useEffect라는 훅을 import해준다. 

import React, {useEffect} from "react";
import { Route, Routes } from "react-router-dom";
import { Home, Auth } from "pages";
import './App.css';
import Main from './components/board/lost_found/Main';
import Table_list from './components/board/lost_found/Table_list';
import Search from './components/board/lost_found/Search';
import axios from 'axios';

const App = () => {

	// 서버에서 받은 데이터를 console로 찍어서 확인한다.
  useEffect(() => {
    axios.get('/api/test')
      .then(res => console.log(res))
      .catch()
  })

  return (
    <div className="App">
      <Main />
      
      <Table_list />
      <Search />
    </div>
  );
};

export default App;

 

 

 

 

 

6. 실행은 프론트와 서버를 두개의 콘솔로 나누어 해준다. 

 

프론트는 npm start

서버는 cd server를 통해 server로 옮겨간 다음 

node server.js를 입력하여 실행시킨다. 

 

 

 

프론트의 포트 번호는 3000, 서버의 포트 번호는 4000이다. 

 

 

 

실행 결과  : 

 

 

 

 

실행 하면 다음과 같이 server 파일 안에 내용이 프론트로 잘 전달 되는 것을 확인할 수 있다. 

 

 

 

 

 

 

참고 블로그 :

https://ddeck.tistory.com/27?category=866566 

[React] react 프로젝트에 mysql 연동하기 - 떽떽대는 개발공부