[SpringBoot] Intellij + React 생성 및 한번에 빌드하기

node.js 설치하기

https://nodejs.org/

Node.js — Run JavaScript Everywhere

React , vue 는 node.js 가 설치되어 있어야 실행된다

 

 

다운받아서 설치!

 

설치가 되었다면 실행 -> cmd -> node 버전을 확인한다

 

 

 

프로젝트 생성하기

Spring Web 은 필수로 선택하고, 각자 필요한 Dependency를 추가한다

 

 

 

 

프로젝트 시작하기

Run 또는 Debug 시작

 

 

 

port 에러가 난다면 변경해주자

기본포트 8080 -> 7172 로 변경하였다

 

다시 Run 을 하면 정상적으로 실행된 것을 확인 할 수 있다

 

 

 

 

 

React 설치하기

src/main/하위에 설치한다

 

 

하단의 terminal 에서 src/main 경로로 이동한 뒤 명령어를 입력한다

npx create-react-app frontend

npx create-react-app '원하는 이름' 으로 하면 된다.

 

 

 

설치 완료

 

 

설치한 React 경로로 이동해서 start 를 한다

 

 

React 실행 성공

 

 

 

비동기 통신하기 위한 axios 를 설치한다

 

 

 

 

 

 

 

 

React(Front) 와 SpringBoot(Back) 연동하기

React 기본 port는 3000 이다

Back 과 연동하기 위하여 package.json의 proxy 를 SpringBoot port로 추가 또는 변경해 준다.

 

 

 

 

 

java 폴더 프로젝트 경로 아래 controller 폴더 생성 후 Controller 코드 작성

 

@RestController
public class TestController {

    @GetMapping("/test")
    public String test() throws Exception{

        return "안녕 React?";
    }
}

 

 

---

 

App.js 코드 수정

import './App.css';
import React, {useEffect, useState} from "react";
import axios from "axios";

function App(){
  const [data, setData] = useState('');

  useEffect(()=>{
    axios.get("/test")
        .then(res => setData(res.data))
        .catch(err => console.log("error : " + err))
  })

  return data;
}

export default App;

 

 

 

---

 

 

SpringBoot(Back) server 실행 후 terminal 에서 npm start 로 React(Front) server 실행한다

정상적으로 연동되는 것을 확인

 

 

 

 

Front + Back server 한 번에 빌드 실행하기

 

매번 Front Server 실행, Back Server 실행하기에는 너무 귀찮다

현재 글은 gradle 을 기준으로 하고 있다

https://greed-yb.tistory.com/257

[SpringBoot] Gradle + React 같이 빌드하기

 

 

초기 build.gradle 파일

 

아래 코드를 추가해 준다

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

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"
}

 

변수 frontendDir 의 경로는 본인 프로젝트에 맞게 변경해줘야 한다

 

 

 

 

실행되어 있는 Server 들을 다 중지시키고

IntelliJ SpringBoot Run 또는 Debug 를 실행시킨다

 

resources/static 아래 react 가 build 되었다

 

 

 

 

 

SpringBoot port 로 접속하면 정상적으로 연결된 것을 확인 할 수 있다

 

 

단점은 개발을 진행할수록 코드량이 많아지니 build 할 때 시간이 점점 오래 걸린다