• axios란?

브라우저, Node.js를 위한 HTTP 비동기 통신 라이브러리 입니다.

frontend 폴더에서 ‘axios’ 모듈을 설치해 준다.

npm install axios

frontend의 main page에서 ‘hello’라는 버튼을 만든다음 그 버튼을 눌럿을 때 backend로 ‘hello’라는 데이터를 post방식으로 보내보자.

• frontend/src/routes/main.tsx

import axios from 'axios';

const back_url = '<http://localhost:4242/hello>';

const handleClick = () => {
	axios.post(back_url, {
		data: 'hello'
	}).then((res) => console.log(res.data)).catch((err)=>console.log(err));
}

const Main = () => {
	return (
		<button onClick={handleClick}>
			hello
		</button>
	)
}

export default Main;

• frontend/src/App.tsx

// ./src/App.tsx

import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Main from './routes/main'
import Lent from './routes/lent'
import Return from './routes/return'

function App() {
  return (
    <BrowserRouter>
        <Switch>
          <Route exact path='/'><Main></Main></Route>
          <Route path='/lent'><Lent></Lent></Route>
          <Route path='/return'><Return></Return></Route>
        </Switch>
    </BrowserRouter>
  )
}

export default App

이제 backend의 /hello에서 express의 router 를 사용하여 데이터를 받아보자.

• backend/src/route.ts

import express from 'express';

export const router = express.Router();

router.post('/hello', (req:any, res:any, next:any) => {
	console.log(req);
	res.send({
		data: 'hi'
	})
})

• backend/src/index.ts

import express from 'express'
import { router } from './route'

function makeServer(){
	const app = express();
	const port = 4242;

	app.use('/', router); // 추가된 부분

	app.use('/', function(req, res){
		res.send("hello");
	})

	app.listen(port, ()=>console.log(`Listening on port ${port}`));
}

makeServer();

이제 frontend (3000 port)와 backend (4242 port) 서버를 둘다 띄운다음 frontend의 mainpage 에서 hello 버튼이 생긴것을 확인해보자. 그 후 hello 버튼을 누르면 콘솔창에 아래와 같은 에러 (CORS error) 가 생길 것이다.