13.Spring(연동)

박종현·2024년 3월 24일

스프링 프로젝트

목록 보기

13/14

Spring 연동-2

저번 시간에는 스프링과 리액트를 연동해 Get방식으로 요청하면, 데이터를 제공하는 방식을 구현했고, 그 과정에 발생한 CORS 문제를 해결하는 방식으로 프록시를 선택하는 과정까지 이루어져 있었다. 이번 시간에는 POST방식으로 데이터를 제공하면, 데이터를 가공해서 넘기는 과정을 설명하고자 한다.

🔧Axios?

우선, 설명에 앞서 저번시간에 설명을 놓친 부분이 있었는데, GET, POST, PUT, DELETE등을 처리하는 방식으로 Axios를 선택했다. 네트워크 요청이 필요하게 된다면, Fetch나 Axios 같은 HTTP 클라이언트를 주로 사용하게 된다. 설명을 간략하게 해보자면,

Fetch

Fetch의 장점으로는, 사용하는데 준비과정이 필요없다. 리액트를 사용할 때, node.js를 설치해서 사용하게 될텐데, 모던 브라우저에 내장되어있기 때문에, 별다른 설치나 준비없이 사용할 수 있게 된다.
단점으로는 Axios보다 JSON으로만 데이터를 관리할 수 있어서 JSON 형식으로 파싱해야한다는 것이다. 요청하고자하는 객체에 더 많은 설정/구성을 해주어야 하고, JSON 파일로 호출하여 데이터를 파싱해야 한다. 그리고, 지원하지 않는 브라우저가 존재하며, 에러 발생시 timeout이 존재하지 않는다는 것이다.

Axios

Axios의 장점으로는, 데이터를 처리하는데 있어 response.data과 같은 방식으로 데이터를 접근하고 처리할 수 있어 코드가 비교적 간결하고 직관적으로 변하게 된다. 구형 브라우저도 지원하는 등 크로스 브라우징 최적화가 되어있다는 점이다. 그리고 HTTP Request의 인터럽트 기능을 사용할 수 있다.
단점으로는 모듈을 직접 설치해야하므로 설치되어 있지않다면 사용할 수 없다는 점이다. 하지만 서드파티 패키지로 설치를 쉽게 할 수 있다.

이러한 이점으로 Fetch보단 Axios를 사용할 예정이다.

Post 구현

Post를 구성할 때, 들어온 데이터를 확인하고 검증한 후 처리하여 보내는 형식이 가능하다. 회원가입 페이지를 작성할 때, 아이디 중복검사를 만든 것처럼 구현하고 적용할 수 있도록 만들 수 있지만, 가볍게 데이터를 보냈을때, 서버측에서 log로 그 값을 출력해 제대로 왔는지 확인하고 데이터를 전송하고, 클라이언트측에서는 서버측에서 전송된 데이터를 확인하고 alert로 확인하는 과정을 구현 할 예정이다.

Spring

    @PostMapping("/api")
    public String postMethodName(@RequestBody String entity) {
        //TODO: process POST request
        System.out.println(entity);
        return "데이터 받기 성공";
    }

서버측인 Spring에서는 Post 요청이 온다면 데이터를 받고 System.out.println(entity)를 통해 로그로 출력한 후, 데이터 받기 성공이라는 문자열을 클라이언트 측으로 전송하는 코드이다.

React

import React from "react";
import { useForm } from "react-hook-form";
import axios from 'axios';



function LoginForm() {
    const { register, handleSubmit, watch } = useForm();

    const clickLogin = data =>{
        axios.post("/api",
        {
            username: data.username,
            email: data.email,
            password: data.password
        }).then((res) => {
            alert(res.data)
            })
        }

    return(
        <form onSubmit={handleSubmit(clickLogin)}>
            <label htmlFor="username">아이디</label>
            <input type="text" id="username" placeholder="qwe123" {...register("username")}/>
            <label htmlFor="email">이메일</label>
            <input id="email" type="email" placeholder="xx@email.com" {...register("email")}/>
            <label htmlFor="password">비밀번호</label>
            <input id="password" type="password" placeholder="password" {...register("password")}/>
            <button type="submit" >로그인</button>
        </form>
    );    
}

export default LoginForm;

클라이언트인 React에서는 Form 형식으로 구현된 입력칸을 바탕으로 데이터를 입력받고, 그 데이터들을 확인하고, 로그인 버튼을 누르면 데이터들을 POST해서 서버측으로 보낸 후, 데이터를 수신했다면 alert로 서버측 데이터를 보여주는 방식이다.

결과 이미지

빈칸에 원하는 데이터를 기입하여 로그인 버튼을 누른다.

클라이언트측으로 딕셔너리 형태로 데이터가 왔음을 확인할 수 있게된다.

서버측에서 데이터 받기 성공이라는 문자열이 왔고, alert로 출력된 것을 확인할 수 있다.
클라이언트측에서 들어온 데이터를 처리하는 방법은 저렇게 딕셔너리 형태로 들어온 데이터를 처리해서 가공해서 다시 return 값으로 출력하면 된다.