[Node] Data흐름과 axios, proxy서버 사용하기

페이지가 없을때는 postman을 썼지만 이제는 react-route-dom을 사용해 Router를 사용하고있다.

Axios

제이쿼리 ajax생각하면된다. 서버와 클라이언트 통신에 필요한 기능

 

(라우팅은 아래 글 참고)

[React] 페이지 라우팅 - React SPA & SCR

 

그렇기 때문에 이제 Axios를 사용해서 리퀘스트 처리를 할것이다.

 npm install axios --save

 

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

function LandingPage() {
    useEffect(() => {
        axios.get('/api/hello')
            .then(response => console.log(response.data))
    }, [])

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

export default LandingPage

 

 

 

 

그리고 CORS막기위한 Proxy 사용하기

$ npm install --save-dev http-proxy-middleware

 

http-proxy-middleware

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

module.exports = app => {

    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:5000',
            changeOrigin: true
        }));
    app.listen(3000);
}

설치한 프록시 미들웨어의 target을 로컬호스트 5000으로 적어준다. (현재 테스트중인 백단의 포트가 5000이기때문)

3000은 후론트에서 리액트가 받는다!

 

 

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

function LandingPage() {
    useEffect(() => {
        axios.get('/api/hello')
            .then(response => console.log(response.data))
    }, [])

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

export default LandingPage

클라이언트단에있는 LandingPage.js에 axios를 임포트하여 통신할 URL을 알려서 서버에 보낸다

 

 

 

app.get('/api/hello', (req, res) => {
    res.send("안녕하세요")
});

서버에 있는 index.js에서 app.get을 사용하여 요청을받고 응답에 담아보낼 메세지를 적었다

 

 

사용자와 인터넷간 프록시 서버 사용이유

- 방화벽 기능

- 웹 필터기능

- 캐시데이터, 공유데이터 제공으로 더 빠른 사용 가능

 

 

---

실행할때는 5000포트와 3000포트 모두 터미널에서 실행시켜주어야한다.

즉, 터미널을 두개 켜야한다. 

그것도 모르고 계속 npm run start로 클라이언트만 켰더니.. 504오류가 떠서 고생했다 ;-;