이 블로그의 개발환경 메뉴에 작성되어 있는
자바 스프링 메이븐 REACT 개발환경 프론트엔드 와 백엔드 환경설정(2/2) 스크립트 에
아래 Webpage 테스트 소스를 적용하면 수월하다.
백엔드 Spring Maven 프레임워크 PageController.java 추가
// PageController.java 추가
// Backend: Java Spring Boot with Maven
// Frontend: React
// Backend (Java Spring Boot): Controller Example
package com.example.demo.controller;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api")
public class PageController {
@GetMapping("/products")
public String getProducts() {
return "Product Page Content";
}
@GetMapping("/webpage")
public String getWebpage() {
return "Webpage Development Page Content";
}
@GetMapping("/app")
public String getApp() {
return "App Development Page Content";
}
@GetMapping("/embedded")
public String getEmbedded() {
return "Embedded Development Page Content";
}
@PostMapping("/login")
public String login(@RequestParam String username, @RequestParam String password) {
// Authentication logic placeholder
return "Login Success";
}
@GetMapping("/admin")
public String getAdmin() {
return "Admin Page Content";
}
}
프론트엔드 Visual Code 프레임워크 App.js, App.cs 소스 추가
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<Router>
<div className="App">
<header className="navbar">
<nav>
<ul className="nav-links">
<li><Link to="/">Home</Link></li>
<li><Link to="/products">Products</Link></li>
<li><Link to="/webpage">Webpage Development</Link></li>
<li><Link to="/app">App Development</Link></li>
<li><Link to="/embedded">Embedded Development</Link></li>
<li><Link to="/admin">Admin</Link></li>
<li><Link to="/login">Login</Link></li>
</ul>
</nav>
</header>
<main className="content">
<Routes>
<Route path="/products" element={<Section content="Products Section Content" />} />
<Route path="/webpage" element={<Section content="Webpage Development Section Content" />} />
<Route path="/app" element={<Section content="App Development Section Content" />} />
<Route path="/embedded" element={<Section content="Embedded Development Section Content" />} />
<Route path="/admin" element={<Section content="Admin Section Content" />} />
<Route path="/login" element={<Login />} />
<Route path="/" element={<Home />} />
</Routes>
</main>
</div>
</Router>
);
}
function Section({ content }) {
return <div className="section">{content}</div>;
}
function Home() {
return <div className="home">Welcome to DevPooh Tistory!</div>;
}
function Login() {
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
fetch('/api/login', {
method: 'POST',
body: formData,
})
.then(response => response.text())
.then(data => alert(data));
};
return (
<form onSubmit={handleSubmit} className="login-form">
<label>
Username:
<input type="text" name="username" required />
</label>
<label>
Password:
<input type="password" name="password" required />
</label>
<button type="submit">Login</button>
</form>
);
}
export default App;
App.css
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ece9e6, #ffffff);
}
.navbar {
background-color: #333;
padding: 1rem;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: center;
}
.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 1.2rem;
}
.nav-links a:hover {
color: #ff9800;
}
.content {
padding: 2rem;
text-align: center;
}
.home {
font-size: 2rem;
color: #333;
margin-top: 2rem;
}
.section {
padding: 2rem;
border: 1px solid #ccc;
margin: 2rem;
border-radius: 10px;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.login-form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 300px;
margin: 0 auto;
padding: 2rem;
border: 1px solid #ccc;
border-radius: 10px;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.login-form label {
display: flex;
flex-direction: column;
text-align: left;
font-size: 1rem;
color: #555;
}
.login-form button {
padding: 0.5rem 1rem;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.login-form button:hover {
background-color: #ff9800;
}
추가후
STS4 메이븐 빌드, Visual Code 빌드 후
브라우저에 http://localhost:3000/
입력후
상단 메뉴버튼 클릭시, 페이지 이동 동작이 되면,
아래와 같이 스프링 리액트의 백과 프론트의
웹페이지 연동을 확인 할 수 있다.
랜딩 Home
Products
Login
