강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

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

Hoàn thành dự án tích hợp API server được xây dựng bằng Spring Boot (Spring Boot ver3.4.x) và React 19 (with TypeScript)! Áp dụng frontend vào portfolio backend! Khóa học được viết dành cho những người đang làm việc thực tế (không phải khóa học dành cho người mới bắt đầu.)

(4.7) 116 đánh giá

1,454 học viên

Độ khó Trung cấp trở lên

Thời gian Không giới hạn

  • zk202308a5410
React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
JPA
JPA
JWT
JWT
React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
JPA
JPA
JWT
JWT

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

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

4.7

5.0

minho.ha

31% đã tham gia

Sẽ rất hữu ích khi giải thích dự án thực tế trong khi viết mã theo thứ tự. Chỉ là kỹ năng của tôi không thể theo kịp nó. Hahahahaha

5.0

원데이

30% đã tham gia

Tôi nghĩ loại bài giảng này thực sự hữu ích trong thực tế. Tôi cũng thích những lời khuyên và thông tin đến từ trải nghiệm của người hướng dẫn. Độ sâu của từng kỹ thuật trong bài giảng có vẻ hơi nông do tính chất của bài giảng nhưng lại rất dễ hiểu khi tra cứu hoặc tham khảo sách. Tuy nhiên, nó có thể hơi khó khăn đối với các nhà phát triển ở độ tuổi đó.

5.0

b0i4s

18% đã tham gia

Ngày nay, trong thời đại không thể chỉ làm một mặt trước và một mặt sau, tôi luôn mơ hồ nghĩ đến việc chỉ làm riêng mặt trước, kiếm tiền triệu riêng và tạo ra một dự án tích hợp thông thường. Tôi không phải là người. chỉ biết một mặt, nhưng tôi có một mặt chính và một mặt tổng hợp của cả hai mặt. Tôi nghĩ đây là một bài giảng thực sự hay cho những ai tò mò. Tôi chưa mua sách nhưng có vẻ như các bài giảng là đủ. Tuy nhiên, tôi nghĩ rằng nếu bạn đọc nó cùng với một cuốn sách, bạn có thể giảm bớt thời gian tìm kiếm lại. Đối với thông tin của bạn, cả React và Spring đều yêu cầu một số kiến ​​thức sơ bộ, nhưng tôi nghĩ đây sẽ là một bài giảng hay cho những ai thậm chí hơi quan tâm đến full stack, vì đây là những thứ có thể học được chỉ trong một tuần. Cảm ơn bạn vì bài giảng tuyệt vời.

Bạn sẽ nhận được điều này sau khi học.

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

  • Phát triển API server

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

  • Redux Toolkit

  • React Query

  • Zustand

'Ngọc trai dù có ba đấu nhưng phải xâu thành chuỗi mới thành báu vật' - Biết và làm được là hai chuyện khác nhau!


Khi doanh nghiệp đào tạo nhân viên / Nội dung giảng dạy tập trung cho nhân viên mới lên Inflearn!


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


Bạn 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ỉ đơn thuần về cú pháp hay khái niệm, do đó sẽ không đề cập đến cú pháp cơ bản của React. Ngoài ra, bạn nhất định phải có kinh nghiệm với JavaScript và TypeScript.

    • Phần Java được thực hiện bằng Spring Boot 3.4.x và không đề cập đến 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 'Guheonggage Coding Danhttps://cafe.naver.com/gugucoding'.


02/01/2026

Phần cài đặt đăng nhập Kakao có một số thay đổi về giao diện.


https://docs.google.com/presentation/d/1ndFy0UfqcIHMbSF2Kyjtw3o8Gimx7I9GVeEaE-7lfs8/edit?usp=sharing


Vui lòng tham khảo tài liệu.


2025/12/05

Phần quan trọng nhất trong Spring Boot - Phần 3 Tạo máy chủ API Todo đã được sửa đổi thành bài giảng cập nhật lên Spring Boot 4.0.0.


2025/11/26

Trong trường hợp phát triển Spring Boot 4.0.0 bằng VSCode, có thể xảy ra vấn đề mã kiểm thử của Junit5 không hoạt động bình thường (không có vấn đề gì với Intellij).


Nếu bạn gặp vấn đề khi sử dụng VSCode, vui lòng tham khảo https://blog.naver.com/cookie_00/224088514199.



2025/06/24

Khi phiên bản vite nâng lên 7.0.0, tailwindcss vẫn chưa hỗ trợ đầy đủ nên có thể xảy ra lỗi.

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, thực hiện npm install và

npm install tailwindcss @tailwindcss/vite

thì sẽ được thêm vào bình thường.





2025/05/03

Khóa học video được cập nhật với Vite và TypeScript.

Khóa học được xây dựng tương tự tối đa với cấu trúc khóa học ban đầu, nhưng có thể có một chút khác biệt về tiến độ.

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






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

là mã đã được thay đổi.


Nội dung cần lưu ý khi tạo vite là

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

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



Bổ sung ngày 28/03/2024

Tài liệu sử dụng AWS Beanstalk, RDS, S3 đã được thêm vào file đính kèm của bài giảng cuối cùng.




Sử dụng Spring Boot để tạo API server và ứng 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.

  • 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 mạng xã hội

  • Triển khai giỏ hàng

  • Thực hành React Query, Recoil


Ví dụ To-Do


  • Trong trường hợp dự án React, sử dụng React-Router để xử lý việc di chuyển đến các màn hình khác nhau tùy theo thanh địa chỉ.

  • Có thể thiết lập layout chung và sử dụng để cấu trúc giao diện phù hợp với từng module.

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

  • Học cách thiết kế và sử dụng custom hook để giảm thiểu code trùng lặp.

Ví dụ sản phẩm

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

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



  • Triển khai xử lý đăng nhập và 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 trên trình duyệt để lưu trữ thông tin đăng nhập.


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

  • Trong chương cuối cùng, 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 khóa học đượ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?

  • Những người muốn tạo API server

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

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

  • JavaScript

  • Lò xo

  • Lập trình web

Xin chào
Đây là

2,210

Học viên

161

Đánh giá

287

Trả lời

4.8

Xếp hạng

5

Các khóa học

Goo-mung-ga-ge Coding Team là một cộng đồng được thành lập từ năm 2015 dành cho những người làm việc trong các lĩnh vực liên quan đến phát triển phần mềm.

Khóa học hiện đang được dẫn dắt bởi Cookie Manager, người đang điều hành Gumung-gage Coding.

Tôi bắt đầu công việc phát triển từ năm 2000 và đã có kinh nghiệm làm việc tại các doanh nghiệp mạo hiểm, doanh nghiệp vừa và nhỏ, tập đoàn lớn cũng như làm freelancer.

Từ những năm 2010, tôi chủ yếu thực hiện các công việc giảng dạy và tư vấn cho các doanh nghiệp.

Naver Cafe

Các tác phẩm chính

Dự án Spring Web học qua mã nguồn

Học Spring Boot qua mã nguồn

Học React qua mã nguồn

Triển khai máy chủ RESTful API

Dự án Spring 6 Legacy

Sổ tay phát triển Web Java

React Native in Action (Bản dịch)

Phát triển/Giảng dạy

Làm việc tại đội ngũ phát triển Samsung SDS

Làm việc tại Công ty Cổ phần SK Customer Happiness

Giảng dạy tại các doanh nghiệp như KT / SK / POSDATA / Kyobo Life / Shinsegae / Asiana / Công đoàn Quản lý Bảo hiểm Y tế, v.v.

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

Tất cả

98 bài giảng ∙ (21giờ 54phú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ả

116 đánh giá

4.7

116 đánh giá

  • greatha님의 프로필 이미지
    greatha

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    Sẽ rất hữu ích khi giải thích dự án thực tế trong khi viết mã theo thứ tự. Chỉ là kỹ năng của tôi không thể theo kịp nó. Hahahahaha

    • withoutthem님의 프로필 이미지
      withoutthem

      Đánh giá 13

      Đánh giá trung bình 4.8

      4

      16% đã tham gia

      Thật dễ dàng để lắng nghe nếu bạn có một số kiến ​​thức. Tuy nhiên, đây là phương pháp kiểm tra trực quan bằng cách lấy nhật ký từ mã kiểm tra đơn vị, Có rất nhiều mã (?) phản ánh phong cách cá nhân, chẳng hạn như gọi repo.save trong phương thức sửa đổi. Người mới bắt đầu có thể gặp khó khăn khi pha trộn nó theo phong cách riêng của họ. Có những người dệt nó theo cách này Nếu bạn có đủ kiến ​​​​thức để sàng lọc và tiếp thu những thứ như, “Ồ, điều đó có vẻ ổn.” Một bài giảng khá hay đáng để xem xét

      • zk202308a5410
        Giảng viên

        Nếu nó được tạo bình thường thì không cần phải save() khi sửa đổi (kiểm tra bẩn). Để được kiểm tra bẩn, đối tượng thực thể phải được đảm bảo liên tục. Tuy nhiên, đôi khi khi làm việc với các nhà phát triển khác, bạn có thể thấy đoạn mã như sau. @Transactional // thực thể người dùng độc lập với bối cảnh bền vững được liên kết với ranh giới giao dịch đó public void saveRefreshToken(Người dùng người dùng, Chuỗi newRefreshToken) { ... user.setRefreshToken(newRefreshToken); ... } Trong trường hợp này, đối tượng Người dùng không bị kiểm tra bẩn. Tôi nghĩ rằng việc sử dụng save() để chuẩn bị cho những tình huống này không phải là một kiểu phản đối. ----------------- Trò chuyệnGPT Trong Spring Data JPA, có hai cách tiếp cận chính để thay đổi trạng thái của một thực thể: phát hiện các thay đổi (kiểm tra bẩn) và sử dụng phương thức save(). Mỗi phương pháp có thể được sử dụng phù hợp tùy theo tình huống cụ thể. Tôi sẽ giải thích những ưu, nhược điểm cũng như trường hợp sử dụng của từng phương pháp bên dưới. ----------------------. Phần kết luận Việc sử dụng phương pháp nào tùy thuộc vào tình huống. Phát hiện thay đổi phù hợp với các giao dịch nhỏ, đơn giản, trong khi lưu rõ ràng (save()) phù hợp với các giao dịch lớn với logic kinh doanh rõ ràng và phức tạp. Nói chung, trong thực tế, hai phương pháp này được sử dụng thay thế cho nhau. Sử dụng tính năng phát hiện thay đổi cho các thao tác CRUD đơn giản và sử dụng phương thức save() để quản lý mọi thứ một cách rõ ràng khi cần có logic nghiệp vụ phức tạp.

      • Ồ, cũng có trường hợp như vậy. Tôi đang học lại. Cảm ơn bạn.

    • windguy19995381님의 프로필 이미지
      windguy19995381

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      30% đã tham gia

      Tôi nghĩ loại bài giảng này thực sự hữu ích trong thực tế. Tôi cũng thích những lời khuyên và thông tin đến từ trải nghiệm của người hướng dẫn. Độ sâu của từng kỹ thuật trong bài giảng có vẻ hơi nông do tính chất của bài giảng nhưng lại rất dễ hiểu khi tra cứu hoặc tham khảo sách. Tuy nhiên, nó có thể hơi khó khăn đối với các nhà phát triển ở độ tuổi đó.

      • zk202308a5410
        Giảng viên

        Cảm ơn bạn đã hiểu mục đích sản xuất của chúng tôi. Như bạn đã nói, có một số hạn chế trong việc giải thích những phần cơ bản. Tuy nhiên, khi nghĩ đến việc thực hiện một dự án trong thực tế, tôi đã giảm đáng kể số lượng này. Nếu bạn đăng bất kỳ câu hỏi nào qua quán cà phê hoặc Infron trong các nghiên cứu còn lại, tôi sẽ giúp đỡ bạn nhiều nhất có thể.

    • insoobaek님의 프로필 이미지
      insoobaek

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      18% đã tham gia

      Ngày nay, trong thời đại không thể chỉ làm một mặt trước và một mặt sau, tôi luôn mơ hồ nghĩ đến việc chỉ làm riêng mặt trước, kiếm tiền triệu riêng và tạo ra một dự án tích hợp thông thường. Tôi không phải là người. chỉ biết một mặt, nhưng tôi có một mặt chính và một mặt tổng hợp của cả hai mặt. Tôi nghĩ đây là một bài giảng thực sự hay cho những ai tò mò. Tôi chưa mua sách nhưng có vẻ như các bài giảng là đủ. Tuy nhiên, tôi nghĩ rằng nếu bạn đọc nó cùng với một cuốn sách, bạn có thể giảm bớt thời gian tìm kiếm lại. Đối với thông tin của bạn, cả React và Spring đều yêu cầu một số kiến ​​thức sơ bộ, nhưng tôi nghĩ đây sẽ là một bài giảng hay cho những ai thậm chí hơi quan tâm đến full stack, vì đây là những thứ có thể học được chỉ trong một tuần. Cảm ơn bạn vì bài giảng tuyệt vời.

      • zk202308a5410
        Giảng viên

        Cảm ơn bạn đã hoàn toàn hiểu ý định sản xuất của chúng tôi. Tôi hy vọng những bài giảng còn lại sẽ hữu ích. Cảm ơn

    • feelsagood님의 프로필 이미지
      feelsagood

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      1.585.868 ₫

      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!