[프로젝트]React + Spring Boot 연동

목표

Front-End로는React, Back-End로는 Spring Boot를 쓰려고한다.

이 때, 둘 사이에서 데이터를 주고 받을 수 있도록 연동시킨다.

 

연동 과정

1. 스프링 부트 프로젝트 생성

Spring Web Dependency가 추가된 상태로 이클립스로 File->New->Spring Starter Project를 실행한다.

자신의 취향대로 설정하면 된다. 나는 Maven에 Java11을 선택하겠다.

Spring Web을 추가하고 Finish

프로젝트를 실행시키고 위와 같은 화면이 콘솔창에 출력되면 프로젝트가 성공적으로 생성된 것이다.

localhost:8080 에 접속하면 위와 같은 화면이 출력된다.

다른 화면이 출력되길 원한다면 src->main에 index.html 파일을 생성해주면 된다만아래 React에서 UI를 출력할 것이므로 생성할 필요는 없다.

 

2.React 프로젝트 생성

https://chaechaeros.tistory.com/69

[React]React 설치와 개발환경 세팅

(React 관련 프로그램 설치는 위 글을 참고한다.)

npx create-react-app (리액트 프로젝트 폴더 이름 입력)

터미널에서 Spring Boot 프로젝트 폴더 -> src -> main 폴더로 이동한 후, 위 명령어 입력을 통해 React 폴더를 생성한다.

위 사진은 reactfront 라는 이름으로 리액트 프로젝트 폴더를 생성한 모습이다.

 

이제 터미널에서 리액트 프로젝트 폴더로 경로를 이동한 후 아래 명령어를 입력하면 리액트 UI를 출력할 수 있다.

npm start

 

3. Proxy 설정

Spring은 포트를 8080, React는 포트로 3000을 사용하고 있다. 서버와 클라이언트가 서로 같은 IP에 있을 경우에는 둘 사이의 데이터 전송이 포트번호가 달라도 문제없으나,서버와 클라이언트가 서로 다른 IP를 사용하고 있을 때는 포트번호가 다르면 데이터 전송이 되지 않는 CORS 문제가 발생한다. (CORS(Cross-Origin Resource Sharing)는 포트번호, 프로토콜, 도메인 셋 중 하나라도 다른 경우 보안상 브라우저가 요청을 거부함)따라서 React에서는 이를 해결해주기 위해 중간에 Spring과 같은 포트의 Proxy를 두고 데이터를 송수신해야한다.

 

React 프로젝트 폴더->package.json 파일에서scripts 위에 "proxy": "http://localhost:8080" 을 입력하여 중간에 프록시를 생성한다.

 

연동 확인을 위한 데이터 전송

 1) 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('/hello')
            .then(response => response.text())
            .then(message => {
                setMessage(message);
            });
    },[])
    return (
        <div className="App">
            <h1>{message}</h1>
        </div>
    )
}
 
export default App;

  2) Spring Boot의 HelloController

package com.example.demo;
 
import java.util.Date;

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

 
@RestController
public class HelloController {
 
    @GetMapping("/hello")
    public String hello(){
        return "안녕하세요. 현재 서버시간은 "+new Date() +"입니다^^ \n";
    }
}

React 클라이언트에서 /hello를 요청하자, Spring에서 이에 대응되는 문자열을 전송시키고

React가 그걸 다시 받아 출력한 모습이다.