WEB 20 - 데이터 Flow & Axios

어떤 유저가 로그인을 하고 싶다면 ]

Client 부분에서 사용자의 이름과 비번을 넣고 로그인 버튼을 누르면 

요청이 서버쪽으로 가서 

서버에서는 데이터베이스에 로그인 아이디가 있는지 찾고 유저가 보낸 비번이 맞는지 까지 체크하는 것하고

맞으면 성공했다고 보내거나 틀리거나해도 보내는 식으로 움직여진다. 

 

저번에는 Client부분이 없어서  postman을 이용했는데 

이제는 Client부분이 있기때문에 React JS부분에서 Request를 보내면 되는데 

그때 사용할게  AXIOS이다.

jQeury를 사용할때 AJAX라고 보면됩니다. 

 

우선 client 쪽으로 와서 

설치를 해줍시다. 

npm install axios --save

해주면 됩니다. 

그리고 나서 

LandingPage 부분에 전체적으로 

import React,{useEffect} from 'react'
import axios from 'axios';
import { response } from 'express';
function LandingPage() {
    useEffect(()=>{
        axios.get('/api/hello')
        .then(response=>console.log(response.data))
    },[])
    return (
        <div>
            Landing Page
        </div>
    )
}

export default LandingPage

구현하고 

 

서버의

index.js 부분으로 가서 

 

app.get('/api/hello',(req,res)=>{

  res.send("안녕하세요")

})

원래의 라우터 같은경우에는  req받은것으로 할것을 하고 

프론트 단으로 res를 보내는 식이지만 여기서는 그냥 간단히 확인정도하는것으로 구현했습니다. 

 

이부분을 작성해주시면 됩니다. 

 

지금은 이렇게 구현하고 백엔드쪽이랑 프론트쪽 다 서버켜서 콘솔 확인하면 에러가 나올것인데 

서버가 5000

클라이언트가 3000이라 에러가 발생 이것은 다음단에서 해결할 예정