Spring Boot + React 환경셋팅

 화면은 React로 구현하고, 온라인은 Spring Boot로 셋팅하려고한다. 

 

아래 링크들은 환경셋팅하면서 도움받았던 글이다.

 

누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기 | VELOPERT.LOG

 

Spring Boot와 React를 연동하여 개발환경을 만들어보자

 

1. 프로젝트 생성

---

spring 웹 프로젝트 생성을위해 start.spring.io/  에 접속해서 Spring Web을 Dependency로 추가했다.  

 

React 프로젝트도 생성한다. yarn을 이용했으며 create-react-app [프로젝트명] 명령어를 사용하면된다.

 

C:\project 아래에 각각의 프로젝트를 생성했다.

---

2. 실행확인

---

온라인 테스트를 위해 Controller를 작성한다. @RestController 어노테이션을 추가함으로써 REST 형태의 온라인을 구현한다. @GetMapping("/demo/hello")를 통해 /demo/hello에 대한 GET 요청을 처리할 수 있도록 한다.

package com.example.springDemo.controller;


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

@RestController
public class HelloController {

    @GetMapping("/demo/hello")
    public String HelloWorld(){
        return "Hello World!! \n";
    }
}

 

 

 

 

위와 같이 Controller를 작성하고 프로젝트를 실행한다.

Spring의 기본포트는 8080이며, Controller에서 작성한 /demo/hello 를 GET 방식으로 성공적으로 호출하고 화면에 return 값을 출력한다.

React는 별도의 소스 수정없이 바로 프로젝트를 실행하면 된다.

React의 기본 포트는 3000이며, 프로젝트 생성 후 바로 실행하면 아래와 같은 화면이 뜬다. 

yarn 이용시 프로젝트 실행 명령어는 yarn start

 

---

3. React에서 Controller 호출하기.

---

 먼저 package.json에 "proxy : Spring Boot의 서버 주소"를 추가한다. 이유는 react에서 Spring 호출시 CORS 에러가 발생하기 때문이다. CORS는 서로다른 도메인끼리 호출할때 발생한다.

 

Spring의 Controller쪽에서 CORS를 무시하는 어노테이션을 추가할수도 있지만 매번 쓰는건 번거로우니 리액트 쪽에서 proxy를 추가하는 방법으로 처리한다.

http://localhost:8080 proxy를 추가한다.

 

리액트의 fetch 함수를 통해 서버와 통신을 시도한다. 

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

function App() {

  // message 초기값을 ""으로 설정.
  const [message, setMessage] = useState("");

  // useEffect(함수,배열) : 컴포넌트가 화면에 나타났을(마운트)때 자동 실행.
  useEffect( () => {
     
        // fetch(url,options) : HTTP 요청 함수
        fetch('/demo/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;

 

요청 성공시 Spring으로부터 받아온 return을 출력한다. 

실행결과