작성일
20240112, 20240115, 20240122, 20240124, 20240126
스프링부트와리액트활용하여 웹 애플리케이션을 만드는 다양한 방법 중에서 인텔리제이 커뮤니티 버전을 이용하여 스프링부트(Spring Boot) 프로젝트 내부에 리액트 구성하는 방법을 택하려고 한다.
이때, 리액트를 환경설정하는 방법도 여러가지가 있는데 나는npm을 사용하였음을 미리 알린다. 더불어 데이터베이스로는MySQL을 사용하였다.
➡️ STEP 01. Node.js 설치하기
리액트를 사용하기 위해서는 HTML 파일에 React 라이브러리를 설치하면 된다. 하지만 이렇게 직접 설치하면 번거롭고 오래걸리기 때문에 Node.js를 추가로 사용해서 편하게 설치해보자. 말해두지만 리액트에서 Node.js가 필수로 필요한 것은 아니지만, Node.js를 설치하면 NPM(Node Package Manager)이라고 해서 모듈을 다운받을 수 있게 해줘서 프론트엔드 개발을 보다 편하게 할 수 있다.
1) 구글 검색창에 node.js 검색하여 download 링크 클릭하면 아래와 같은 페이지를 볼 수 있다. (https://nodejs.org/en/download/current)
2) 본인 컴퓨터 운영체제에 맞는 버전의 Installer를 다운받은 후, 쭉쭉 next 버튼 누르다가 Finish 버튼을 마지막에 눌러주면 끝난다.
참고로 npm은 node.js 로 만들어진 프로그램을 쉽게 설치해주는 앱 스토어이고, npx는 이러한 노드 패키지 실행해주는 도구이다. 정리하자면 npm을 설치하기 위해서는 node.js를 설치하면 되는 것이다.
CF.
./App이란?
[초보자] React 설치부터 배포까지의 과정을 정리
https://dev.classmethod.jp/articles/the-process-from-installing-react-to-distributing-it/
➡️ STEP 02. IntelliJ에서 Spring Boot 프로젝트에 리액트 세팅하기
npm 설치 및 리액트 환경설정 시 참고 및 유의해야 할 점을 미리 알고가자 !
1. npx는 오타가 아니니 안심해도 된다.
2. 리액트 설치 파일명을 적을 때에는 괄호 없이 작성해야한다. 괄호는 내가 임의로 실제 명령어와 가이드 라인을 구분하기 위해 기입한 특수문자이다.
3. create-react-app 파일명에 대문자를 사용해서는 안 된다.
4. 스프링부트 프로젝트 내부에서 리액트를 사용하는 것이기 때문에 src/main 경로에서 npm을 설치하고 리액트를 세팅해야 한다. 아래와 같은 구조로 최종 환경설정될 예정이니 참고 바란다.
터미널(terminal) 창에서 아래와 같이 입력하여 src/main 위치에 리액트를 세팅해준다.
> cd src/main
> npx create-react-app (리액트 설치 파일명)
이 과정에서 만약 아래와 같은 에러가 발생했거나 잘못된 곳에 리액트를 설치했다면 링크(https://velog.io/@song-eojin/IntelliJ%EC%97%90%EC%84%9C-React-%EC%84%A4%EC%B9%98-%EC%8B%9C-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-npm-ERR-%ED%8C%8C%EC%9D%BC-%EA%B2%BD%EB%A1%9C-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95)를 참고해주길 바란다.
PS C:\Users\스프링부트 프로젝트 파일경로
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\USER\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\USER\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in: C:\Users\USER\AppData\Local\npm-cache\_logs\2023-07-26T07_43_03_676Z-debug-0.log여기까지 완료 즉, 리액트를 실행할 준비가 된 상태가 된 것은 Happy hacking!이라는 문구를 통해 알 수 있다. 이 문구가 터미널 창에 뜬다면 성공이라는 의미다. 이제 터미널 창에 아래에 적힌 명령어를 입력해주면 3000 포트로 저런 화면이 자동으로 팝업할 것이다.
cd (앞서 명명한 리액트 설치 파일명)
npm start
➡️ STEP 03. 스프링부트와 리액트 개발환경(포트번호) 통합시키기
스프링부트는 톰캣을 사용하기 때문에 기본 값으로 8080 포트를 갖는 반면, 리액트는 기본이 3000이므로 이를 통합시켜줘야 한다. 즉, 통합 Build 구성을 만들어 준다는 의미다. 앞서 말했듯이 우리가 만들고자 하는 스프링부트+리액트 프로젝트를 build하기 위해서, 현재 각각 두 번 명령어를 입력해줘하는 상황이다. 스프링 부트는 ./gradlew build 명령어를 사용해야 하고, 리액트 프로젝트는
npm run build가 필요할 것이다. 이를 스프링부트 build만 진행하면 프론트엔드, 백엔드 프로젝트 모두 build되어 JAR 파일이 생성되도록 만들고자 하는 것이다.
이를 위해서 일단 아래와 같이 reactfront에 있는 package.json의 scripts 바로 위에 "proxy" : "http://localhost:8080",를 추가해주자. 만약 포트 충돌 등의 문제로 톰캣을 다른 포트를 사용하고 있다면 해당 포트번호로 대체주면 된다.
그 다음 build.gradle에 아래 코드를 추가하고 build(코끼리 버튼)해준다.
def frontendDir = "$projectDir/src/main/(앞서 설정한 본인의 리액트 폴더명)"
sourceSets {
main {
resources { srcDirs = ["$projectDir/src/main/resources"]
}
}
}
processResources { dependsOn "copyReactBuildFiles" }
task installReact(type: Exec) {
workingDir "$frontendDir"
inputs.dir "$frontendDir"
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'
}
}
task buildReact(type: Exec) {
dependsOn "installReact"
workingDir "$frontendDir"
inputs.dir "$frontendDir"
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 copyReactBuildFiles(type: Copy) {
dependsOn "buildReact"
from "$frontendDir/build"
into "$projectDir/src/main/resources/static"
}이제 가장 최상위 폴더인 프로젝트에서 ./gradlew build를 입력하여 프론트엔드 백엔드가 통합된 build 환경을 제공하는 JAR 파일을 받을 수 있다.
이제부터는 localhost에서 스프링부트 프로젝트 포트번호(일반적으로 8080)로 접근하면 리액트와 함께 스프링부트를 사용할 수 있게 된다. 개발환경이 잘 통합되었는지 확인해보는 방법은 http://localhost:(스프링부트 포트번호)에서 리액트 화면가 보이면 성공했다는 것이니 안심하자.
CF. 계속 WhiteLabel Error Page만 뜬다면?
터미널 창에./gradlew build명령어를 통해 build를 다시 해보자. 이때 발생할 수 있는 에러는 여러 가지가 있는데, 나 같은 경우에는 JDK 버전을 여러 개 설치해두어 원하는 JDK Open17 버전을 찾지 못하는 문제가 발생했다. 만약 나와 같은 문제가 생겼다면 아래의 링크를 참고해주길 바란다.
https://velog.io/@cho876/SpringBoot-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%88%EC%97%90-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%84%A3%EA%B8%B0
https://www.inflearn.com/questions/254791/cmd%EC%97%90%EC%84%9C-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%9C%A8%EB%A9%B4-%EC%96%B4%EB%96%A1%ED%95%98%EB%82%98%EC%9A%94
➡️ STEP 04. Visual Studio에서 프론트 작업하기
보다 편리한 프론트 작업을 위해 비주얼 스튜디오를 겸해서 사용하고자 한다. 방법은 Visual Studio에서 앞서 만든 Spring Boot 프로젝트 내부에 만들어둔 리액트 관련 파일을 Open해주면 된다. 그러면 아래와 같이 프론트와 관련된 파일들만 열람하여 작업할 수 있게 된다.
Visual Studio에서는 개발환경을 통합하였더라도 3000번 포트를 통해 웹 브라우저 화면을 확인할 수 있으며, 이는 정상적인 것이니 염려할 필요없다. 확인하는 방법은 이 전과 마찬가지로 Visual Studio의 Terminal 창에서 npm start를 입력하고 기다려주면 아래와 같은 화면을 볼 수 있다.
비주얼 스튜디오에 추가하면 편리한 확장 추천
확장은 이것저것 골라담으면 작업에 도움을 주는 도구를 추가로 얻게 해주며, 아래 화면과 같이 좌측 하단에서 볼 수 있다. 원하는 확장은 검색하여install/설치버튼을 누르면 된다.
Korean Language Pack for Visual Studio Code: 설치 후 팝업되는 버튼을 클릭하면 비주얼 스튜디오가 재시작하면서 비주얼 스튜디오를 한국어 버전으로 이용 가능하다.Color Highlight - Hue show better: 색상 코드를 입력했을 때 해당하는 색을 바로 볼 수 있게 해주는 확장Git Graph,Git History,GitLens - Git superchagred,GitHub Pull Requests and Issues,GitHub Repositories,GitHub Actions: 소스트리나 깃허브 데스크와 같은 기능을 비주얼 스튜디오에서 사용할 수 있게 해주는 등 깃과 관련되어 도움을 주는 확장 목록으로, 본인에게 필요한 확장을 설치받을 것을 추천Markdown Preview Github Styling: 리드미와 같이 마크다운에 의한 화면을 미리 볼 수 있게 해주는 확장
비주얼 스튜디오에서 자바 언어를 사용할 수 있게 하기 위해, 일단 구글에 Visual Studio를 검색하여 Visual Studio Code - Code Editing. Redefined 웹 사이트에 방문해주자. Docs를 클릭한 후, 보통 좌측 네비게이션 바 또는 가운데 상단에 토글 형태로 있는 Overview에서 JAVA의 Getting Started를 클릭해주면, https://code.visualstudio.com/docs/java/java-tutorial 링크에 도착하게 되고 아래와 같은 화면을 볼 수 있다.
아래 화면의 보라색 Intall 버튼 중 본인의 OS에 맞는 것을 클릭해주자. 그러면 아래와 같은 설치 창이 나타나게 된다. 체크된 상태로 Next를 누른 후 Install 버튼까지 눌러주자.
그러면 Visual Studio 확장에서 이제 Debugger for Java, IntelliCode, IntelliCode API Usage Examples, Language Support for Java(TM), Maven for Java, Project Manager for Java, Test Runner for Java가 설치되어 있는 것을 확인할 수 있다. 우리는 Maven이 아닌 Gradle를 사용할 것이기 때문에 Gradle for Java, Spring Boot와 관련된 Spring Boot Extension, Spring Boot Snippets, 그리고 나의 경우 MySQL을 사용하기 때문에 MySQL - Weijan Chen라는 확장까지 추가로 설치해주자.
좌측에 Database 버튼이 생성되고 이를 클릭하면 위와 같은 화면을 수 있다. Create Connection 버튼을 클릭하여 연결할 수 있다.
➡️ STEP 05. MySQL 연동하기
자세한 방법이 궁금하다면 내 블로그의 해당 글(https://velog.io/@song-eojin/MySQL-%EB%B9%84%EC%A3%BC%EC%96%BC-%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EC%97%90%EC%84%9C-%EC%97%B0%EB%8F%99%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95)을 참고해주길 바란다.
➡️ 참고자료
[BLOG]
[개발환경] SpringBoot + React 통합 환경 구성하기
https://velog.io/@cho876/SpringBoot-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%88%EC%97%90-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%84%A3%EA%B8%B0
React 아니고 React Native요! (React Native 지원)
https://blog.imqa.io/react-native/
Spring Boot + React.js 개발환경 연동하기
https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85
[초보자] React 설치부터 배포까지의 과정을 정리
https://dev.classmethod.jp/articles/the-process-from-installing-react-to-distributing-it/
https://velog.io/@cho876/SpringBoot-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%88%EC%97%90-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%84%A3%EA%B8%B0
[VIDEO]
스프링부트와 리액트 함께 쓰기 - 1강) 스프링부트에서 리액트 설치
https://youtu.be/1sw8UTWC8kc?feature=shared
React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일)
https://youtu.be/nahwuaXmgt8?feature=shared
