문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== SpringBoot + React ======
각각 생성된 스프링부트와 리액트 프로젝트를 연동하는 과정입니다.
  * 스프링부트 IDE : STS4
  * 리액트 IDE : VSCode




===== SpringBoot =====
>데이터로 사용할 객체 생성 후, 리액트에서 요청 받을 컨트롤러 설정
<code java>
@Getter
public static class User
{
	int id;
	String username;
	String passwd;
	String email;
		
	public User(int id, String username, String passwd, String email)
	{
		this.id = id;
		this.username = username;
		this.passwd = passwd;
		this.email = email;
	}
}
</code>
<code java>
@RestController
public class HiReactController
{	
	// 리액트와 연결될 주소 매핑
	@PostMapping("/api/users")
	public User user()
	{
		System.out.println("::: HiReactController IN :::");
		User user = new User(1, "eleven", "1234", "jskim@repia.com");
		
		return user;
	}
}
</code>
\\
===== React =====
> 부트와 통신하기 위해 proxy와 axios 라이브러리 설치
<code bash>
PS ~\react-app> npm install http-proxy-middleware --save
PS ~\react-app> npm install axios --save
</code>
\\
> 프록시 설정을 위해 src/setupProxy.js 파일 생성
<code javascript>
const {createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function(app){
    app.use(
        "/api"
        , createProxyMiddleware({
            target: "http://localhost:8006" // 부트프로젝트 주소
            , changeOrigin: true
        })
    );
};
</code>
\\
> axios가 요청을 보내고, 리턴값을 화면에 띄우기 위해 src/App.js 파일 수정
<code javascript>
import logo from './logo.svg';

import React, {useState, useEffect} from "react";
import './App.css';
import Axios from "axios";


function App()
{
  const [user, setUser] = useState("");
  useEffect(() => {
    Axios.post("/api/users").then((response) => {
      if(response.data){
        console.log("console check! ===> ", response.data);
        setUser(response.data);
      }
      else
      {
        alert("failed to");
      }
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <h1>Hello, React!</h1>

        <p>No.{user.id}</p>
        <p>name is {user.username}</p>
        <p>password? {user.passwd}</p>
        <p>email... {user.email}</p>
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >
          Learn React
        </a>

      </header>
    </div>
  );
}

export default App;
</code>
\\
> 스프링부트 서버 실행 후, 리액트 실행하여 화면 확인
<code bash>
PS ~\react-app> npm run start
</code>

===== Ref =====
[[https://transferhwang.tistory.com/411|스프링 부트 + 리액트 환경 구축 및 연동]] 

{{tag> eleven react springboot STS4 vscode}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구