[ReactJS] 데이터 흐름과 Axios사용하여 요청보내기

현재 프로젝트에서는 Server(NodeJS)가 있고 Client(ReactJS)가 있고 DataBase(MongoDB)가 있습니다.

데이터의 흐름을 보자면 User가 로그인을 하고싶다면 Client에서 ID와 Password를 적어서 로그인 버튼을 누르게 될것입니다.

그러면 그 요청에 Server에 들어오게 되고 Server는 DataBase에서 유저 정보를 찾고 ID가 있다면 Password가 ID와 일치한지를 확인하게 됩니다.

만약 일치한다면 성공했다고 response하면되고 비밀번호가 틀리거나 유저가 존재하지 않는다면 그런 내용을 클라이언트에 전달을 하게 될것입니다.

앞서 NodeJS에서는 클라이언트 부분이 없어서 포스트맨을 이용했었는데요.

이제부터는 React를 이용한 클라이언트를 이용해서 요청을 보낼것입니다.

 

요청을 보낼때 Axios라는 라이브러릴 사용할건데요.

Axios는 jQuery를 사용할때의 Ajax와 비슷한 것입니다.

npm install axios --save

axios를 먼저 다운받겠습니다.

 

// 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;

axios를 다운받았다면 랜딩 페이지를 위처럼 수정해보겠습니다.

 

 

// server/index.js

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

그리고 서버에 있는 index.js에서 이런 라우터를 하나 만들어보겠습니다!

 

그리고 노드와 리액트 두개의 서버를 모두 작동시켜보겠습니다.

클라이언트에서 404에러가 발생합니다.

백엔드 서버는 5000번 포트를 사용하고있는데(이전에는 3000번쓰다가 수정했습니다) 프론트 서버는 3000번서버를 쓰고 있기 때문에 포트번호가 달라서 생기는 에러인것같습니다.

그렇다면 프론트서버에서 axios.get('api/hello') 부분을 살짝 수정해보겠습니다.

axios.get('http://localhost:5000/api/hello')

에러메세지가 바뀌긴했지만 그래도 에러가 발생하는군요!

해당에러는 다음포스팅에 이어서 포스팅하겠습니다!