[Web] React, Spring boot 연동

1. React ( port : 3000 )

[ npm은 설치되어있다고 전제 ]

1) npm install react

: 리액트 설치를 위함

2) npm install http-proxy-middleware

: CORS 정책 우회를 위함

3) src/setupProxy.js 생성 후 아래 내용 추가

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/test', // 우회가 필요한 부분을 라우팅
    createProxyMiddleware({
      target: 'http://localhost:8080', //타겟이 되는 API의 URL 입력. 필자는 백엔드에 8080 포트사용
      changeOrigin: true, // 서버 구성에 따라 호스트 헤더가 변경되도록 설정
    })
  );
};

4) src/App.js를 아래와 같이 설정

import React, {useEffect, useState} from "react";
import axios from 'axios';
 
function App(){
 
  let [data, setData] = useState(""); // useState 정의
 
 // useEffect에서 응답된 데이터를 /test로부터 받아온다.
  useEffect(()=>{
    axios.get(`/test`)
    .then(response => setData(response.data)
    .catch(error => console.log(error))) 
  }, []);
 
 // useEffect의 axios로부터 받아온 정보는 setData를 통해 data에 저장됨.
 // 해당 내용을 return문의 { }로 둘러쌓인 부분에 넣어 출력
  return(
    <div>
      <p>axios Result : </p>
      <p>{data}</p>
    </div>
  )
}
 
export default App;

 

 

2. Spring Boot ( port : 8080 )

1) spring initializer를 통해 다음과 같이 설정

필자의 경우는 gradle을 이용하여 세팅

 

: 결론적으로 다음과 같은 구조를 가지게 된다

 

 

2) src/main/java/com.example.demo/DemoApplication 코드를 아래와 같이 작성

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.sql.Date;
import java.sql.Time;
import java.time.LocalDate;
import java.time.LocalDateTime;
@RestController
@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
    
	@GetMapping(value = "/test")
	public String test() {
		System.out.println(LocalDateTime.now());
		return "\n현재시간은? : " + LocalDateTime.now();
	}
}

 

3. 결과 화면

1) 리액트

2) 스프링