๐Ÿ“ŠReact

Spring boot + React ์—ฐ๊ณ„ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ

harry.93 2021. 3. 24. 15:32
๋ฐ˜์‘ํ˜•

* ๋ณธ ๊ฒŒ์‹œ๊ธ€์€ ๋‹ค์Œ ๋งํฌ ๊ฒŒ์‹œ๊ธ€ ์ฐธ์กฐ๋ฅผ ํ†ตํ•ด ์‹œ๋„ํ•œ ๊ฒฐ๊ณผ๋ฅผ ๊ณต์œ ํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค :D

sundries-in-myidea.tistory.com/71

 

Spring Boot์™€ React๋ฅผ ์—ฐ๋™ํ•˜์—ฌ ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ ๋งŒ๋“ค์–ด๋ณด์ž

์ด๊ธ€์„ ์ฝ์–ด๋ณด๊ธฐ์ „์—!! ํ•œ๋ฒˆ ๊ณ ๋ คํ•ด๋ณผ ์ ์„ ์ œ๊ฐ€ ์ ์–ด๋’€์Šต๋‹ˆ๋‹ค ํ•œ๋ฒˆ ์ฐธ๊ณ  ํ•ด๋ณด๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•ด์ฃผ์„ธ์š”! [Java/Spring] - Spring Boot์™€ React๋ฅผ ํ†ตํ•œ ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ• ๋•Œ ๊ณ ๋ฏผํ•ด๋ณผ์  Spring Boot์™€ React

sundries-in-myidea.tistory.com

 

1. ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ธํŒ…

- STS 4 ์„ค์น˜.

spring.io/tools

 

Spring Tools 4 is the next generation of Spring tooling

Largely rebuilt from scratch, Spring Tools 4 provides world-class support for developing Spring-based enterprise applications, whether you prefer Eclipse, Visual Studio Code, or Theia IDE.

spring.io

- node js ์„ค์น˜. ( react ๋ฐ npm ํŒจํ‚ค์ง€ ์‚ฌ์šฉ )

nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

* ๋ณธ ๊ธ€์—์„œ๋Š” LTS ๋ฒ„์ „ ์„ค์น˜.

 

2. ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ

- Spring Initializer ์—์„œ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ฐ ๋‹ค์šด๋กœ๋“œ

dependency ์—๋Š” Spring Web ๋งŒ ์ถ”๊ฐ€.

* ์œ„ ํ”„๋กœ์ ํŠธ ๋‹ค์šด ์‹œ, JAVA ์— ์„ ํƒํ•œ ๋ฒ„์ „์ด ํ˜„์žฌ ์œˆ๋„์šฐ์— ํ™˜๊ฒฝ ๋ณ€์ˆ˜๋กœ ์žกํ˜€์žˆ์–ด์•ผ ํ•จ. ( STS jre ๋ฒ„์ „ ๋˜ํ•œ ๋™์ผํ•˜๊ฒŒ ๋˜์–ด์•ผ ํ•จ )

- ๋‹ค์šด๋กœ๋“œ๋ฐ›์€ ํ”„๋กœ์ ํŠธ๋ฅผ STS ์— ํ”„๋กœ์ ํŠธ import ํ•˜๊ธฐ.

 

3. Spring Boot ์ƒ˜ํ”Œ ํŽ˜์ด์ง€ ์ž‘์„ฑ

- Spring Boot ๋‚ด ํ…Œ์ŠคํŠธ์šฉ ์ปจํŠธ๋กค๋Ÿฌ ์ž‘์„ฑ.

์ดํ›„, ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋ฅผ ๋Ÿฐ ์‹œํ‚ค๊ณ  ๋งคํ•‘๋œ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๋ฉด http://localhost:8080/api/hello ์ ‘์† ์‹œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณด์—ฌ์ง.

4. React ์„ค์น˜

node.js ๋ฅผ ์„ค์น˜ํ–ˆ๋‹ค๋ฉด , cmd ์ฐฝ์„ ํ†ตํ•ด workspace ๊ฒฝ๋กœ๋กœ ๊ฐ€์„œ react ์„ค์น˜.

npx create-react-app {reactํ”„๋กœ์ ํŠธ๋ช…}

์ดํ›„, ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด run ์‹œํ‚ค๋ฉด http://localhost:3000 ์œผ๋กœ ์‹คํ–‰๋จ.

 

ํ˜„์žฌ๊นŒ์ง€ ๊ตฌ์กฐ๋Š” ๋‹ค์Œ์˜ ํ˜•ํƒœ๋ฅผ ๊ฐ€์ง€๊ณ  ๋กœ์ปฌ์—์„œ ๋™์ž‘ ์ค‘์ž„. ๊ฐ์ž ๋‹ค๋ฅธ ํฌํŠธ์—์„œ ์‹คํ–‰์ค‘์ด๊ธฐ ๋•Œ๋ฌธ์— localhost ์—์„œ ์š”์ฒญ ์‹œ CORS (cross-origin requests) ์ด์Šˆ๊ฐ€ ๋ฐœ์ƒํ•จ.

 

ํ˜„์žฌ ๋ชฉํ‘œ๋Š” ํ•ด๋‹น ๋‘ ์„œ๋น„์Šค๋ฅผ ์—ฐ๋™์‹œํ‚ค๋Š” ๊ฒƒ.

CROS ์ด์Šˆ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” front ์ชฝ์—์„œ proxy ์„ค์ •์„ ์žก์•„์ฃผ์–ด์•ผ ํ•œ๋‹ค.

5. Spring Boot ์™€ React ์—ฐ๋™ํ•˜๊ธฐ

- React ๋‚ด package.json ์— ๋‹ค์Œ ๊ตฌ๋ฌธ ์ถ”๊ฐ€.

- backend ์˜ ์ปจํŠธ๋กค๋Ÿฌ๋ฅผ ํ†ตํ•ด ๊ฐ’์„ ๋ฐ›์•„์˜ค๊ธฐ ์œ„ํ•œ React ์ฝ”๋”ฉ. ( App.js ๋‚ด ์ˆ˜์ • )

import React, {useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';

function App () {
    const [message, setMessage] = useState("");
  
    useEffect(() => {
      fetch('/api/hello')
        .then(response => response.text())
        .then(message => {
            setMessage(message);
        });
    },[])
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo"/>
          <h1 className="App-title">{message}</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
}

export default App;

 

6. Spring Boot ์™€ React ์•ฑ์„ ํ•จ๊ป˜ ํŒจํ‚ค์ง• ์ฒ˜๋ฆฌ

- spring boot ํ”„๋กœ์ ํŠธ pom.xml ๋‚ด plugins ํƒœ๊ทธ ๋‚ด ๋‹ค์Œ ์ถ”๊ฐ€

<plugin>
				<groupId>com.github.eirslett</groupId>
				<artifactId>frontend-maven-plugin</artifactId>
				<version>1.11.2</version>
				<configuration>
					<workingDirectory>worksheetfrontend</workingDirectory>
					<installDirectory>target</installDirectory>
				</configuration>
				<executions>
					<execution>
						<id>install node and npm</id>
						<goals>
							<goal>install-node-and-npm</goal>
						</goals>
						<configuration>
							<nodeVersion>v14.16.0</nodeVersion>
							<npmVersion>6.14.11</npmVersion>
						</configuration>
					</execution>
					<execution>
						<id>npm install</id>
						<goals>
							<goal>npm</goal>
						</goals>
						<configuration>
							<arguments>install</arguments>
						</configuration>
					</execution>
					<execution>
						<id>npm run build</id>
						<goals>
							<goal>npm</goal>
						</goals>
						<configuration>
							<arguments>run build</arguments>
						</configuration>
					</execution>
				</executions>
			</plugin>

* ์—ฌ๊ธฐ์„œ node ์˜ ๋ฒ„์ „๊ณผ npm ์˜ ๋ฒ„์ „์„ ๋ณธ์ธ์ด ์„ค์น˜ํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•˜๊ฒŒ ๋งž์ถฐ์ฃผ์–ด์•ผ ํ•œ๋‹ค.
๋ฒ„์ „ ํ™•์ธ์€ cmd ์ฐฝ์„ ์—ด์–ด , npm version ์œผ๋กœ ํ™•์ธ๊ฐ€๋Šฅํ•˜๋‹ค.

์ดํ›„, cmd ์ฐฝ์„ ์—ด์–ด ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•œ ํ›„, ๋‹ค์Œ ๋ช…๋ น์–ด ์‹คํ–‰ํ•˜์—ฌ ํ”„๋กœ์ ํŠธ ๋นŒ๋“œ.

mvnw clean install

์‹คํ–‰ ํ›„์— react ํด๋”๋กœ ๊ฐ€๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด build ํด๋”๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.

 

7. Spring Boot JAR ํŒŒ์ผ์— React Build ํŒŒ์ผ ํฌํ•จ ์‹œํ‚คํ‚ค

- Spring boot ํ”„๋กœ์ ํŠธ ๋‚ด pom.xml ์˜ plugins ํƒœ๊ทธ ํ•˜์œ„์— ๋‹ค์Œ์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

<plugin>
				<artifactId>maven-antrun-plugin</artifactId>
				<executions>
					<execution>
						<phase>generate-resources</phase>
						<configuration>
							<target>
								<copy todir="${project.build.directory}/classes/public">
									<fileset
										dir="${project.basedir}/{reactํ”„๋กœ์ ํŠธ๋ช…}/build" />
								</copy>
							</target>
						</configuration>
						<goals>
							<goal>run</goal>
						</goals>
					</execution>
				</executions>
			</plugin>

 

* ์ด ์ƒํƒœ์—์„œ react ์•ฑ ํด๋”์˜ ์œ„์น˜๋Š” {springBootํ”„๋กœ์ ํŠธํด๋”}/{reactํ”„๋กœ์ ํŠธํด๋”} ์ด๋‹ค. ์ฆ‰, ํ”„๋กœ์ ํŠธ ํด๋” ํ•˜์œ„์— ํฌํ•จ๋˜์–ด์žˆ๋‹ค.

์ดํ›„, cmd ์ฐฝ์„ ์—ด์–ด ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•œ ํ›„, ๋‹ค์Œ ๋ช…๋ น์–ด ์‹คํ–‰ํ•˜์—ฌ ๋‹ค์‹œ ํ”„๋กœ์ ํŠธ ๋นŒ๋“œ.

mvnw clean install

 

8. ์™„๋ฃŒ!

๋‹ค ์™„๋ฃŒ ๋˜๋ฉด, Spring boot ํ”„๋กœ์ ํŠธ ๋‚ด target ์— ์ƒ์„ฑ๋œ jar ํŒŒ์ผ์„ ์‹คํ–‰ํ•˜์—ฌ ์ž˜ ๋Œ์•„๊ฐ€๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.

cmd ๋ฅผ ํ†ตํ•˜์—ฌ ํ”„๋กœ์ ํŠธ target ํด๋” ์ ‘๊ทผ ํ›„, ๋‹ค์Œ ๋ช…๋ น์–ด ์‹คํ–‰ํ•˜์—ฌ ์ •์ƒ ์‹คํ–‰๋˜๋Š” ์ง€ ํ™•์ธ.

http://localhost:8080 ์—์„œ ์ •์ƒ ์‹คํ–‰๋˜๋Š”์ง€ ํ™•์ธ!

 

์„ฑ๊ณต!

 

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด, ํ”„๋ก ํŠธ๋Š” react ๋กœ ๊ฐœ๋ฐœํ•˜๊ณ , ๋ฐฑ์—”๋“œ๋Š” Spring Boot ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉด ๋”ฐ๋กœ๋”ฐ๋กœ ๊ฐœ๋ฐœํ•˜์—ฌ ํ•˜๋‚˜์˜ ์„œ๋น„์Šค๋กœ ์—ฐ๋™์ด ๊ฐ€๋Šฅํ•˜๋‹ค. 

728x90
๋ฐ˜์‘ํ˜•