[웹 1팀] 1. React + Spring Boot (Gradle) 연동하기

Front-end: Create React App
Back-end : Spring Boot
각각의 장점을 최대한 활용하기 위해 분리해서 작업하는 방법

React + SpringBoot (Gradle) 손쉽게 연동하기
연동을 위해 이 블로그 글대로 진행하였습니다.

1. SpringBoot 생성

1. Spring io를 이용해 스프링 부트 생성
2. Intellij에서 Project Type을 Gradle로 변경

2. ReactApp

1. 1단계에서 만든 SpringProjectName/src/main/ 경로로 접근
2. create-react-app [PROJECT NAME] 명령어 실행
3. cd [PROJECT NAME] 실행
4. npm start 실행
5. 새 터미널 창 열고 작업하던 경로로 이동
6. npm install 실행
7. npm run-script build 실행
8. npm run eject 실행
   에러 발생 시 데이터를 전부 git push한 상태인지 확인
9. [PROJECT NAME]/config/paths.js 파일에서 build에 /static 추가
10. [PROJECT NAME]/build의 모든 파일 삭제

     

    module.exports = {
    dotenv: resolveApp('.env'),
    appPath: resolveApp('.'),
    appBuild: resolveApp('build/static'), // 'build'를 'build/static'으로 변경
    appPublic: resolveApp('public'),
    appHtml: resolveApp('public/index.html'),
    appIndexJs: resolveModule(resolveApp, 'src/index'),
    appPackageJson: resolveApp('package.json'),
    appSrc: resolveApp('src'),
    appTsConfig: resolveApp('tsconfig.json'),
    appJsConfig: resolveApp('jsconfig.json'),
    yarnLockFile: resolveApp('yarn.lock'),
    testsSetup: resolveModule(resolveApp, 'src/setupTests'),
    proxySetup: resolveApp('src/setupProxy.js'),
    appNodeModules: resolveApp('node_modules'),
    swSrc: resolveModule(resolveApp, 'src/service-worker'),
    publicUrlOrPath,
    };

3. SpringBoot

1. SpringBoot 프로젝트의 build.gradle로 이동해서 dependencies{ ... }와 test{ ... } 사이에 아래 소스 첨부
   def webappDir = .../[PROJECTNAME] 변경

    def webappDir = "$projectDir/src/main/[PROJECTNAME]"
   
    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'
    }
    }

2. Intellij 오른쪽 상단 gradle 클릭

3. Tasks/build 안에 build 실행

4. 빌드 완료 후 [SpringProjectName]/build/libs로 이동

5. 폴더 안에 있는 jar 파일 실행(java -jar FILENAME)

6. Localhost:8080 접속해서 React화면 출력되면 성공!

성공 화면!

 

해당 과정을 실행하면서 겪었던 오류

1. insufficient permission for adding an object to repository database .git/objects

    sudo chown -R "${USER:-$(id -un)}" .

2. git pull 후에 Intellij 오른쪽 상단에 gradle이 보이지 않는 경우
   https://angel-jinsu.tistory.com/21

3. localhost:8080에 접속했을 때 빈 화면이 뜨는 오류
   [PROJECTNAME]/src/app.js, index.js 상단에 import 부분 확인하기
   import React from 'react';import ReactDOM from 'react-dom';

localhost:8080 실행 시 빈화면이 뜨며 나타오는 오류, React is not defined

 

[참고]

https://kim6394.tistory.com/226
https://joshua-dev-story.blogspot.com/2020/01/react-spring.html
https://hjjooace.tistory.com/entry/React-Spring-Gradle-Project-연동#none

React + SpringBoot (Gradle) 손쉽게 연동하기

 

수정해야할 부분이 있다면 댓글 부탁드립니다. 감사합니다