Spring Boot(백엔드) + React(프론트엔드) 연동 구축

[1901236장석천]

* PC 환경 VScode 가 깔려있다는 전제를 바탕으로 구성 되었습니다

* 리액트 설치는 https://cafe.daum.net/SmartRobot/RoVa/896 를 참고해 주세요

VScode(VisualStudioCode)에 들어가서

ctrl + shift + p

를 입력하게 되면 아래와 같이 확장 프로그램 창이 뜨는데 그 중에

Extension Pack for Java와  Spring Boot Extension Pack을 설치 하셔야 합니다.

설치가 완료 되면 위 사진들과 같이 사용 안 함 및 제거가 뜹니다.

설치가 완료되었으면 위 사진과 같이 창을 키고 Spring initalalizr: Add Starters.. 라고 써있는 텍스트 클릭하고 아래의 사진대로 선택하여 Spring 프로젝트 설정을 마치면 됩니다.

Spring Boot Version

Language

Folder Name

File Packaging Type

Java Version

Spring Web Services Web 클릭하시면 됩니다 Web Web 아님

위에 설정을 마치면 위 사진과 같이 Spring 프로젝트를 다운할 폴더 위치를 고르게 하는데 원하는 위치 입력하시고

Generate into this folder 누르시면 아래와 같은 화면이 뜨면서 진행 됩니다.

Open은 아까 지정한 demo라는 이름의 폴더 안에 Spring 파일을 만들고    Add는 현재 지정한 폴더에 Spring 파일을 만듭니다 

위 과정을 마치면 아래와 같이 Spring 서버를 사용하실 수 있습니다.

리액트는 전에 제가 올린 자료를 참고하여 설치해 주시면 됩니다.

https://cafe.daum.net/SmartRobot/RoVa/896

Daum 카페

이제 리액트와 스프링 부트 통합 환경을 제작하겠습니다.

Spring Boot 설치 후 파일

정상적으로 설치가 완료되면 위와 같은 화면이 출력 되는데  src/main/java/example/demo 밑에 

HelloController.java 파일을 만들고 아래 내용을 작성해 줍니다 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

package com.example.demo;   import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController;  import java.util.Date;  @RestController public class HelloController  {          @GetMapping("/api/hello")         public String hello()     {                 return "안녕하세요. 현재 서버시간은 "+new Date() +"입니다. \n";     }       @GetMapping("/api/heello")         public int hello1()     {                 return 100;     } }

cs

그럼

DemoApplication.java

파일을 실행해 스프링 서버를 실행할때 자동으로 함께 실행됩니다

Spring Boot의 기본 주소 + /api/hello를 입력하면

localhost:8080/api/hello

위와 같은 화면이 출력됩니다.

이제 이 데이터를 리액트에서 수신받아 리액트 화면에 출력하게 됩니다.

리액트 파일에서 App.js를 다음과 같이 편집합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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;

cs

Spring Boot  /api/hello에서 보네는 text 데이터를 리액트 화면에 출력하는 코드입니다.

이제 Spring Boot와 리액트를 동시에 실행하면 아래와 같은 화면이 출력됩니다.