IntelliJ에서 Spring boot+React 연동하기

 

 

 

 

Spring boot 프로젝트 생성

 

InteliJ 설치 (Community버전)

• 아래 링크에서 IntelliJ를 다운

IntelliJ IDEA | 다른 버전

 

 

 

 

Spring initializr로 프로젝트 생성

• 스프링 이니셜라이저 : 스프링 부트 프로젝트를 간편히 설정하여 생성하는 도구
• 아래 링크에 접속하여 프로젝트를 생성할 수 있다.

https://start.spring.io/

 

 

프로젝트명 : exam

의존성(우측 Dependencies)으로는 Spring Web, Lombok, MySQL Driver, Spring Data JPA를 선택한 후 생성한다.

 

 

 

프로젝트 Open 및 InteliJ 설정

• 생성된 프로젝트 .zip 파일 압축 해제 후 워크스페이스에 넣기
• 좌측 상단 메뉴에서 [열기] 를 클릭하여 프로젝트 불러오기
• 설정 > 빌드, 실행, 배포 > Gradle에서 빌드 및 실행 옵션을 변경한다.
• defalut인 Gradle에서 InteliJ IDEA로 변경

 

 

 

 

application.properties 수정

• DB 의존성을 추가한다. (MySQL 기준)

spring.application.name=exam
spring.datasource.url=jdbc:mysql://localhost:3306/reactboard?serverTimezone=Asia/Seoul&useSSL=false
spring.datasource.username=root
spring.datasource.password=1234
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

 

 

 

 

실행

• 프로젝트명/src/main/Java 에 있는 Application을 우클릭하여 실행한다.
• 이후 localhost:8080 접속 시 화이트라벨 페이지가 뜬다면 정상 실행된 것

 

 

 

---

 

 

Spring boot와 React 연동하기

 

 

InteliJ에서 터미널 열고 React 프로젝트 생성

cd src/main
npx create-react-app {react 프로젝트명}
# npx create-react-app reactboard

• 프로젝트/src/main 아래에 react app(reactboard)을 생성
• react 프로젝트명에 대문자가 있으면 에러남

 

생성은 대략 5~10분 정도 소요된다.

 

 

 

React 시작해보기

• 인텔리제이 터미널에서 명령어 수행

# 리액트 앱 위치로 이동
cd src/main/reactboard

npm install
npm start

 

 

이후 localhost:3000 접속 시 리액트 화면이 뜨면 성공!

 

터미널에서 Ctrl + C 시 리액트 종료

 

 

 

 

build.gradle에 코드 추가

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.5.4'
	id 'io.spring.dependency-management' version '1.1.7'
}

group = 'com.first'
version = '0.0.1-SNAPSHOT'


java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(17)
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.mysql:mysql-connector-j'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
}

def frontendDir = "$projectDir/src/main/reactboard"


// React 빌드 파일 삭제
task cleanReactBuild(type: Delete) {
	delete "$projectDir/src/main/resources/static/*"
}

// React 설치
task installReact(type: Exec) {
	workingDir frontendDir
	group = "build"
	if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
		commandLine 'cmd', '/c', 'npm install'
	} else {
		commandLine 'npm', 'install'
	}
}

// React 빌드
task buildReact(type: Exec) {
	dependsOn installReact
	workingDir frontendDir
	group = "build"
	if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
		commandLine 'cmd', '/c', 'npm run build'
	} else {
		commandLine 'npm', 'run', 'build'
	}
}

// React 빌드 파일 복사
task copyReactBuildFiles(type: Copy) {
	dependsOn buildReact
	from "$frontendDir/build/"
	into "$projectDir/src/main/resources/static"
}

// processResources task에 연결
tasks.named("processResources") {
	dependsOn copyReactBuildFiles
}

// bootRun task에 연결
tasks.named("bootRun") {
	dependsOn copyReactBuildFiles
}

• 전체적인 흐름은 React 빌드 파일을 복사하여 Spring Boot 빌드/실행과 연결하는 것
• frontendDir 같은 경로 부분은 자기 프로젝트에 맞게 변경해줘야한다. 

 

 

 

 

빌드 및 실행

 

.jar 위치 확인

파일	실행가능 여부	포함 내용	용도
exam-0.0.1-SNAPSHOT.jar	가능	내장 톰캣 + 모든 라이브러리	Spring Boot 애플리케이션 배포
exam-0.0.1-SNAPSHOT-plain.jar	불가	프로젝트 클래스만 포함	라이브러리 용도, 다른 프로젝트 참조

 

 

인텔리제이 터미널에 명령어 입력

# 그래들 빌드
.\gradlew build

# jar가 있는 폴더로 이동
cd .\build\libs 

# jar 실행
java -jar exam-0.0.1-SNAPSHOT.jar

 

jar 파일 단독 실행 방식, 이렇게 하면 빌드 이후 터미널에서 스프링 부트와 리액트를 포함한 .jar가 실행된다.

 

 

 

localhost:8080 접속 시 리액트 화면이 보인다면 연동 성공!

 

마찬가지로 터미널에서 Ctrl + C 시 종료된다.