react와 spring boot 간 연동하기 / 통신하기

프론트엔드인 react와 백엔드인 spring boot를 잇기 위한 설정을 하고자 한다.

 

---

목차

전송 형식 소개
react 
   - proxy 설정
   - axios 라이브러리를 사용한 서버통신
      - axios의 특징
      - axios 라이브러리 사용하기
spring boot 
   - Dto 구현
   - Controller 구현

---

전송 형식 소개

- 전송 형식은 요청과 답변 모두 json 형식으로 진행한다.

- react에서 post 요청을 보낼시 url은 "localhost:8080/api/test" 이며, {msg: "body 내용"} 인 body를 포함한다.

  react에서 get 요청을 보낼시 url은 "localhost:8080/api/test?ID=12345" 이며 ID=12345 인 파라미터를 포함한다.

- spring에서 답변을 보낼시 요청을 보냈던 내용을 그대로 보낸다.

---

React 

- proxy 설정

서버 통신 코드를 작성하기 전, 한가지 설정 파일을 작성해야 한다.

CORS 위반 에러를 방지하기 위한 proxy 설정이다. CORS란 도메인이 다른 리소스끼리 통신할때 보안을 위해 만들어진 정책이다. 개발할 때는 react와 spring boot의 도메인이 각기 다르다. react는 localhost:3000을 사용하고, spring boot는 localhost:8080을 사용한다. 그래서 CORS에러가 나는데, 이 코드를 통해 react 요청 경로를 localhost:8080으로 세팅하여 에러를 방지한다.

배포하는 시점에서는 백엔드와 프론트를 통합하거나 Nginx에서 프록시를 설정하면 도메인이 통일되어서 CORS 에러가 나지 않는다. 하지만 개발이 진행중일 때에는 아래 방법으로 손쉽게 CORS 에러를 피할 수 있다.

 

이를 위해 아래 코드를 터미널에 입력한다.

npm install http-proxy-middleware --save

 

 

 

그리고 파일을 생성하여 아래 코드를 입력하여 저장한다.

src/setupProxy.js

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

module.exports = function(app){
    app.use(
        createProxyMiddleware({
            target: 'http://localhost:8080',	//서버에서 설정한 URL
            changeOrigin: true,					//호스트 헤더를 target URL로 변경
            pathFilter : '/api',				//적용할 경로 (주석 처리시 모든 경로에 적용됨)
        }),
    );
};

---

- axios 라이브러리를 사용한 서버 통신

서버와의 통신을 위한 코드를 작성하겠다. 이때 axois 라이브러리를 사용한다.

 

 

axios 라이브러리의 특징

api와 연동할 때 사용하는 http 비동기 통신 라이브러리다. fetch와 비슷한 기능을 가졌는데, fetch와는 달리 쉽고 직관적이며 서버에서 받은 response를 자동으로 json으로 반환해주기도 한다.

axios는 업데이트로 인한 코드 변경이 있을 수 있으니 아래 링크를 통해 확인하자.

axois 공식 링크 : https://axios-http.com/docs/example

axios를 사용하기 위해 터미널에 아래 코드를 입력한다.

npm install axios --save

 

 

axios 라이브러리 사용하기

1. 동기적으로 post 요청하기

url "localhost:8080/api/test"를 요청하고 {msg: "body 내용"} 인 body를 포함한 코드다. 

import axios from 'axios';

function App() {
    const [responseData, setResponseData] = useState("");
    
    useEffect(() => {
        axios.post('/api/test',
            {
                msg: "body 내용",		//생략 가능
            },
            { "Content-Type": "application/json", withCredentials: true },)	//header 값들, 생략 가능
        .then(response => setResponseData(response.data))
        .catch(error => console.log(error))
    }, []);
    
    return (
    	<div>서버로부터 받은 내용 : {responseData}<div>
    );
}

 

결과 출력

 

 

 

2. 동기적으로 get 요청하기

url "localhost:8080/api/test?ID=12345" 를 요청하는 코드다. ID=12345 인 파라미터를 포함한다.

import axios from 'axios';

function App() {
    const [responseData, setResponseData] = useState("");
    
    useEffect(() => {
        axios.get('/api/test', 
            {
                params: {
                    ID: 12345
                },
            }
        )
        .then(response => setResponseData(response.data))
        .catch(error => console.log(error))
    }, []);
    
    return (
    	<div>서버로부터 받은 내용 : {responseData}<div>
    );
}

 

결과 출력

 

 

3. 비동기적으로 post/get요청하기

비동기를 사용하려면 위 동기적 코드에서 async 과 try/catch문을 적용하면 된다.

    //post 요청
    async function getResponsePost() {
        try{
            const response = await axios.post('/api/test',
                {
                    msg: "body 내용"
                },
                { "Content-Type": "application/json", withCredentials: true },);
                console.log(response.data);
        } catch (error) {
            console.log(error);
        }        
    }
    
    //get 요청
    async function getResponseGet() {
        try{
            const response = await axios.get('/api/test',
                {
                    params: {
                        ID: 12345
                    },
                });
            console.log(response.data);
        } catch (error) {
            console.log(error);
        }        
    }

---

Spring boot 

프론트에게서 요청을 받은 내용 그대로 다시 답변해주는 로직을 짜겠다.

 

- DTO 구현

RequestDto.java

- post 요청의 body부분을 받아올 틀이다.

@Data      
@NoArgsConstructor
public class RequestDto {
    private String msg;
}

 

- Controller 구현

HomeController.java

- 프론트에게서 요청을 받아 그 내용 그대로 다시 답변하는 로직이다.

@RestController            
public class HomeController {
    
    //post 요청을 받는 함수
    @PostMapping("/api/test")
    public Map<String, Object> postRequest(@RequestBody RequestDto requestDto) {
        Map<String, Object> response = new HashMap<>();
        response.put("msg", requestDto.getMsg());
        return response;
    }

    //get 요청을 받는 함수
    @GetMapping("/api/test")
    public Map<String, Object> getRequest(@RequestParam(value="ID") int id) {
        Map<String, Object> response = new HashMap<>();
        response.put("ID", id);
        return response;
    }
}