React 와 Spring 환경 구성 세팅

React 와 Spring 환경 구성 세팅

Springboot와 React가 모두 설치돼있다는 가정 하에 기록하는 문서이다. 연동하기 위해 따로 설치부터 설정해주어야 하는 부분들은 없기 때문에, 가장 기본으로 설치하고 진행해도 된다.

Spring과 React를 연동해서 사용할 경우, 가장 큰 걸림돌은 Proxy 설정으로, cors 문제 및 오류 메시지를 피할 수 있게 하기위한 설정이다.

Proxying API Requests in Development | Create React App

위는 React에서 제공하는 공식문서로, Proxy 설정하는 법에 대해 알려주고 있다. 그 외에도 여러가지 사용방법이나 기능들을 설명하는 문서가 많으니 참고해보는 것도 좋다.

💡 CORS (Cross Origin Resource Sharing) 란, 서버와 클라이언트가 동일한 ip주소에서 동작한다면, resource를 주고 받는데 제약이 없지만, 만약 다른 도메인이라면 어떠한 데이터도 주고받을 수 없다.

• cors는 기본적으로 웹 개발자라면 한번쯤은 겪게되는 오류를 야기하는 주범이다.

간단한 API 서버 통신을 진행하는 경우에 발생하기 때문에, 생각보다 더 당황스럽다. 문법의 오류와 같은 실수가 아닌 정책의 문제이기 때문이다.

https://www.naver.com/cafe?norn=asc&

각각 protocol, host, path, querystring 으로 이루어져 있는 이 주소중에 host, protocol, 그리고 포트번호 까지 합친것이 출처인데. 이 출처가 일치해야만 정보를 주고받을 수 있다는 뜻이다.

npm install http-proxy-middleware —save

React에서 해당 모듈을 설치해서 proxy를 설정해줘야 한다.

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

module.exports = function(app) {
  app.use(
    '**/api**',
    createProxyMiddleware({
      target: 'http://localhost:8080',    # 서버 URL or localhost:설정한포트번호
      changeOrigin: true,
    })
  );
};

리액트 프로젝트 src폴더 내에 해당 js 파일을 생성하여 위의 코드를 사용해주자. 타겟은 spring의 기본적인 localhost:포트번호 이다.

이제 클라이언트단, 즉 리액트에서 /api 로 요청을 보내면 서버단인 8080포트로 요청이 도착한다.

---

클라이언트와 서버 사이에 통신을 편리하게 사용 가능하게 하는 라이브러리인 Axois를 설치한다. npm install axios —save

그 후 원하는 return 페이지가 있는 js 파일에서 아래 코드를 작성해주면 서버단에서 넘어오는 데이터를 받아 사용하는 것이 가능하다.

import Gnb from '../components/gnb/Gnb';
import Carousel from '../components/carousel/Carousel';
import MenuTab from '../components/menutab/MenuTab';
import styled from 'styled-components';
import Fnb from '../components/fnb/Fnb';

import React, {useEffect, useState} from 'react';
import axios from 'axios';

const Main = () => {

    const [hello, setHello] = useState('')

    useEffect(() => {
        axios.get('/api/hello')
        .then(response => setHello(response.data))
        .catch(error => console.log(error))
    }, []);

    return (
        <MainContent>
            <Gnb />
            <MenuTab />
            <Carousel />
            <ContentView className='main-content'>
                <ul>
                    {hello}
                </ul>
            </ContentView>
            <Fnb/>
        </MainContent>
    )
}

const MainContent = styled.div`
  width: 1280px;
  padding: 10px;
`;

const ContentView = styled.div`
    width: 100%;
    height: 1000px;
`;

export default Main;

해당 리액트 코드를 작성 한 후에, spring에서 데이터를 넘겨줄 컨트롤러를 작성하자

package com.TheCp.web;

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

import java.util.List;

@RestController
public class HomeController {
    @GetMapping("/api/hello")
    public String hello() {
        return "스트링 반환값";
    }

}

Controller.class파일을 생성해서 위처럼 기본적인 매핑 메소드를 등록해주자, 주소는 위에서 작성한 axios.get(주소값)을 향해 잡아주자.

그 후 두개의 서버를 모두 실행시킨후 실행하면 리액트 페이지에 spring에서 보낸 값을 받아주는 것을 확인할 수 있다. 즉, 메소드에서의 리턴값을 리액트에서 받게된다.