차이

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

--- wiki:javascript:react:springboot_react [2021/06/17 16:43]
jskim
+++ wiki:javascript:react:springboot_react [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ====== SpringBoot + React ======
->스프링부트 프로젝트와 리액트 프로젝트를 각각 생성하여 개발환경 구축하기.
+각각 생성된 스프링부트와 리액트 프로젝트를 연동하는 과정입니다.
-\\
+  * 스프링부트 IDE : STS4
+  * 리액트 IDE : VSCode
+===== SpringBoot =====
+>데이터로 사용할 객체 생성 후, 리액트에서 요청 받을 컨트롤러 설정
 <code java>
-	// 데이터로 사용할 객체생성
+@Getter
-	@Getter
+public static class User
-	public static class User
+{
-	{
+	int id;
-		int id;
+	String username;
-		String username;
+	String passwd;
-		String passwd;
+	String email;
-		String email;
-		public User(int id, String username, String passwd, String email)
-		{
-			this.id = id;
-			this.username = username;
-			this.passwd = passwd;
-			this.email = 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()
@@ 줄 37: / 줄 40: @@
 		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>
@@ 줄 44: / 줄 121: @@
 [[https://transferhwang.tistory.com/411|스프링 부트 + 리액트 환경 구축 및 연동]]
-{{tag> eleven react springboot vscode}}
+{{tag> eleven react springboot STS4 vscode}}

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

사용자 도구

사이트 도구

차이

문서 도구