SpringBoot에 React 연동하기

peace w·2024년 7월 23일

포스팅 목적

개인 프로젝트를 진행하면서 프론트와 백을 둘 다 개발하기 위해 스프링부트와 리액트를 연동하기로 함

개발 환경

OS : Windows
IDE : IntelliJ
Framework : Spring Boot 3.3.2 / React 16.20
Language : Java 17
Build : Gradle
DB : MariaDB

스프링부트 프로젝트 생성

Spring Boot 3 이상 버전을 쓰는 경우 Java 17버전 이상을 사용해야한다
필요한 의존성들을 추가한다
application.yml에 db 설정을 추가로 입력한다. (mariaDB를 사용)

spring:
  datasource:
    url: jdbc:mariadb://localhost:3306/databasename
    driver-class-name: org.mariadb.jdbc.Driver
    hikari:
      username: username
      password: password
    jpa:
      show-sql: true
      properties:
        hibernate:
          format_sql: true

애플리케이션 실행 후 localhost:8080페이지가 잘 뜨는지 확인한다

리액트 설치

node -v
npm -v

먼저 npm과 Node.js가 제대로 설치되어 있는지 확인한다

cd src/main
npx create-react-app frontend

메인 아래에 프로젝트를 생성한다

cd frontend
npm start

프론트엔드 폴더로 이동 후, npm start 시 localhost:3000으로 실행된다면 성공

Proxy 설정, CORS 방지

리액트 프로젝트는 localhost:3000으로 열리고, 서버는 localhost:8080으로 열리기 때문에 origin이 달라진다
그래서 CORS 에러가 발생하기 때문에 Proxy 설정을 해줘야한다
CORS란 무엇인가?
React 프로젝트의 package.json에서 proxy를 추가한다
이 때, URL은 본인이 만든 서버의 URL과 포트를 적는다

통신 테스트

백엔드와 프론트간의 통신이 정상적으로 이루어지는지 테스트를 수행한다

package com.example.movie.Controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Arrays;
import java.util.List;

@RestController
public class TestController {
    @GetMapping("/api/test")
    public List<String> Test() {
        return Arrays.asList("테스트합니다.", "테스트테스트");
    }
}

백엔드 단에 테스트용 Controller를 다음과 같이 작성한다.

import React, {useState, useEffect} from "react";
import logo from './logo.svg';
import './App.css';

function App() {
  const [msg, setMsg] = useState([]);
  useEffect(() => {
    fetch('api/test')
        .then((res) => {return res.json();})
        .then((data) => {setMsg(data);})
  }, []);
  return (
      <div className="App">
        <header className="App-header">
          <ul>
            {msg.map((content, idx) => <li key={`${idx} - ${content}`}>{content}</li>)}
          </ul>
        </header>
      </div>
  );
}

export default App;