[React + Spring]리액트와 스프링 - 연동

📝 Spring에 React 프로젝트 만들기 

스프링과 리액트를 연결해서 간단한 프로젝트를 해보자!

🚩 Spring 프로젝트 만들기 

Spring Initializr

 

• 의존성으로 롬복과 스프링 웹만 추가해주었다(저 사이트를 사용하면 스프링부트는 자동 추가된다.)

🚩 React 프로젝트 만들기

터미널을 이용해서 스프링 프로젝트 src/main 부분에 리액트 프로젝트를 생성하면 된다.

 

뭔진 몰라도 이상하게 intellij에서  npx 명령어가 안되서 vscode로 진행하였다.

 

완성된 Spring + React 프로젝트 모습

📝 프로젝트 연동

리액트와 스프링은 각각 Localhost:3000번 포트와 8000번 포트를 사용한다.
우리는 이것을 같게 만들어서 연동해주어야 한다. 

 

만약 다르게 실행하면 CORS 오류가 생긴다. 

CORS(Cross-Origin Resource Sharing) 오류는 웹 브라우저에서 발생하는 보안 기능으로, 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근하려고 할 때 발생합니다. 출처는 도메인, 프로토콜, 포트의 조합으로 정의됩니다.

예를 들어, https://example.com에서 실행 중인 자바스크립트 코드가 https://api.otherdomain.com에 있는 리소스에 접근하려고 할 때 CORS 오류가 발생할 수 있습니다. 이는 웹 브라우저가 보안상의 이유로 기본적으로 다른 출처의 리소스에 접근하는 것을 차단하기 때문입니다. - ChatGPT씨 답변

🚩 Proxy 설정하기

CORS 오류를 방지하기 위해 React 프로젝트에서 Proxy 설정을 해주어야 한다.

 

그러기 위해서는 리액트 프로젝트의 package.json 파일에 다음과 같이 proxy 필드를 추가할 수 있다.

"proxy": "http://Localhost:8080"

 

package.json 코드

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://Localhost:8080" //프록시 설정
}

이렇게 하면, 리액트 개발 서버는 모든 API 요청을 'http://Localhost:8080'으로 프록시한다.

 

만약 다른 사이트에서도 요청이 필요하다면 setupProxy.js 파일을 통한 미들웨어 방식을 사용해도 된다.

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

module.exports = function(app) {
  app.use(
    '/api', // 프록시할 경로
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
    })
  );
};

 

📝React + Spring 테스트 해보기 

React에서 Spring 서버에 요청을 어떻게 보낼까?
가장 인기 있는 라이브러리인 Axios를 사용하면 된다.

 

Axios는 Node.js에서 가장 인기있는 HTTP 클라이언트 라이브러리로, 비동기적으로 HTTP 요청을 보내고 응답을 처리하는 데 사용된다.

npm install axios

React 프로젝트

Spring의 /api/test로 요청을 보내보자 

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

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

  useEffect(() => { 
    axios.get('/api/test')
        .then((res) => {
          setHello(res.data);
        })
  }, []); //이펙트 훅으로 뒤의 변수가 비어있으면 처음 생성 시에 실행
  return (
      <div className="App">
        백엔드에서 온 데이터: {hello}
      </div>
  );
}

export default App;

Spring 프로젝트

@RestController
public class TestController {

  @GetMapping("/api/test")
  public String hello() {
    System.out.println("호출확인");
    return "테스트입니다.";
  }

}

 

🚩결과

Frontend

 

Backend