wiki:javascript:react:springboot_react

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:javascript:react:springboot_react [2021/06/17 16:34]
jskim
+++ wiki:javascript:react:springboot_react [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ====== SpringBoot + React ======
+각각 생성된 스프링부트와 리액트 프로젝트를 연동하는 과정입니다.
+  * 스프링부트 IDE : STS4
+  * 리액트 IDE : VSCode
-===== Ref =====
-{{tag> eleven react springboot 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}}

/volume1/web/dokuwiki/data/attic/wiki/javascript/react/springboot_react.1623915278.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)