Published on

SpringBoot와 React 연동

👉🏻 참고블로그

개발환경

  • MySQL 8.0.34
  • SpringBoot 3.0.5
  • Java 17
  • Intellij
  • Windows

1. SpringBoot

링크에서 SpringBoot 프로젝트 생성해 주기

❕ 주의할 점

스프링부트 3.0 이상 사용 시 Java 17 이상 사용

javax 패키지 -> jakarta로 변경

2. React

react 개별환경 만들어 주기

cd src/main
npx create-react-app frontend

실행 커맨드

cd frontend
npm start

3. Proxy 설정

frontend 폴더 내에서 관련 모듈 설치하기

npm install axios --save
npm install http-proxy-middleware --save

package.json에서 proxcy 추가

"proxy": "http://localhost:8080"

4. CORS 오류 발생 시 설정 파일 추가

package com.{project명}.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE");
    }
}

5. MySql 연동

나는 Mysql 연동 시 계속 아래와 같은 오류가 발생했다. mysql-connector-java 의존성을 찾지 못해서 발생하는 오류이다.

java.lang.classnotfoundexception: com.mysql.cj.jdbc.driver at java.base/jdk.internal.loader.builtinclassloader.loadclass(builtinclassloader.java:641) at java.base/jdk.internal.loader.classloaders$appclassloader.loadclass(classloaders.java:188)

image 스프링 공식문서에서 확인해 보니 groupId 및 artifactId가 변경된 것!

아래와 같이 바꿔주니까 연동 잘 된다~

  • build.gradle 설정
dependencies {
	runtimeOnly 'com.mysql:mysql-connector-j'
}
  • application.properties 설정
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://<IP>:<PORT>/<DB>?serverTimezone=UTC&characterEncoding=UTF-8
spring.datasource.username=<USERID>
spring.datasource.password=<PASSWORD>

spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.format_sql=true