- 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)
스프링 공식문서에서 확인해 보니 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