강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Full-stack

Học React 19 qua code với API server Spring Boot

Máy chủ API được xây dựng bằng Spring Boot (ver3.4.x) và React 19 (kèm TypeScript) Hoàn thiện dự án tích hợp! Chuyển toàn bộ khóa bootcamp tạo portfolio thành bài giảng.

(4.7) 94 đánh giá

1,336 học viên

  • zk202308a5410
웹개발
저자 직강
실습 중심
React
TypeScript
Spring Boot
JPA
JWT

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Quy trình phát triển React

  • Phát triển máy chủ API

  • Xử lý xác thực JWT

  • Redux Toolkit

  • React Query (React Query)

  • Tình trạng

'Ngọc trai dù có ba thúng mà không xâu thành chuỗi thì cũng chẳng thành báu vật' - Biết và làm được là hai chuyện khác nhau!


Tôi thấy nhiều nhân viên mới biết React và cũng biết Bootstrap nhưng khi giao việc thực tế thì không có kết quả gì. Nguyên nhân khiến việc học tập vất vả nhưng không thể áp dụng được có lẽ là do thiếu hiểu biết về quy trình làm việc.


Có thể tạo ra mã code chi tiết mong muốn bằng cách sử dụng Chat GPT, nhưng vấn đề là không thể giải thích được mã code mà mình muốn là gì.


Việc tiến hành dự án cần có quy trình hoặc thủ tục mà nhiều người có thể đồng ý. Và cũng cần rất nhiều luyện tập cho điều này.


  • Lưu ý trước khi học

    • Khóa học này tập trung vào quy trình và quá trình thay vì chỉ là ngữ pháp hoặc khái niệm đơn thuần, do đó sẽ không đề cập đến cú pháp cơ bản của React. Ngoài ra, bạn bắt buộc phải có kinh nghiệm với JavaScript và TypeScript.

    • Phần Java sẽ được tiến hành sử dụng Spring Boot 3.4.x và sẽ không đề cập đến các kiến thức cơ bản.


Các tài liệu bổ sung và câu hỏi cần thiết trong quá trình học tập đang được phân phối thông qua cafe '구멍가게 코딩단https://cafe.naver.com/gugucoding'.


2025/06/24

Khi phiên bản vite nâng cấp lên 7.0.0, đã xảy ra tình huống tailwindcss chưa hỗ trợ bình thường.

Nếu bạn đã tạo dự án thông qua npm create vite@latest

Mở file package.json và sửa phiên bản vite ở cuối thành 6.

"devDependencies": {
    ...
    "vite": "^6.0.0"
  }

Sau khi sửa đổi, thực hiện npm install và

npm install tailwindcss @tailwindcss/vite

sẽ được thêm vào một cách bình thường khi thực thi.





2025/05/03

Sẽ được cập nhật với khóa học video được tạo bằng Vite và TypeScript.

Khóa học được tạo ra tương tự tối đa với cấu trúc của các bài giảng hiện có, nhưng có thể xảy ra một chút khác biệt về tiến độ.

Mã nguồn cũng sẽ được sửa đổi toàn bộ để phù hợp với React phiên bản 19 và triển khai.






2025/02/24 thêm

Toàn bộ mã nguồn được viết bằng vite và TypeScript đã được thêm vào cuối khóa học như tài liệu học tập.


Các phiên bản thay đổi chính

React-Router phiên bản 7

React Query phiên bản 5

Spring Boot phiên bản 3.4.2

và các thay đổi khác trong mã.


Những điều cần lưu ý khi tạo vite là

https://drive.google.com/drive/folders/1t0NdcBPCN57boutJcjdKODk5DccJUixV?usp=drive_link

đã được thêm vào.



2024/03/28 đã thêm

Tôi đã thêm tài liệu sử dụng AWS Beanstalk, RDS, S3 làm tệp đính kèm của bài giảng cuối cùng.




Tạo API server bằng Spring Boot và sử dụng nó trong dự án React.

Trong quá trình này, chúng ta sẽ đề cập đến các ví dụ sau đây.

  • Ví dụ Todo - React-Router, Axios, xử lý phân trang, cấu hình Querydsl

  • Ví dụ sản phẩm - Axios

  • Xử lý đăng nhập - Redux Toolkit, JWT

  • Xử lý đăng nhập xã hội

  • Triển khai giỏ hàng

  • React Query, Recoil thực hành


Ví dụ To-Do


  • Đối với dự án React, chúng ta sử dụng React-Router để xử lý việc chuyển đổi giữa các màn hình khác nhau dựa trên thanh địa chỉ.

  • Thiết lập layout chung và,và nhiều thứ khác để có thể cấu thành giao diện phù hợp với từng module.

  • Cấu hình routing có thể được tổ chức thành các file riêng biệt để dễ dàng bảo trì.

  • Để giảm thiểu mã trùng lặp, chúng ta sẽ học cách thiết kế và sử dụng custom hook.

Ví dụ sản phẩm

  • Bạn có thể tự hoàn thành việc xử lý modal cho quá trình tải file lên, quá trình upload và kết quả xử lý.

Xử lý đăng nhập/đăng nhập mạng xã hội, triển khai giỏ hàng



  • Chúng ta sẽ triển khai xử lý đăng nhập và xử lý xác thực thông qua đăng nhập mạng xã hội.

  • Sử dụng RTK (Redux Toolkit) để quản lý trạng thái đăng nhập và sử dụng cookie trong trình duyệt để ghi nhớ thông tin đăng nhập.


  • Sử dụng JWT để tạo Access Token và Refresh Token và tìm hiểu cách áp dụng chúng vào dự án.

  • Trong chương cuối, chúng ta sẽ chuyển đổi các ví dụ được viết bằng React Query và Zustand.



Mã nguồn được sử dụng trong bài giảng được đính kèm ở bài giảng cuối cùng của mỗi phần.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Ai muốn tạo API server

  • Những người đang băn khoăn cách áp dụng cú pháp React

Cần biết trước khi bắt đầu?

  • JavaScript (JavaScript)

  • Spring

  • Lập trình web

Xin chào
Đây là

1,835

Học viên

117

Đánh giá

258

Trả lời

4.8

Xếp hạng

4

Các khóa học

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 담당자가 진행하고 있습니다.

2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.

ㄴ네이버 카페

 

Chương trình giảng dạy

Tất cả

98 bài giảng ∙ (21giờ 56phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

94 đánh giá

4.7

94 đánh giá

  • greatha님의 프로필 이미지
    greatha

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    It would be really helpful if you explained the actual project in order while coding it. My skills just can't keep up with it. Hahahahahaha

    • withoutthem님의 프로필 이미지
      withoutthem

      Đánh giá 13

      Đánh giá trung bình 4.8

      4

      16% đã tham gia

      If you have some knowledge, it's comfortable to listen to. However, there are many codes(?) that reflect personal styles, such as visually checking by printing logs in the unit test code, or calling repo.save in the modify method, so it seems difficult for beginners to properly integrate it to their own style. If you have enough knowledge to filter out and absorb things like "There are people who write this way, Oh, that looks good," it's a pretty good lecture for review.

      • zk202308a5410
        Giảng viên

        If it is a normal creation situation, there is no need to save( ) when modifying (dirty checking) For dirty checking, the entity object must be guaranteed to be persistent. However, sometimes when working with other developers, I see code like the following. @Transactional // User entity unrelated to the persistence context connected to the transaction boundary public void saveRefreshToken(User user, String newRefreshToken) { ... user.setRefreshToken(newRefreshToken); ... } In this case, the User object is not subject to dirty checking. I thought that using save( ) to prepare for these situations is not an anti-pattern. -------------------------- ChatGPT Spring Data JPA provides two main approaches to changing the state of an entity: change detection (dirty checking) and using the save() method. Each method can be used appropriately depending on the specific situation. Below, I will explain the pros and cons of each method and their use cases. --------------------. Conclusion Which method to use depends on the situation. Change detection is suitable for simple and small transactions, and explicit save method (save()) is suitable for large transactions with clear and complex business logic. In practice, the two methods are usually used interchangeably. Change detection is used for simple CRUD operations, and when complex business logic is required, the save() method is used to explicitly manage it.

      • Oh, there are situations like that too. I'm learning again. Thank you.

    • windguy19995381님의 프로필 이미지
      windguy19995381

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      30% đã tham gia

      I think this kind of lecture is really helpful for practical work. The tips and information from the instructor's experience were also good. The depth of each technology in the lecture seems a bit shallow due to the nature of the lecture, but it is easy to understand if you search or refer to a book. However, I think it might be a bit difficult for developers in those years.

      • zk202308a5410
        Giảng viên

        Thank you for understanding the intention of the production. As you said, there were some limitations in explaining the basic parts. However, I boldly reduced it to this extent, thinking of it as a project in practice.. If you post questions through Cafe or Infraon during the remaining period of study, I will help you as much as I know.

    • insoobaek님의 프로필 이미지
      insoobaek

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      18% đã tham gia

      In these times when it's not enough to just do front and back, I've always wanted to vaguely create front and back separately and create a normal integrated project once. I think this is a really good lecture for those who are curious about the integration of both sides with one main, not those who only know one side. I didn't buy the book, but I think the lecture is sufficient. However, I think it would be possible to reduce the time spent looking it up again if you study it with the book. For your reference, both React and Spring require some prior knowledge, but since these are contents that can be learned in just a week, I think this will be a good lecture for those who are even a little interested in full stack. Thank you for the great lecture.

      • zk202308a5410
        Giảng viên

        Thank you for fully understanding the intention of the production. I hope the remaining lectures will be helpful to you. Thank you.

    • gryunlim5021님의 프로필 이미지
      gryunlim5021

      Đánh giá 10

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      I didn't know there was a discount coupon at the cafe ㅠㅠ I just bought it, but... It's a valuable lecture that includes springboot+react. Thank you for the great lecture.

      1.614.287 ₫

      Khóa học khác của zk202308a5410

      Hãy khám phá các khóa học khác của giảng viên!

      Khóa học tương tự

      Khám phá các khóa học khác trong cùng lĩnh vực!