<aside> 💡 강사님 오피셜: react는 클라이언트 전용 애플리케이션을 개발하는거라 spring안에다가 넣으면 안됨!! react와 spring은 API를 통해서 소통이 돼야 하고 이 설정을 위해선 ajax와 CORP 설정을 해줘야 함! 그리고 이렇게 할거면 차라리 Thymleaf를 사용하자 ㅋㅋ

</aside>

npx create-react-app myapp

Creating a new React app in C:\\Users\\rhcow\\SpringStudy\\springReact\\src\\main\\myapp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

added 1416 packages in 57s

231 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 55 packages in 4s

231 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...

removed 1 package, and audited 1471 packages in 2s

231 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created myapp at C:\\Users\\rhcow\\SpringStudy\\springReact\\src\\main\\myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

**Happy hacking!**

npm start

> [email protected] start
> react-scripts start

(node:10216) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:10216) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view myapp in the browser.

  Local:            <http://localhost:3000>
  On Your Network:  <http://192.168.35.165:3000>

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

react 화면 뜸

실행했던 react 서버 꼭 닫기! 그래야 나중에 localhost:8080으로 접속했을 때 react화면이 뜰 수 있음

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  **"proxy" : "<http://localhost:8080>",**
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

plugins {
    id 'java'
    id 'org.springframework.boot' version '3.0.2'
    id 'io.spring.dependency-management' version '1.1.0'
}

group = 'myapp'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'

configurations {
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    compileOnly 'org.projectlombok:lombok'
    runtimeOnly 'org.mariadb.jdbc:mariadb-java-client'
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

**def webappDir = "$projectDir/src/main/myapp"

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

tasks.named('test') {
    useJUnitPlatform()
}

그레이들 아이콘을 눌러 갱신 시켜줌

build 눌러서 build.gradle 실행

BUILD SUCCESSFUL in 13s
9 actionable tasks: 8 executed, 1 up-to-date
오후 11:09:21: Execution finished 'build'.

…

자습의 성과

비록 삭제했다가 다시해서 성공적인 결과는 얻을 수 없었으나, 새로운 시도를 통해 이렇게 하면 안된다는 것을 알았다. 현업에서 이렇게 했으면 정말 큰일나겠구나 싶었다.