SpringBoot (Gradle Project) 에서 React 사용하기 (1)

* 시작하기전에 PC에 node, npm 은 필수로 설치되어있어야합니다.

React 설치 준비 위해서는 아래 링크 참고하시면 됩니다.

 

[React] ReactJS 입문 준비

https://blog.naver.com/bugkingus/221718414687

 

 

 

스프링부트 프로젝트 생성

 

https://start.spring.io/

해당 스샷에는 안찍혀있지만 우측에 Dependencies 설정을 할수있는데 거기서 Spring Web 선택을 해줘야하지만 

선택 안해도 직접 build.gradle 에서 수정해줘도 무방합니다.

 

선택후에 GENERATE 버튼을 누르면 압축파일이 다운받아집니다.

 

C:\web_developer\spring 에 압축풀기

C:\web_developer\spring\vs_reactApp 진입 후 해당 경로에서 vscode 실행

 

 

실행후에 ctrl + ` 키를 눌러 터미널 창을 띄우고 프로젝트 내부 /src/main 으로 진입합니다.

 

#npx create-react-app [프로젝트명]
npx create-react-app reactjs

 

설치 진행중

꽤 오래 걸렸습니다 5분~ ? 

친절하게 안내까지 해주네요.

We suggest that you begin by typing : 

cd reactjs
npm start

 

reactjs 라는 프로젝트명으로 react 를 생성했기 때문에 당연히 reactjs 라는 폴더가 생성되었습니다.

 

 

 

localhost:3000 으로 접속을 하면 아래 화면과 같이 react 가 정상적으로 구동됨을 확인할수있다.

 

---

리액트 설정은 이쯤하고 스프링부트에서도 gradle build 와 run 이 잘되는지를 확인해야되서 터미널창을 하나 더 열고,

제 경우엔 gradle build 할때 계속 에러가 떠서 아래 링크에 기록을 해둡니다.

* gradle build 를 하려면 당연히 경로는 기존 작업했던 react 폴더 내부가 아니라 바깥에 gradlew 가 있는 곳에서 실행해야합니다.

https://bug41.tistory.com/122

Springboot Gradle Execution failed for task ':compileJava'.

 

여튼 이렇게 하고나서 아래 명령어로 spring boot 를 실행시키면 localhost:8080 에 정상가동된것을 확인할수있습니다.

혹시나 위 문제 말고도 bootRun 안되시는 분들은 build.gradle 파일에 dependencies 뒤에 web 이라고 붙여줘야합니다.

상단에 기재했다시피 , Dependencies 에서 선택을 안해줬기 때문에 build.gradle 에서 -web 이라고 붙여줘야합니다 !!

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

 

./gradlew bootRun

컨트롤러 설정을 안해줬으니 아래처럼 에러페이지가 뜨는건 당연합니다.

 

java/com/example/vs_reactApp 경로 안에 HelloController.java 파일을 만들고 아래 처럼 내용을 입력해주고

package com.example.vs_reactApp;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Date;

@RestController
public class HelloController {
    @GetMapping("/api/hello")
    public String hello() {
        return "야 이거 가져오냐 ? " + new Date() + "\n";
    }
}

다시 서버를 가동 시킨 후  http://localhost:8080/api/hello 접속을 하면

 

이렇게 잘 나온걸 확인할 수 있습니다.

SpringBoot 는 8080 포트에서 가동되고있고 React 는 3000 포트에서 가동중이어서, 

CORS 에러를 방지하기 위하여 react 폴더 쪽에 package.json 에  proxy 설정을 추가해줘야합니다.

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

 

이렇게 하고 npm start 로 리액트를 가동시킨후에 명령프롬프트 창에서 아래 처럼 치면

curl http://localhost:3000/api/hello

스프링부트 컨트롤러 단에서 return 해줬던 내용을 잘 가져오는걸 볼수있습니다.

 

 

 

 

그리고 SpringBoot 의 api 값을 React 페이지에서 출력해주려면 아래처럼 App.js 를 수정해줍니다.

 

react폴더/src/App.js 파일 수정

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch('/api/hello')
      .then(response => response.text())
      .then(message => {
        setMessage(message);
      });
  },[])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {message}
        </p>
        <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>
      </header>
    </div>
  );
}

export default App;

이제 이렇게 되면 Springboot 랑 React 둘다 켜야되서 , 그러긴 비효율적이니까 스프링부트만으로도 이 화면이 나오게끔 패키징을 해줘야합니다.

 

패키징 하기전에 React 세팅을 몇가지 더 해줘야합니다. 

npm start 가 정상적으로 진행이 되었다면 아래 명령어들도 순차적으로 실행해줍니다.

npm install

npm run-script build

#해당 명령어는 실행하면 되돌릴수없으므로 git push 를 무조건 하고나야만 실행가능합니다.
npm run eject

 

npm run eject 할때 ERR 혹시 나신다면 npm 버전을 꼭 확인해보세요 저는 npm 7 점대를 사용하고있었는데 계속 에러가나서 6.14.11 로 다운그레이드 진행 한 후에 eject 진행할시 정상적으로 처리되는것을 확인하였습니다.

#npm 버전확인
#7 버전이면 eject 할때 에러가 날수있음
npm -v

npm install -g npm@6.14.11

 

build.gradle 내용 수정

plugins {
	id 'org.springframework.boot' version '2.5.3'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
}

group = 'com.example'
version = '0.0.2-SNAPSHOT'
sourceCompatibility = '11'

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	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 "copyWebApp"
}


task copyWebApp(type: Copy) {
    dependsOn "buildReact"
    from "$webappDir/build"
    into "$projectDir/src/main/resources/static"
}


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

// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@ 내용 추가 @@@@@@@@@@@@@@@@@@@@@
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

 

수정한 후에 다시

 

./gradlew build

정상적으로 빌드가 되었습니다.

 

 

*전 여러 테스트 하느라 build.gradle 에 version 이 0.0.2 로 들어갔는데 빌드하고나면 0.0.2.jar 이 생겨야합니다.

아래 스샷은 초기에 찍은 스샷이라 0.0.1 로 되어있는 점 참고하시기 바랍니다.

java -jar ./build/libs/vs_reactApp-0.0.1-SNAPSHOT.jar

실행 시켜볼랫더니 아래와같이 버전 안맞는 에러가 뜨는데 이것도 해결해야겠습니다. -_-

한번에 되는꼴을 못보네 아오 해결하고 내용 더 추가하도록 하겠습니다.

우선 java 11 로 다시 설치해서 환경변수 PATH 다시 잡아주고, 당연히 vscode 상에서도 setting.json 에서 수정해주고
기존에 JAVA8 은 더이상 필요없어서 삭제하고 그래도 JAVA8 을 계속 바라보고있길래 컴퓨터 다시 껏다켜주니 정상 작동되는거 확인이 되었습니다.

 

8080 포트로 접속해서 react 앱이 정상작동된다면 정상적으로 처리된것입니다.

 

 

리액트 폴더는 git 에 첨부해놨습니다.

https://github.com/bug41/reactjs.git

GitHub - bug41/reactjs

 

 

중간중간에 하다 안되갖고 다른거 찾아보고 이어서 오류 해결하고 진행하다가 캡쳐본이 다르다던가 .. 

좀 엉성한 부분이 있을수 있는데 이점 양해부탁드리고, 이상한부분 있으면 댓글로 말씀해주시면 감사드리겠습니다.