Data Flow & Axios

Data Flow

client에서 원하는 요청을 보내면 서버에서 처리한 후 DB에 접근하여 응답을 보내는 구조이다.
client가 없을 때는 postman을 사용하여 테스트해봤다. 이제 AXIOS를 이용하여 구현해 보자.

우선 axios를 설치하자.

npm install axios --save

 

간단하게 LandingPage에서 확인해보자.

import React, { useEffect } from 'react'
import axios from 'axios'

function LandingPage(){

    useEffect(() => {
        axios.get('api/hello')
    }, [])

    return(
        <div>
            LandingPage
        </div>
    )
}

export default LandingPage

엔드포인트를 api/hello로 설정하면 만들어 놓은 서버의 index.js에서 이를 살표볼 것이다.
간단한 라우터를 만들어보자.

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

 요청이 들어오면 Hello를 응답으로 보내는 간단한 라우터이다.

 

이제 서버를 동작 시키고 테스트를 해보자.

error가 발생한다. 이는 port가 다르기 때문이다. server는 5000 port를 사용하지만 client가 3000으로 보냈다.
Cors 정책 때문에 이렇게 하면 막힌다. 

 

이를 해결하는데는 여러 가지 방법이 있다.
지금은 Proxy를 사용해서 바꿔보자.

npm install http-proxy-middleware --save

그리고 나서 src폴더에 'setupProxy.js'라는 파일을 만든다.

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

5000번 port를 사용하겠다는 내용이다.

이제 다시 에러가 발생했던 부분으로 돌아가 테스트해보자.

error가 없어지고 data에 Hello가 출력되는 것을 볼 수 있다.