[React] 데이터 flow & axios

로그인을 예로 들자면
유저(클라이언트)가 로그인을 하고 싶다 -> 클라이언트에서 아이디, 비밀번호 입력 후 로그인 버튼을 누르면 서버로 요청 전달 -> 서버에서는 데이터베이스에 아이디가 있는지 찾은 후 있다면 비밀번호가 맞는지까지 탐색 -> 맞다면 res를 있다고 전달, 없다면 없다고 전달 하는게 데이터의 흐름
 
그동안은 클라이언트가 없기 때문에 postman으로 요청을 보냈었음
하지만 지금은 클라이언트가 생겼기 때문에 axios라는 라이브러리를 이용해 요청을 보낼 수 있음
jQuery를 사용할 때 AJAX같은 역할

npm install axios --save

// landingpage.js

import axios from 'axios';
import { useNavigate } from 'react-router-dom'

function LandingPage() {

	useEffect(() => {
	  axios.get('/api/hello')
	  .then(response=> { console.log(response.data) })

	}, [])
	
  return (
	<div>
    	Landing Page
    </div>
  )
}

랜딩페이지에 들어오자마자 useEffect를 실행할건데 이건 .get 요청을 보내면 서버의 응답을 콘솔에 찍어주는 코드
axios.get('/api/hello') 이 엔드포인트를 서버로 보내면 index.js에 .get('/api/hello') 라우터가 있어야 받을 수 있음

// server/index.js

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

이렇게 client와 server 코드를 수정 후 실행하면 오류가 생김
왜? 현재 설정된 포트는 클라이언트 3000, 서버 5000
그래서 axios.get('/api/hello') 이렇게 요청을 보내도 3000번으로 요청이 가기에 서버가 받지 못하는 상황
포트가 다른데 어떠한 설정을 해주지 않으면 CORS 설정 때문에 막힘