강의

멘토링

커뮤니티

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.8) 100 đánh giá

1,372 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à

2,063

Học viên

135

Đánh giá

267

Trả lời

4.8

Xếp hạng

5

Các khóa học

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

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

 

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

 

주요 저서 

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의

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ả

100 đánh giá

4.8

100 đá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

    • gryunlim5021님의 프로필 이미지
      gryunlim5021

      Đánh giá 10

      Đánh giá trung bình 5.0

      5

      31% đã tham gia

      Tôi không biết ở quán cà phê có phiếu giảm giá nên tôi mới mua nó... nhưng đó là một bài giảng quý giá bao gồm springboot+react. Cảm ơn bạn vì bài giảng tuyệt vời.

      1.610.922 ₫

      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!