#19 데이터 Flow & Axios

 

전체적인 데이터 flow이고,

// axios를 받아주자!
npm install axios --save

Server와 연동하기 위해 테스트 코드를 작성하자.

LandingPage.js에서

// LandingPage.js
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;

그리고 서버에서도 테스트 코드를 작성하자.

server/index.js

app.get('/api/hello', (req, res) => {
  res.send("heelo");
});

테스트 결과 오류가 난다. 이유는 client는 3000포트에서 돌고 server는 3001포트에서 돌기 때문에 해결방법은 다음장.