macOS + Intellij + react + SpringBoot(gradle) 환경설정

 

* 환경세팅 전 node.js 6버전 이상이 설치되어 있어야 한다.

 

1. create-react-app 설치

 - create-react-app 을 설치하면 react 관련 소스들이 생성된다

폴더 경로는  각자 편한 곳으로 잡으면 된다.

 - 현재 가이드에서는 /src/main/frontend 로 경로를 잡는다.

 

 1) 우선 npm 으로 create-react-app 를 설치해줘야 한다.

npm install -g create-react-app

 

 2) create-react-app 을 실행하여 react 폴더를 생성한다. 폴더명은 frontend 로 생성하겠다.

create-react-app frontend

 

2. bootstrap 설치 (CSS)

npm install bootstrap react-bootstrap --save

 

3. react-router-dom 설치  (화면전환시 사용)

npm install react-router-dom --save

 

4. axios 설치 (API 호출시 사용)

npm install axios --save

 

5. build.gradle 수정

 - 스프링 실행시 react 도 같이 빌드하도록 수정 (아래 설정을 해주면 스프링 서버만 올리면 리액트 화면을 띄울 수 있다.)

 - 각 환경마다 gradle 설정이 다르니 추가된 영역은 아래와 같이 표시함.

 

####################### 추가 #######################

... 추가된 소스

####################### 추가 #######################

plugins {
    id 'org.springframework.boot' version '2.6.1'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id 'java'
    id 'war'
####################### 추가 #######################
    id "com.moowork.node" version "1.3.1"
####################### 추가 #######################
}

####################### 추가 #######################
apply plugin: "com.moowork.node"
####################### 추가 #######################

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

configurations {
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    compileOnly 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'
    providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

test {
    useJUnitPlatform()
}

####################### 추가 #######################
def webappDir = "$projectDir/src/main/frontend"

task appNpmInstall(type: NpmTask) {
    workingDir = file("${webappDir}")
    args = ["run", "build"]
}

task copyWebApp(type: Copy) {
    from 'src/main/frontend/build'
    into "build/resources/main/static"
}

copyWebApp.dependsOn(appNpmInstall)
compileJava.dependsOn(copyWebApp)
####################### 추가 #######################

 

6. 설정 확인

 - 위의 설정이 잘 되었다면 스프링부트 서버를 기동하고 로컬호스트 접속시 아래와 같이 리액트 초기화면을 볼 수 있다.

 - (가이드에서는 기본 포트인 8080 포트를 잡아서 http://localhost:8080 으로 접속하였다.)