React | axios 전송과 json-server

프로젝트 진행시 스프링 부트와 리액트와 axios, Restful 방식을 이용해서 데이터를 주고 받으려고 한다. 스프링 부트도 아직 제대로 배우지 않은 상태이고 리액트도 미숙한 상태라서 데이터 연결이 우선적으로 되어야 한다고 생각하였다. 수업에서 배운 내용은 jsp를 이용해서 프론트를 작성하였는데, 리액트와 스프링 부트가 연동이 안될 경우 프론트 팀에서는 스펙적으로 조금 아쉬울것같아 꼭 연결해 내리라 ! 다짐하였다!!

먼저 spring Boot와 React와 연결하는 과정은 ?!

• Spring Boot 서버 구축: Spring Boot 프로젝트를 생성 후 RESTful API를 작성한다.
  예를 들면 /api/recipes 엔드포인트를 만들어 JSON 형식의 레시피 데이터를 반환하도록 구현

• React 프로젝트를 생성하고 Axios 라이브러리 설치한다.
  React내에서 HTTP 요청을 보내기 위해 Axios 라이브러리를 설치한다!

npm install axios

Axios를 이용한 데이터 요청: React 컴포넌트에서 Axios를 사용하여 서버로 데이터를 요청
컴포넌트가 마운트될 때 레시피 데이터를 요청하고 상태에 저장할 수 있습니다.

import { useEffect, useState } from "react";
import axios from 'axios';

const Login = () => {
    const [id, setId] = useState("");
    const [pwd, setPwd] = useState("");
    const [loginMessage, setLoginMessage] = useState("");

    const setInputId = (e) => {
        setId(e.target.value);
    };

    const setInputPwd = (e) => {
        setPwd(e.target.value);
    };

    const handleLogin = () => {
        axios.get("http://localhost:5000/api/users", {
            params: {
                id: id,
                pwd: pwd,
            }
        }).then(function (res) {
            // 서버에서 받은 응답 처리
            console.log(res.data);
        }).catch(function (error) {
            // 에러 처리
            console.log(error);
        });
    };

    return (
        <div>
            <h1>Login Form</h1>
            <form action="">
                <label htmlFor="id">ID </label>
                <input
                    type="text"
                    placeholder="Enter ID"
                    value={id}
                    onChange={setInputId}
                />
                <br/>
                <label htmlFor="pwd">Password </label>
                <input
                    type="password"
                    placeholder="Enter Password"
                    value={pwd}
                    onChange={setInputPwd}
                />
                <br/>
                <button onClick={handleLogin}>Login</button>
                <p>{loginMessage}</p>
            </form>
        </div>
    );
}

export default Login;

하지만 아직 서버가 구축 되어 있지 않은 상태 였기때문에 json-server 가상 서버를 통해 데이터를 전송 받을 수 있어서 json-server를 설치했다!

JSON Server는 로컬 개발 환경에서 가상 REST API를 제공해주는 도구이다. 로컬 환경에서 실제 백엔드 없이 JSON 파일을 가상으로 연결하여 데이터를 전송받을 수 있도록 도와준다. 이 방법은 로컬 환경에서 프론트엔드를 개발할 때 유용하게 활용된다고 한다.

1. JSON Server 설치:
   npm install -g json-server

2. JSON Server 실행:
   JSON Server를 실행하여 JSON 데이터를 REST API로 제공한다.

json-server --watch data.json --port 5000

이렇게 하면 http://localhost:5000/users 통해 가상의 사용자 데이터를 받아올 수 있다.

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

const LoginPage = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/users')
      .then((response) => {
        setUsers(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  // 로그인 폼과 로직을 구현
  // ...

  return (
    // 로그인 폼 렌더링
    // ...
  );
};

export default LoginPage;

data.json 파일을 생성해주었다

{
  "users": [
    { "id": "user1", "pwd": "1234" },
    { "id": "user2", "pwd": "5678" }
  ]
}

🤔🤔그런데 계속 네트워크 오류가 발생했다..

Failed to load resource: net::ERR_CONNECTION_REFUSED

login.jsx 구조도 계속 바꿔보고 GPT한테 물어봐도 계속 같은 대답뿐이었다..
뭔가 같은 터미널에서 5000번 포트로 여니까 3000번포트가 죽고 3000번 포트를 열면 5000번 포트가 죽기때문에 네트워크 오류가 발생하는 것 같았다! 근데 어떻게 두개 다 동시에 열게 하지... ? ?

다른 팀 조장한테까지 물어보면서 하루종일 붙들고 있었는데 알고보니까 그냥 터미널을 하나 더 열면 되는 거였다....ㅋㅋㅋㅋㅋㅋㅋㅋ

진짜 너무 어이없어서 죽을뻔 !!! 어떤 블로그를 찾아봐도 이런 내용이 없어서 돌고 돌았다..
너무 기본적인 내용이라서 그런거였을까요....ㅋㅋ 우리 프론트 팀원들 어이없이 웃음만 나왔다
그래도 성공했으니까 ㅠㅠ 너무 다행이지! 이렇게 오늘도 배웠다!!

5000번 포트로 json server열어주고!

터미널 하나 더 열어서 3000번 포트 열어주기!

😊😊
Package.json script에 저렇게 적어주면 ! 매번 저 코드를 입력하지 않아도 된다!
바로 npm run json-server 만 입력해줘도 실행됨 !