React와 Spring (gradle) 사용하기

부끄럽지만 해당 글은 남겨두도록 하겠습니다.

해당 방법은 Sping boot 프로젝트 내에 React를 build해서 view단으로 사용하는 느낌으로 생각하시면 될 것 같습니다.

하지만, 해당 방법으로 사용할 경우 jsp 등의 view를 사용하지 않고 React를 사용하는 장점의 많은 부분을 잃어버립니다.

따라서 권장하지는 않는 방법입니다 :(

혹시 처음 공부를 하시는 분이라면 Rest API 통신으로 데이터를 주고 받는 방식으로 하시는 걸 추천드리고 싶습니다.

(Spring boot의 Controller에서 url에 해당하는 API요청을 만들고, 결과를 리턴해주시고

프론트(React, Vue 등)에서는 axios 등의 통신을 사용해 서버에게 API 통신을 요청해서 결과를 받아 처리하는 방식으로 프로젝트를 구성하는 것)

맨 처음 웹 개발을 할 때 제가 겪었던 아주 기초적인 문제를 해결하는 과정과 성장 과정이 담겨있는 느낌이라 해당 글은 삭제하지 않고 남겨두도록 하겠습니다.

또, 혹시나 필요하신 분이 있을 수 있기도 하고 저에게 의미가 있는 글이라서요 ㅎㅎ

 

1. https://start.spring.io/ 에 접속해서 스프링 부트를 생성합니다.

(intellij나 이클립스에서 생성하셔도 됩니다.)

원하는 dependenciy 잡아주시면 됩니다.

 

2. intellij로 스프링 부트 프로젝트를 연 후 github 연동을 확인합니다.(이게 되어 있지 않으면 이후 연동 시 오류가 발생합니다.)

3. 스프링 부트 프로젝트 파일을 이용해 repository를 생성합니다.

 

4. Terminal에서 스프링 부트 프로젝트의 src/main 경로로 이동합니다.

이후 CRA 명령어를 사용합니다.

npx create-react-app react프로젝트명

저는 연습할 때 썼던 스프링 부트 프로젝트라 위에서 생성한 것과 패키지 명이 다릅니다.

 

5. 생성된 react 프로젝트 파일로 이동해 실행해봅니다.

cd react프로젝트명
npm start

 

 

6. react 프로젝트의 package.json 파일을 연 후

proxy를 추가해줍니다.

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

7. commit과 push를 해줍니다.(intellij 기능을 쓰셔도 되고, 직접 터미널에서 해주셔도 됩니다.)

push가 제대로 되었는 지 혹시나 repository에 확인해보세요.

push가 제대로 안 되었다면 이후 eject에서 오류가 납니다.

 

8.

npm install

 

9.

npm run-script build

 

10. eject를 해줍니다.

혹시나 여기서 오류가 난다면 git 연동이 제대로 되어 있는 지 확인해보시고, 6번부터 다시 해보시기 바랍니다.

npm run eject

 

11. react 프로젝트의 config/paths.js 파일을 수정해줍니다.

appbuild를 build/static으로 해주시면 됩니다.

 

12. react 프로젝트의 build 내의 모든 파일을 삭제합니다.

13. spring 프로젝트의 build.gradle 에 아래 내용을 추가해줍니다.

(맨 위에 react프로젝트명 변경해주세요.)

def webappDir = "$projectDir/src/main/react프로젝트명"
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'}
}

14. build를 해줍니다.

15. 밑 그림처럼 jar 파일을 실행해 준 후 localhost:8080으로 접속하시면 완료됩니다.

 

이후에는 spring boot 프로젝트를 실행만 시켜도 됩니다 ㅎㅎ

주로 https://hjjooace.tistory.com/entry/React-Spring-Gradle-Project-%EC%97%B0%EB%8F%99#none

이 블로그 내용을 참고했습니다.

다만 저는

execution failed for task ':buildreact'. > process 'command 'npm.cmd'' finished with non-zero exit value 1

에러가 계속 나와서 타 블로그와 메이븐 사용하는 다른 방법까지 계속 찾아봤습니다...ㅎㅎ

문제는 결국 proxy랑 git 연동이 주 문제였습니다.

react를 사용하는 데 node.js를 안 쓰고 굳이 spring 쓰는 이유는

학교 커리큘럼이 spring을 배우기 때문에 학교 공부에도 도움이 될까 싶어서

쓰려고 하다 보니 여기까지 공부했습니다.

제 글이 다른 분들한테도 도움이 많이 됐으면 좋겠습니다 ㅎㅎ