Spring+React 연동

백엔드 개발은 API 개발이 주가 된다. 프론트에서 요구하는 데이터의 포맷이나 데이터베이스 입출력 및 다양한 비즈니스 프로세스를 코드로 구현하고 이를 위한 DB를 설계하고 백엔드 프레임워크를 이용하여 앱을 구현하는 것이 주요 업무다. 여기에 백엔드 프레임워크와 프론트엔드 서버를 이어주는 서블릿, WSGI 등의 미들웨어 기술도 필요하다. API 명세를 설계하고 실제 배포 단계에서 최대한 문제가 발생하지 않도록 체계적으로 구성하는 능력도 필요하다. -나무위키 출처

웹페이지를 개발하는데 프론트엔드와 백엔드가 연결되야 제대로 웹 페이지가 구성되었고, 개발된다고 생각한다. 이러한 연동과정을 한 부분에서만 실행되는 것이 아닌, 두 부분 모두 고려하여 개발해야 한다는 생각이다. 이러한 데이터를 송수신 하는 부분을 해보아야 백엔드만 개발하여 프론트엔드를 생각하지 못하는 개발을 하지 않을 수 있다고 생각해서, 리액트와 스프링의 연동과정을 수행해보고자 한다.

Spring 연동 과정

Spring 측에서는 React측에서 GET, POST, PUT, DELETE와 같은 요청을 URL로 보내게 된다. 서버에서는 특정 URL로 특정 요청이 오고, 그에 해당하는 데이터를 보내줄 것이다. 이를 Spring에서는 이전에 배웠던 GetMapping, PostMapping와 같은 컨트롤러를 통해 데이터를 처리할 수 있다. 코드로 확인해 보겠다.

    //컨트롤러에 작성.
    @GetMapping("/")
    public String home() {
        return "hello";
    }

코드를 확인해보면, Get 요청이 /즉 메인페이지로 오면, hello라는 문자열을 보내라는 의미가 된다. 하지만 앞선 공부를 확인해보면, 메인페이지로 이동할 때, hello.html로 이동했었다. 이러한 이유는, 데이터를 보내기 전에, templete에 동일한 이름을 가진 html을 확인하고 있다면 띄우는 기능이 있다.
이러한 방식으로 데이터를 처리하기 위해서, 코드를 추가로 작성한다.

    @GetMapping("/api/test")
    public String hello() {
        return "테스트아닙니다.";
    }

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

GetMapping은 서버에서 데이터를 제공하는지 확인하기위해 작성하고, PostMapping은 페이지에서 서버로 데이터를 잘 제공해주는지 확인하고자 작성하였다.

React 연동과정

//Get
import {useEffect, useState} from "react";
import axios from "axios";

function App() {
    const [hello, setHello] = useState('');

    useEffect(() => {
        axios.get('/api/test')
            .then((res) => {
                setHello(res.data);
            })
    }, []);
    return (
        <div className="App">
            백엔드 데이터 : {hello}
        </div>
    );
}

export default App;

GetMapping을 확인하기 위한 페이지이다. /api/test에 Get요청을 보내면, Spring은 "테스트 아닙니다"라는 문자열을 페이지 측으로 보내게되고, React는 sethello를 통해 돌아온 데이터인 문자열을 hello로 설정하고, 데이터를 입력한 상태로 렌더링하게 된다.

//데이터가 들어오지 않으면
백엔드 데이터 :
//데이터가 온다면,
백엔드 데이터 : 테스트 아닙니다

문제 발생과 해결과정(CORS)

이렇게 설정한다면 연결이 되어야하는데... 당연히 되지않는게 맞다. 왜냐면, CORS 문제가 생기기 때문이다. CORS 문제란? Cross-Origin-Resours-Sharing로, Protocol, Host, Port가 동일 해야한다는 것을 의미한다. 보통 리액트는 3000번 포트, 스프링 8080번 포트를 사용하기 때문에, 포트가 동일하지 않아 CORS에러가 뜨게 된다. 해결하는 방법은 첫번째, 서버측에서 허용할 출처를 기재해서 클라이언트에 기재하여 응답하는 것. 두번째, 프록시 서버를 사용하여 포트를 동일하게 만들어주면 되는 것이다. 여기에서는 프록시를 사용하여 포트를 지정해 연결해 주려고 한다.

Proxy

프록시를 사용하기위해, http-proxy-middleware를 사용할 것이다.

//http-proxy-middleware 설치
npm install http-proxy-middleware

작성 후, react폴더에 setupProxy.js파일을 만든다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080/api',	// 서버 URL or localhost:설정한포트번호
      changeOrigin: true,
    })
  );
};

작성하면, /api로 요청하면, 포트번호를 8080으로 바꾸어서 요청을 보내게 된다. 그렇게 되면 CORS 문제를 해결할 수 있다. 다른 서버나 다른 포트번호를 바꾸고 싶다면 createProxyMiddleware를 사용해 타겟을 늘리면된다. 이렇게 하면 문제가 해결된다.

다음 계획

Post에 대한 처리와 데이터에 관한 처리를 할 계획이다.

수정

Axios 404 에러가 발생하면 참고.
Axios 404