wikibook / springboot-react

《실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발》 예제 코드

Full Stack Development with Spring Boot and React

Full Stack Development with Spring Boot and React, published by Packt

This is the code repository for Full Stack Development with Spring Boot and React, published by Packt.

Build modern and scalable full stack applications using the power of Spring Boot and React

What is this book about?

This book is for Java developers who are familiar with Spring Boot but don’t know where to start when it comes to building full stack applications. You'll also find this book useful if you're a frontend developer with knowledge of JavaScript basics looking to learn full stack development or a full stack developer experienced in other technology stacks looking to learn a new one.

This book covers the following exciting features:

• Make fast and RESTful web services powered by Spring Data REST
• Create and manage databases using ORM, JPA, Hibernate, and more
• Explore the use of unit tests and JWTs with Spring Security
• Employ React Hooks, props, states, and more to create your frontend
• Discover a wide array of advanced React and third-party components

If you feel this book is for you, get your copy today!

Instructions and Navigations

All of the project files are organized into folders. For example, Chapter01.

The code will look like the following:

public class Car {
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
private long id;
private String brand, model, color, registerNumber;
private int year, price;
}

Following is what you need for this book:

Getting started with full stack development can be daunting. Even developers who are familiar with the best tools, such as Spring Boot and React, can struggle to nail the basics, let alone master the more advanced elements. If you’re one of these developers, this comprehensive guide covers everything you need!.

With the following software and hardware list you can run all code files present in the book (Chapter 1-16).

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. Click here to download it.

Code in Action

Click on the following link to see the Code in Action: Youtube link

Related products

• Full-Stack Web Development with GraphQL and React [Packt] [Amazon]

• Modern API Development with Spring and Spring Boot [Packt] [Amazon]

Get to Know the Author

Juha Hinkula is a software development lecturer at Haaga-Helia University of Applied Sciences in Finland. He received an MSc degree in computer science from the University of Helsinki. He has over 18 years of industry experience in software development. Over the past few years, he has focused on modern full stack development. He is also a passionate mobile developer with Android-native technology and React Native.

Download a free PDF

If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.
Simply click on the link to claim your free PDF.

https://packt.link/free-ebook/9781801816786

springboot-react's Issues

WebSecurityConfigurerAdapter deprecated 관련 설정

5장에서 WebSecurityConfigurerAdapter deprecated로 인해 spring boot 3.x 테스트가 멈추었습니다.
앞에서는 spring boot 2.7 & react 관련이지만 spring boot 3.x 관련 주요 변경 사항이 언급을 해주셨는데,
이번장에는 언급이 없네요....
WebSecurityConfigurerAdapter deprecated 관련된 내용을 어떻게 수정해야 하는지 혹시 언급을 해주실 수 있을까요?

미리 감사합니다.

14장 로그인 처리시 토큰값을 읽어오지 못하는 현상이 있습니다 ㅠㅠ

import React, { useState } from "react";
import { Button, Form, Input } from "antd";
import { SERVER_URL } from "../constants";

const LoingForm = () => {
const [user, setUser] = useState({
username: "",
password: "",
});
const [isAuthenticated, setAuth] = useState(false);

const handleChange = (event) => {
    setUser({ ...user, [event.target.name]: event.target.value });
};

const login = () => {
    console.log("login");
    console.log("user", user);
    fetch(SERVER_URL + "/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(user),
    })
        .then((res) => {
            console.log("res", res);
            console.log("res.headers", res.headers);
            const jwtToken = res.headers.get("Authorization");
            console.log("jwtToken", jwtToken);
            if (jwtToken !== null) {
                sessionStorage.setItem("jwt", jwtToken);
                setAuth(true);
                //} else {
                //    setOpen(true);
            }
        })
        .catch((err) => console.error(err));
};

return (
    <Form name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} initialValues={{ remember: true }} autoComplete="off">
        <Form.Item label="Username" name="username" rules={[{ required: true, message: "Please input your username!" }]}>
            <Input name="username" onChange={handleChange} />
        </Form.Item>
        <Form.Item label="Password" name="password" rules={[{ required: true, message: "Please input your password!" }]}>
            <Input.Password name="password" onChange={handleChange} />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" onClick={login}>
                Submit
            </Button>
        </Form.Item>
    </Form>
);

};

export default LoingForm;

mui를 사용하지 않고 ant design을 사용한것 말고는 동일한데요.

로그인 화면

console.log

jwtToken이 null이 나오고 있습니다 ㅠㅠ
소스는 동일한데요...
status 200 나오는거 봐서는 문제가 없어 보이는데..... 왜 token 을 얻지 못할까요?

더하기1: SecurityConfig 파일 설정입니다.

더하기2: POST MAN으로 동작은 정상적입니다.

동일한 Backend 소스를 react에서 호출할떄 결과와 POST MAN 호출할때 결과가 다릅니다.

useEffect 테스트 중 제대로 동작하지 않는 문제...

7장 146페이지의 useEffect 후크를 넣고 초기 렌더링시 콘솔에서 2번 기록을 합니다.
설명상으로 1번만 기록되어야 할텐데.... 무엇이 문제 일까요?

import React, { useState, useEffect } from 'react';

function Counter() {
// 초기값이 0인 카운트 안내
const [count, setCount] = useState(0);

// 랜더링이 끝나면 매번 호출됨
useEffect(() => {
    console.log('Counter value is now ' + count);
}, [count]);

return (
    <div>
        <p>{count}</p>
        <button onClick={() => setCount(count + 1)}>
            Increment
        </button>
    </div>
);

}

export default Counter;

useEffect의 두번째 인수에 대한 설명은 맞는데.... 첫번째 렌더링시 2번 기록을 하는 이유가 궁금합니다.

아래는 첫번째 렌더링 결과입니다.