react spring boot 다운로드 react spring boot 소스 코드 다운로드

반응 및 스프링 부팅 첫 설정

제작 : 11-04-2020
마지막 업데이트 : Jordy Coder의 10-09-2021

기고자 :
Jeffrey Spaan (풀 스택 개발자 @ Codebean)
Jordy Hamwijk (풀 스택 개발자 @ Codebean)

환영 개발자. 이것은 React 및 Spring Boot를 사용하여 첫 번째 웹 응용 프로그램을 개발하는 첫 번째 자습서입니다.
앞으로, 우리는이 저장소를 GitHub에 게시 할 추가 리포지토리의 시작점으로 사용합니다.
이 튜토리얼에서는 기본 사항을 다루고 Spring Boot 백엔드로 React 프론트 엔드를 설정합니다.

React 란 무엇입니까?

React는 단일 페이지 응용 프로그램을 위해 특별히 사용자 인터페이스를 구축하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다.
웹 및 모바일 앱의 뷰 레이어를 처리하는 데 사용됩니다. React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있습니다.
UI 구성 요소를 사용하면 개발이 완화되고 응용 프로그램의 개발 시간이 줄어 듭니다.

Spring Boot 란 무엇입니까?

Spring Boot는 마이크로 서비스를 만드는 데 사용되는 Java 기반 프레임 워크입니다.
스프링 부팅 종속성을 사용하여 응용 프로그램의 백엔드 구성을 단순화하여 필요한 종속성을 선택하여 응용 프로그램의 백엔드를 신속하게 설정할 수 있습니다.
말하자면, 우리의 백엔드를 바로 만들기 시작하겠습니다.

시작하기

브라우저에서 열기 : https://start.spring.io

프로젝트 : Maven Project
언어 : Java
Spring Boot (버전) : 우리는 최신 안정 버전을 사용합니다 : 2.2.6
그룹 : 이것은 당신의 인터넷 도메인입니다. CodeBean의 경우 nl.codebean 사용할 것입니다
아티팩트 : 이것은 프로젝트의 이름입니다. 이 프로젝트의 경우 react-spring-boot 사용할 것입니다
설명 : 프로젝트에 대한 간단한 설명입니다. 이 프로젝트를 위해 우리는 다음을 사용할 것입니다 : React and Spring Boot Tutorial
포장 : JAR
Java : 버전 8
종속성 : Spring Web

사전 생성 된 Spring Boot 응용 프로그램을 만들려면 다음을 클릭하십시오

하드 드라이브에서 zip 파일이 다운로드됩니다. zip 파일을 열고 프로젝트 폴더를 추출하십시오.
좋아하는 IDE에서 프로젝트 폴더를 엽니 다.

pom.xml

프로젝트 객체 모델 또는 POM은 Maven의 기본 작업 단위입니다.
프로젝트에 대한 정보와 Maven이 프로젝트를 구축하기 위해 사용한 구성 세부 정보가 포함 된 XML 파일입니다.

다음 목록은 Maven 프로젝트를 선택할 때 생성 된 POM.xml 파일을 보여줍니다.

<? xml version = " 1.0 " encoding = " UTF-8 " ?>
< project xmlns = " http://maven.apache.org/POM/4.0.0 " xmlns : xsi = " http://www.w3.org/2001/XMLSchema-instance "
  xsi : schemaLocation = " http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd " >
  < modelVersion >4.0.0</ modelVersion >
  < parent >
    < groupId >org.springframework.boot</ groupId >
    < artifactId >spring-boot-starter-parent</ artifactId >
    < version >2.2.6.RELEASE</ version >
    < relativePath /> <!-- lookup parent from repository -->
  </ parent >
  < groupId >nl.codebean</ groupId >
  < artifactId >react-spring-boot</ artifactId >
  < version >0.0.1-SNAPSHOT</ version >
  < name >react-spring-boot</ name >
  < description >React and Spring Boot Tutorial</ description >

  < properties >
    < java .version>1.8</ java .version>
  </ properties >

  < dependencies >
    < dependency >
      < groupId >org.springframework.boot</ groupId >
      < artifactId >spring-boot-starter-web</ artifactId >
    </ dependency >

    < dependency >
      < groupId >org.springframework.boot</ groupId >
      < artifactId >spring-boot-starter-test</ artifactId >
      < scope >test</ scope >
      < exclusions >
        < exclusion >
          < groupId >org.junit.vintage</ groupId >
          < artifactId >junit-vintage-engine</ artifactId >
        </ exclusion >
      </ exclusions >
    </ dependency >
  </ dependencies >

  < build >
    < plugins >
      < plugin >
        < groupId >org.springframework.boot</ groupId >
         < artifactId >spring-boot-maven-plugin</ artifactId >
      </ plugin >
    </ plugins >
  </ build >

</ project >

스프링 부트 컨트롤러

애플리케이션이 일부 데이터를 출력하도록하기 위해 서비스를 추가합시다.
이렇게하려면 GreetController.java 라는 컨트롤러를 추가하십시오

src/main/java/nl/codebean/reactspringboot/GreetController.java 에 컨트롤러를 저장하십시오

 package nl . codebean . reactspringboot ;

import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RestController ;

@ RestController
public class GreetController {

  @ RequestMapping ( "/api/greet" )
  public String greet () {
    return "Greetings from CodeBean!" ;
  }
}

@RestController : 클래스를 컨트롤러로 표시하는 스프링 부트 주석입니다.

@RequestMapping : "/api/greet" 을 greet() 메소드에 매핑하는 스프링 부팅 주석입니다. 브라우저에서 호출되거나 명령 줄에서 컬을 사용하여 메소드는 텍스트 만 반환합니다. @RestController @Controller 와 @ResponseBody 결합하여 두 개의 주석이 뷰가 아닌 데이터를 반환합니다.

이제 터미널에서 응용 프로그램을 실행합시다.

Spring Boot 응용 프로그램을 실행하십시오

응용 프로그램을 시작하려면 명령 터미널을 열고 다음 작업 (출력으로 표시)을 실행합니다.
이 튜토리얼에서는 터미널 명령에 원래 명령 앞에>가 표시됩니다.

> mvn spring-boot:run

2020-04-12 10:42:20.303  INFO 2232 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2020-04-12 10:42:20.311  INFO 2232 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2020-04-12 10:42:20.312  INFO 2232 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.33]
2020-04-12 10:42:20.378  INFO 2232 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2020-04-12 10:42:20.378  INFO 2232 --- [           main] o.s.web.context.ContextLoader            : Root WebApplicationContext: initialization completed in 896 ms
2020-04-12 10:42:20.503  INFO 2232 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2020-04-12 10:42:20.610  INFO 2232 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2020-04-12 10:42:20.612  INFO 2232 --- [           main] n.c.r.ReactSpringBootApplication         : Started ReactSpringBootApplication in 1.444 seconds (JVM running for 1.78)

응용 프로그램이 시작되면 서비스를 실행하겠습니다 (별도의 명령 터미널). 다음 작업을 실행하십시오 (출력으로 표시) :

> curl http://localhost:8080/api/greet
Greetings from CodeBean!

좋은 일! Spring Boot Rest Service가 이제 시작되었습니다.
백엔드 데이터를 프론트 엔드에 계속 가져 오자.

React Frontend를 만듭니다

이제 우리는 React라는 JavaScript 라이브러리를 사용하여 프론트 엔드를 구축 할 것입니다.
프론트 엔드에서 우리는 백엔드에 의해 생성 된 데이터를 가져올 수 있습니다. 시작합시다!

> npx create-react-app frontend

Creating a new React app in ../react-spring-boot/frontend

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
Installing template dependencies using npm...
Removing template package using npm...

Success! Created frontend at ../react-spring-boot/frontend

We suggest that you begin by typing:

  cd frontend
  npm start

지침은 명확합니다. 계속하자 (출력으로 표시) :

> cd frontend
> npm start

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000

브라우저를 열고 http : // localhost : 3000으로 이동하여 React 응용 프로그램을보십시오.
다음과 같이 보일 것입니다.

React Frontend에서 Spring Boot에서 휴식 서비스보기

다음 작업은 프론트 엔드 (클라이언트 측) 의 백엔드 (서버 측) 에서 API 데이터를 표시하는 것입니다.
백엔드는 포트 8080 http://localhost:8080 에서 실행됩니다
프론트 엔드는 포트 3000 http://localhost:3000 에서 실행됩니다

두 포트 모두 이제 상호 연결없이 서로 함께 실행됩니다. 프론트 엔드 포트에서 백엔드 포트까지 읽기 및 쓰기 액세스를 허용하려면 데이터 전송을 허용하는 프록시를 설정해야합니다.

이는 frontend/package.json 파일에 proxy 필드를 추가하여 포트 3000 /포트 8080 으로 데이터를 전송할 수 있도록합니다.

 "proxy" : " http://localhost:8080 " ,

frontend/package.json 파일은 이제 다음과 같습니다.

{
  "name" : " frontend " ,
  "version" : " 0.1.0 " ,
  "private" : true ,
  "dependencies" : {
    "@testing-library/jest-dom" : " ^4.2.4 " ,
    "@testing-library/react" : " ^9.5.0 " ,
    "@testing-library/user-event" : " ^7.2.1 " ,
    "react" : " ^16.13.1 " ,
    "react-dom" : " ^16.13.1 " ,
    "react-scripts" : " 3.4.1 "
  },
  "scripts" : {
    "start" : " react-scripts start " ,
    "build" : " react-scripts build " ,
    "test" : " react-scripts test " ,
    "eject" : " react-scripts eject "
  },
  "proxy" : " http://localhost:8080 " ,
  "eslintConfig" : {
    "extends" : " react-app "
  },
  "browserslist" : {
    "production" : [
      " >0.2% " ,
      " not dead " ,
      " not op_mini all "
    ],
    "development" : [
      " last 1 chrome version " ,
      " last 1 firefox version " ,
      " last 1 safari version "
    ]
  }
}

API 요청을 프록싱하는 것에 대한 자세한 내용은 React App의 문서 작성을 참조하십시오.

이제 프론트 엔드에서 데이터에 액세스 할 수 있는지 테스트합시다.

먼저 프론트 엔드를 다시 시작하십시오. 현재 세션을 중지하려면 IDE 터미널 창에 Ctrl + C를 입력하십시오.
프론트 엔드가 다시 시작되면 새 터미널 창을 열고 다음 명령을 입력하십시오 (출력으로 표시).

> curl http://localhost:3000/api/greet
Greetings from CodeBean!

React Frontend의 Spring Boot 백엔드에서 데이터 가져 오기

우리는 거의 거기에 있습니다. 이제 백엔드에서 데이터를 가져와 프론트 엔드에 표시합니다.
/frontend/src 폴더를 엽니 다. components 라는 폴더를 추가하십시오.
components 폴더에서 Greet.js 라는 파일을 추가하십시오

React 모범 사례에 따르면 구성 요소 폴더에는 구성 요소 역할을하는 모든 파일이 포함됩니다.
React 모범 사례에 따르면 구성 요소 이름은 대문자로 시작됩니다.

/src 폴더 구조는 이제 다음과 같습니다.

 .
├─ ...
├─ components
│   └─ Greet.js
└─ ...

Greet.js 파일에 다음 코드를 추가하십시오.

 import React , { useState , useEffect } from 'react' ;

const Greet = ( ) => {
  const [ greet , setGreet ] = useState ( "" ) ;

  async function fetchData ( ) {
    let res = await fetch ( '/api/greet' ) ;
    let greet = await res . text ( )
    setGreet ( greet ) ;
  }
  
  useEffect ( ( ) => {
    fetchData ( ) ;
  } , [ ] ) ;
  
  return (
  < div >
    < h4 > { greet } </ h4 >
  </ div >
  )
}

export default Greet ;

이제 /frontend/src 폴더에있는 App.js 파일을 엽니 다.
여기서 우리는 import Greet from './components/Greet'; 추가하여 Greet.js 구성 요소를 가져옵니다. App.js 파일에 <Greet /> .
코드는 다음과 같습니다.

 import React from 'react' ;
import logo from './logo.svg' ;
import './App.css' ;

import Greet from './components/Greet' ;

function App ( ) {
  return (
    < div className = "App" >
      < header className = "App-header" >
        < img src = { logo } className = "App-logo" alt = "logo" />
        < p >
          Edit < code > src/App.js </ code > and save to reload.
        </ p >
        < Greet />
        < a
          className = "App-link"
          href = "https://reactjs.org"
          target = "_blank"
          rel = "noopener noreferrer"
        >
          Learn React
        </ a >
      </ header >
    </ div >
  ) ;
}

export default App ;