[React] Spring Boot와 React 프로젝트 Rest API 연동하기

Spring Boot와 React 프로젝트 간 Rest API를 연동하는 방법에 대해 알아보도록 하자.

이를 통해 백엔드와 프론트엔드 간의 통신을 설정하여 데이터를 주고받을 수 있다.

 

💡Spring Boot 프로젝트 생성

---

Spring Starter Project

Spring Starter Project로 새로운 Spring Boot 프로젝트를 생성한다.

의존성 라이브러리로는 Spring Boot DevTolls, Lombok, WebSocket, MyBatis Framework, Oracle Driver, Thymeleaf, Spring Web을 추가하였다.

또는 Spring Initializr를 사용하여 새로운 Spring Boot 프로젝트를 생성하여 Import해도 된다.

 

Application.java

package com.test.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication(exclude = SecurityAutoConfiguration.class)
@MapperScan(basePackages = {""})
public class DemoprojectApplication extends SpringBootServletInitializer {

	public static void main(String[] args) {
		SpringApplication.run(DemoprojectApplication.class, args);
	}
	
}

Spring Security 의존성을 추가할 경우 @SpringBootApplication(exclude = SecurityAutoConfiguration.class) 코드를 추가하여 로그인 화면이 첫 화면으로 표시되지 않게 할 수 있다.

 

application.properties

# Server Port
server.port=8090

# JSP
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp
server.servlet.context-path=/demo

# JDBC + MyBatis
spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe
spring.datasource.username=hr
spring.datasource.password=java1234
spring.datasource.hikari.minimum-idle=5
spring.datasource.hikari.maximum-pool-size=20
spring.datasource.hikari.idle-timeout=30000
spring.datasource.hikari.max-lifetime=2000000
spring.datasource.hikari.connection-timeout=30000

# Thymeleaf
spring.thymeleaf.enabled=true
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML
spring.thymeleaf.check-template=true
spring.thymeleaf.check-template-location=true

spring.thymeleaf.cache=false
mybatis.configuration.map-underscore-to-camel-case=true​

개발 환경을 위해 프로퍼티 설정을 해 주었다.

 

💡React 프로젝트 생성

---

2024.02.08 - [Programming/React] - [React] 개발자 환경 구축: Node.js, Create React App

[React] 개발자 환경 구축: Node.js, Create React App

React 프로젝트를 생성하기 위해 위 글을 참고하여 Node.js, Create React App를 설치하도록 한다.

VS Code 환경에서 React 프로젝트를 생성하지만, 전역으로 설치되므로 STS-3에서도 실행할 수 있다.

 

Create React App

cd src/main
npx create-react-app frontend

Create React App을 사용하여 새로운 React 프로젝트를 생성하도록 하자.

src\main 폴더로 이동하여 create-react-app 명령어로 frontend 폴더에 react 프로젝트를 생성하였다.

 

React 실행

cd frontend
npx start​

React를 실행하려면 frontend 폴더에서 cmd를 실행하여 npm start를 해주면 된다.

React는 3000 포트로 실행되며, 만약 3000에서 실행 중인 서버가 있을 경우 3001 포트로 실행된다.

 

package.json 설정

"proxy": "http://localhost:8090",

CORS 문제를 방지하기 위해 Proxy 설정이 필요하다.

package.json 파일에서 proxy 값을 추가하여 Spring Boot 프로젝트의 포트를 작성하면 된다.

만약 본인이 사용하는 포트 번호가 8090이 아닌 8080일 경우 해당 포트로 작성한다.

 

CORS

CORS는 "Cross-Origin Resource Sharing"의 약자로, 웹 애플리케이션에서 발생하는 보안 정책이다.

이 정책은 웹 페이지가 다른 출처의 자원을 요청하는 것을 제한하는 보안 메커니즘으로, 출처(Origin)란 프로토콜, 호스트, 포트로 구성된 URL을 의미한다.

proxy 값을 설정하여 프론트엔드 앱에서 백엔드 서버로의 요청을 보낼 때 CORS 문제를 회피할 수 있다.

 

💡React와 Springboot 서버 API 통신

---

React 애플리케이션 내에서 API를 호출하고, 데이터를 받아오는 방법을 구현해 보도록 하자.

백엔드에서 정의한 엔드포인트를 호출하여 데이터를 전달받고, 받아온 데이터를 React 애플리케이션에서 화면에 표시할 것이다.

 

RestMainController.java

package com.test.demo.controller;

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

@RestController
public class RestMainController {

	@GetMapping("/api/data")
	public String test() {
		return "Hello React!";
	}
}

Rest Controller를 작성하여 API 엔드포인트를 생성하였다.

 

App.js

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

function App() {
   const [data, setData] = useState('')

    useEffect(() => {
        axios.get('/demo/api/data')
        .then(res => setData(res.data))
        .catch(err => console.log(err))
    }, []);

    return (
        <div>
            받아온 값 : {data}
        </div>
    );
}

export default App;

백엔드의 RestController에 API를 만들고, get 요청을 받아 값을 리턴하도록 하고, 프론트의 JS에서 값을 받아 화면에 출력하도록 했다.

만약 필요한 경우 데이터를 가공하거나 UI에 반영할 수 있다.

 

axios 프로젝트의 종속성 오류

npm install axios

Axios 모듈이 프로젝트에 설치되어 있지 않기 때문에 문제가 발생했다. Axios는 프로젝트의 종속성으로 설치되어 있어야 하므로 frontend 폴더에서 명령을 실행하여 Axios를 설치하면 문제가 해결된다.

서버에 요청을 보낼 수 있는 HTTP 클라이언트로 Axios 또는 Fetch API 등을 사용할 수 있다.

 

💡GitHub 연동

---

frontend 폴더의 git 폴더 삭제

cd src/main/frontend
rm -rf .git/​

git 파일이 중복으로 들어가 있을 경우 GitHub에 올라가지 않는다.

React 프로젝트를 생성하는 시점에 git 폴더가 자동으로 생성되기 때문에 이를 삭제해 주어야 한다.

 

참고 자료

CORS errors, MDN contributors,  2023.10.25.

SpringBoot + React 프로젝트 생성 방법 - 깃허브 연동까지, JDevelog, 2023.07.31.