React + spring boot

Spring boot 와 React를 연동하기 해보기 위해서 작성함
나 같은 경우엔 백과 프론트를 나눠둠

처음엔 어떻게 해야할지 몰랐는대 그냥 쉽게 ide에 프로젝트 2개 띄워서 백엔드프로젝트(tomcat)실행후
프론트엔드 프로젝트에서 npm으로 리액트를 설치해주고 start해주면됨(너무 당연한건대 나만 모르던거 같음..)

백엔드

@RestController
public class ReactTestController {


    @GetMapping("/api/hello")
    public String test(){

        return "안녕하세요용 스프링부트와 React를 proxy 설정으로 연결했음 ";
    }

우선 테스트용 컨트롤러를 rest 방식으로 만들어줬음 그 후 GetMapping으로 문자열 리턴해줌

프론트엔드

프론트는 리엑트 자체를 처음 다루다 보니까 문제가 많이 생겼음

React에서 컨트롤러를 호출하기 위해선 프록시를 설정해줘야함
package.json에
"proxy": "http://localhost:8080",를 추가해줌
(여기서 포트는 자신의 백엔드 서버 포트)

이후
npm install axios로 axion를 설치한후
npm install http-proxy-middleware로 middleware를 설치
npm install react-router-dom설치
npm install react-router설치

다음으로
setProxy.js파일 생성
타입스크립트에서는 import나 export가 없는 파일을 모듈이 아닌 레거시파일로 보기 때문에 export {}라도 해줘야함

export {}

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

module.exports = function (app: any) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8080',
            changeOrigin: true,
        })
    );
};

확장자를 .tsx가 아닌 .ts로 줘야함 꼭
코드는 /api의 경로가 실행되면 프록시로 미들웨어를 실행

axios.js파일생성 view/

import {useEffect, useState} from "react";
import axios from "axios";

function App(){
    const [hello, setHello] = useState('')

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

    return(
        <div>
            백엔드에서 가져온 데이터입니다 : {hello}
        </div>
    );
}
export default App;

app.js에 내용추가

import {BrowserRouter, Link, Route, Routes} from "react-router-dom";
import Home from "./view/home";
import About from "./view/about";
import Axios from "./view/axios";

function App() {
    return (
        <div>
            <BrowserRouter>
                <nav>
                    <Link to='/'>Home</Link>
                    <br/>
                    <Link to='/about'>About</Link>
                    <br/>
                    <Link to='/profile'>Profile</Link>
                    <br/>
                    <Link to='/axios'>Axios</Link>
                </nav>
                <header>----------------------------------</header>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/about" element={<About/>}/>
                    <Route path="/axios" element={<Axios/>}/>
                </Routes>
                <footer>----------------------------------</footer>
            </BrowserRouter>
        </div>
    );
}

export default App;

참고
https://velog.io/@ysm6768/SpringBoot-React-%EA%B2%8C%EC%8B%9C%ED%8C%90
https://velog.io/@velopert/react-router-v6-tutorial
https://velog.io/@soryeongk/ReactRouterDomV6