[gradle.kts]Spring Boot & React 연동 에러

이제 백엔드 세팅이 끝났으니 프론트 세팅도 시작해봤다. 일단 유투브에있는 강의영상을 보면서 시도해봤다. 밑에 코드는 강의하신 분 블로그에 있는 코드이다. 일단 설치는 쉽게 완료했고 pakage.json 파일에 proxy : localhost8080 등록도 완료해놨다. 그리고 나서 build.gradle.kts 에 밑에 코드를 붙여넣으면 되는데 문제는 내 프로젝트 세팅은 gradle이 아닌 gradle.kts이다.. 당연히 밑에 코드를 붙여 넣었는데 되지 않았다

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

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

출처: https://developer-rooney.tistory.com/190

 

오류 코드 

Unresolved reference: Locale

 

 

그래서 ChatGPT의 도움을 받아서 Locale을 임포트 해주고

import java.util.Locale

def frontendDir = "$projectDir/src/main/reactfront" 에서

아까 바꾸지 못한 경로명을 wstfront 로 변경해주었더니 연동 완료..!

> Configure project :

w: file:///C:/Users/mn846/OneDrive/Desktop/projecttry/build.gradle.kts:63:43: 'toLowerCase(Locale): String' is deprecated. Use lowercase() instead.

w: file:///C:/Users/mn846/OneDrive/Desktop/projecttry/build.gradle.kts:77:43: 'toLowerCase(Locale): String' is deprecated. Use lowercase() instead.

> Task :compileJava UP-TO-DATE

> Task :installReact

up to date, audited 1543 packages in 4s

262 packages are looking for funding

  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:

  npm audit fix --force

Run `npm audit` for details.

> Task :buildReact

> wstfront@0.1.0 build

> react-scripts build

Creating an optimized production build...

One of your dependencies, babel-preset-react-app, is importing the

"@babel/plugin-proposal-private-property-in-object" package without

declaring it in its dependencies. This is currently working because

"@babel/plugin-proposal-private-property-in-object" is already in your

node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which

is not maintianed anymore. It is thus unlikely that this bug will

ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to

your devDependencies to work around this error. This will make this message

go away.

 

Compiled successfully.

File sizes after gzip:

  46.6 kB  build\static\js\main.529a67a1.js

  1.77 kB  build\static\js\453.4cba85a4.chunk.js

  513 B    build\static\css\main.f855e6bc.css

The project was built assuming it is hosted at /.

You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

You may serve it with a static server:

  npm install -g serve

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

> Task :copyReactBuildFiles

> Task :processResources

> Task :classes

> Task :resolveMainClassName

> Task :bootJar

> Task :jar

> Task :assemble

> Task :compileTestJava

> Task :processTestResources NO-SOURCE

> Task :testClasses

OpenJDK 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended

2024-06-07T17:29:31.761+09:00  INFO 39568 --- [projecttry] [ionShutdownHook] j.LocalContainerEntityManagerFactoryBean : Closing JPA EntityManagerFactory for persistence unit 'default'

Hibernate:

    drop table if exists user_list cascade

Hibernate:

    drop sequence if exists user_code_seq

> Task :test

> Task :check

> Task :build

BUILD SUCCESSFUL in 23s

10 actionable tasks: 9 executed, 1 up-to-date

오후 5:29:31: Task execution finished 'build --stacktrace'.

 

빌드 성공!

최종코드

import java.util.Locale

plugins {
    java
    id("org.springframework.boot") version "3.3.0"
    id("io.spring.dependency-management") version "1.1.5"
}

group = "com.example"
version = "0.0.1-SNAPSHOT"

java {
    toolchain {
        languageVersion.set(JavaLanguageVersion.of(17))
    }
}

configurations {
    val compileOnly by getting {
        extendsFrom(configurations.annotationProcessor.get())
    }
}

repositories {
    mavenCentral()
}

dependencies {
    implementation("org.springframework.boot:spring-boot-starter-data-jpa")
    implementation("org.springframework.boot:spring-boot-starter-web")
    implementation("org.springframework.boot:spring-boot-starter-webflux")
    implementation("org.slf4j:slf4j-api:2.0.7")
    implementation("ch.qos.logback:logback-classic:1.4.8")
    compileOnly("org.projectlombok:lombok")
    runtimeOnly("org.postgresql:postgresql")
    runtimeOnly("com.h2database:h2")
    annotationProcessor("org.projectlombok:lombok")
    testImplementation("org.springframework.boot:spring-boot-starter-test")
    testImplementation("io.projectreactor:reactor-test")
    testImplementation("org.projectlombok:lombok")
    testImplementation("com.h2database:h2:2.2.224")
    testAnnotationProcessor("org.projectlombok:lombok")
    testRuntimeOnly("org.junit.platform:junit-platform-launcher")
}

tasks {
    withType<Test> {
        useJUnitPlatform()
    }

    val frontendDir = "$projectDir/src/main/wstfront"

    val copyReactBuildFiles by registering(Copy::class) {
        dependsOn("buildReact")
        from("$frontendDir/build")
        into("$projectDir/src/main/resources/static")
    }

    val installReact by creating(Exec::class) {
        workingDir = file(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")
        }
    }

    val buildReact by creating(Exec::class) {
        dependsOn("installReact")
        workingDir = file(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")
        }
    }

    named("processResources") {
        dependsOn("copyReactBuildFiles")
    }
}

 

 

---

끝으로

정리하자면 수정해 준 것은

1. import java.util.Locale

2. repositories {
    mavenCentral()
    }

3. 경로변경

def frontendDir = "$projectDir/src/main/reactfront"
=> val frontendDir = "$projectDir/src/main/wstfront"

4. 변수 val 로 변경

5. Kotlin DSL언어로 변경

 

 

 

개발은 참 세팅이 빡센 것 같다..