Spring Boot와 React 연동: 개발 환경 구성

React와 Spring Boot 연동: 개발 및 배포 흐름

 

프로젝트 의존성 목록

- 프론트엔드 (React) 

axios	1.7.9	HTTP 클라이언트 라이브러리 (API 호출)
react	19.0.0	React 프레임워크
react-dom	19.0.0	React DOM 렌더링
react-router-dom	7.1.3	React의 라우팅 라이브러리
react-scripts	5.0.1	React 프로젝트 빌드 및 실행
cra-template	1.2.0	Create React App 템플릿
http-proxy-middleware	2.0.6	백엔드 프록시 설정을 위한 라이브러리
web-vitals	4.2.4	웹 성능 측정 도구

- 백엔드 (Spring Boot) 

spring-boot-starter-web	최신 버전	REST API 및 웹 애플리케이션 개발
mariadb-java-client	3.1.2	MariaDB 데이터베이스 드라이버
slf4j-api	1.7.36	로깅을 위한 SLF4J 인터페이스
logback-classic	1.2.11	로깅 프레임워크 (Logback)
spring-boot-devtools	최신 버전	개발용 도구 (핫 리로드 기능 제공)
spring-boot-starter-test	최신 버전	테스트용 라이브러리 모음
junit-platform-launcher	최신 버전	JUnit 테스트 실행 도구
spring-boot-starter-data-jpa	최신 버전	JPA를 통한 데이터베이스 작업 지원

---

프로젝트 구조

프로젝트 루트/
│-- src/
│   ├── main/
│   │   ├── frontend/  # 프론트엔드 (React)
│   │   │   ├── public/
│   │   │   ├── src/
│   │   │   │   ├── components/      # UI 컴포넌트 폴더
│   │   │   │   ├── pages/           # 페이지 폴더
│   │   │   │   ├── services/        # API 요청 로직 폴더
│   │   │   │   ├── App.js            # 메인 React 컴포넌트
│   │   │   │   ├── index.js          # React 진입점

│   │   │   ├── setupProxy.js      # 프록시 설정 (React → 스프링)
│   │   │   ├── package.json          # React 패키지 관리
│   │   │   ├── start_server.sh        # 서버 실행 스크립트(인텔리제이)
│   │   ├── java/  # 백엔드 (Spring Boot)
│   │   │   ├── me/jeong/movieinfo/
│   │   │   │   ├── config/
│   │   │   │   │   ├── CorsConfig.java  # CORS 설정
│   │   │   │   │   ├── WebConfig.java   # 웹 설정
│   │   │   │   ├── controller/
│   │   │   │   │   ├── ReactController.java  # API 컨트롤러
│   │   │   │   ├── MovieinfoApplication.java # 메인 애플리케이션 실행
│   │   ├── resources/  # 리소스 파일 (application.properties 등)
│-- test/  # 테스트 관련 파일
│-- build.gradle      # Gradle 빌드 설정(의존성)
│-- package.json      # 프론트엔드 패키지 관리
│-- gradlew           # Gradle 실행 스크립트 (Linux/Mac)
│-- gradlew.bat       # Gradle 실행 스크립트 (Windows)
│-- .gitignore        # Git에 올리지 않을 파일 목록
│-- README.md         # 프로젝트 설명 파일

---

기본 설정 및 환경 구성

Spring, DB 연결 정보와 JPA 설정

spring.application.name=movieinfo

# Database
spring.datasource.url=jdbc:mariadb://localhost:3307/movieinfo?allowPublicKeyRetrieval=true&useSSL=false
spring.datasource.username=
spring.datasource.password=
spring.datasource.driver-class-name=org.mariadb.jdbc.Driver

# Hibernate
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MariaDBDialect

Proxy

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

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8080',  // 백엔드 포트 설정
            changeOrigin: true,
            logLevel: 'debug',  // 디버깅 활성화
        })
    );
};