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