[Intellij] Spring boot+React(Gradle) 프로젝트만들기
Windows 10 환경에서 Intellij IDEA 2021.3.3 버전을 사용하였습니다.
1. Spring Initializr를 이용해 스프링 부트를 생성
start.Spring.io 를 접속하여
설정하여 Generate 를 해주어 파일을 사용합니다.
또는, Intellij 에서 Spring Initializr 를 활용할수 있습니다.
해당 글에서는 maven이 아닌 Gradle을 활용하고있어 maven을 gradle 로 변경 하여 사용하고 이 두개의 차이점은 추 후 포스팅할 것입니다.
2. react 설정 하여 Spring Boot와 연동하기.
설치를 완료한 후 Intellij 의 터미널을 활용하여 react를 만들어주기 위해
ProjectName/src/main 으로 경로를 이동시킨 후
create-react-app [projectName] 명령어를 입력합니다.
projectName 에는 임의로 정하여 만들면 되고 저는 reactjs 로 만들어주었습니다.
npx create-react-app reactjs 를 입력 해준 후 1~2분 간의 빌드가 진행됩니다.
정상적으로 실행 후 cd recatjs 실행 , npm start 를 실행 하였을때 react 페이지가 3000 포트로 실행이 된다면.
이런 화면이 출력 되고 그 후 npm install , npm run-script build , npm run eject 를 순서대로 실행시킵니다.
reactjs/config/paths.js 파일에 가서 appbuild 에 'build/static' 을 적어줍니다. (buildpath를 지워줬음.)
이 후 reactjs/build 로 가서 모든 파일을 지웁니다.
Spring의 build.gradle 로 가서
plugins {
id 'org.springframework.boot' version '2.6.4'
id 'io.spring.dependency-management' version '1.0.11.RELEASE'
id 'java'
}
group = 'hello'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'
configurations {
compileOnly {
extendsFrom annotationProcessor
}
}
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
compileOnly 'org.projectlombok:lombok'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
//해당 부분 부터 입력
def webappDir = "$projectDir/src/main/reactjs"
sourceSets {
main {
resources {
srcDirs = ["$webappDir/build", "$projectDir/src/main/resources"]
}
}
}
processResources {
dependsOn "buildReact"
}
task buildReact(type: Exec) {
dependsOn "installReact"
workingDir "$webappDir"
inputs.dir "$webappDir"
group = BasePlugin.BUILD_GROUP
if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
commandLine "npm.cmd", "run-script", "build"
} else {
commandLine "npm", "run-script", "build"
}
}
task installReact(type: Exec) {
workingDir "$webappDir"
inputs.dir "$webappDir"
group = BasePlugin.BUILD_GROUP
if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
commandLine "npm.cmd", "audit", "fix"
commandLine 'npm.cmd', 'install'
} else {
commandLine "npm", "audit", "fix"
commandLine 'npm', 'install'
}
}
//까지 입력
tasks.named('test') {
useJUnitPlatform()
}
주석 부분 소스를 추가해준 후 우측 gradle 에서 build를 클릭하여 실행하여줍니다.
마지마으로 reactjs/src/app.js 파일에 소스를 수정하여줍니다.
import logo from './logo.svg';
import './App.css';
import {useEffect, useState} from "react";
function App() {
const [message, setMessage] = useState([]);
useEffect(() => {
fetch("/hello").then((response) => {
return response.json();
}).then(function (data) {
setMessage(data);
});
}, []);
return (<div className="App">
<header className="App-header"><img src={logo} className="App-logo" alt="logo"/>
<p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"> Learn React </a>
<ul> {message.map((text, index) => <li key={`${index}-${text}`}>{text}</li>)} </ul>
</header>
</div>);
}
export default App;
그리고 springboot 서버를 킨 후 localhost:8080포트를 실행해주면 다음 결과가 나옵니다.
해당 이미지를 보면 SpringBoot 에서 Controller를 하나만들어서 입력해준 부분이 react에서도 출력되고있음을 볼수 있습니다 .("안녕하세요","히히히히")
해당 글은
https://hjjooace.tistory.com/entry/React-Spring-Gradle-Project-%EC%97%B0%EB%8F%99 ,
https://7942yongdae.tistory.com/136
블로그를 참고하여 작성하였습니다.
Author And Source
이 문제에 관하여([Intellij] Spring boot+React(Gradle) 프로젝트만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tkrxod/Intellij-Spring-bootReactGradle-프로젝트만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)