[Spring Boot#환경설정] 7. React 연동

1. node.js 설치

설치 : https://nodejs.org/en/

버전 : 16.13.0 LTS

 

2. VSCode 설치

 

3. VSCode 실행 및 터미널 열기

View > Terminal

 

4. 다음 경로에서 npx create-react-app frontend 실행

D:\workspace\nutrient\src\main> npx create-react-app frontend

 

5. 새로 만든 프로젝트 열기

File > Open Folder > frontend 경로 선택

 

6. 터미널을 열어 npm start 실행

D:\workspace\nutrient\src\main\frontend> npm start

-> http://localhost:3000/ 페이지가 열림

 

7. npm install 실행

D:\workspace\nutrient\src\main\frontend> npm install

 

8. npm run-script build 실행

D:\workspace\nutrient\src\main\frontend> npm run-script build

frontend/build 폴더 생성

 

9. npm run eject 실행

실행하기 전에 다음 링크를 참고해 git에 모든 데이터 push

[React - Spring boot] 8. git 연결

PS D:\workspace\nutrient\src\main\frontend> npm run eject

frontend/config 폴더 생성

 

10. frontend/config/paths.js > module.exports 수정

appBuild: resolveApp(buildPath) --> appBuild: resolveApp('build/static')

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('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,
};

 

11. frontend/build 하위 데이터삭제

 

12. package.json proxy 설정

"proxy": "http://localhost:8088"

 

13. spring > build.gradle 수정후 빌드

react 연동시작 ~ react 연동 끝 부분 추가

//querydsl 추가
buildscript {
	dependencies {
		classpath("gradle.plugin.com.ewerk.gradle.plugins:querydsl-plugin:1.0.10")
	}
}

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

group = 'mandykr'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

//querydsl 추가
apply plugin: "com.ewerk.gradle.plugins.querydsl"

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'

	// jpa binding parameter log 확인
	implementation("com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.7.1")

	// html 컴파일로 thymeleaf 변경 반영
	runtimeOnly 'org.springframework.boot:spring-boot-devtools'

	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'

	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.springframework.security:spring-security-test'

	//querydsl 추가
	implementation 'com.querydsl:querydsl-jpa'
	implementation 'com.querydsl:querydsl-apt'
	//querydsl 추가 끝
}

// react 연동 시작
def webappDir = "$projectDir/src/main/frontend"

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'
	}
}
// react 연동 끝

test {
	useJUnitPlatform()
}

//querydsl 추가
def querydslDir = "$buildDir/generated/querydsl"

querydsl {
	library = "com.querydsl:querydsl-apt"
	jpa = true
	querydslSourcesDir = querydslDir
}

sourceSets {
	main {
		java {
			srcDirs = ['src/main/java', querydslDir]
		}
	}
}

compileQuerydsl{
	options.annotationProcessorPath = configurations.querydsl
}

configurations {
	querydsl.extendsFrom compileClasspath
}
//querydsl 추가 끝

 

14. spring boot 실행하고 8088 포트로 접속

 

15. VSCode에서 3000 포트로 개발시 backend 데이터를 가져오도록 설정

http://localhost:3000 로 요청할 때 자원을 공유하도록 CORS 설정

package mandykr.nutrient.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000");
    }
}