강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Tiếp theo + Tạo dịch vụ SNS bằng React Query

Chúng ta sẽ tạo ra một dịch vụ mạng xã hội tương tự như Twitter (X.com) bằng cách sử dụng React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand stack. Cuối cùng là SSR để tối ưu hóa công cụ tìm kiếm!

(4.5) 121 đánh giá

3,352 học viên

  • zerocho
실습 중심
next.js
react
트위터
클론코딩
ssr
Next.js
React
react-query
next-auth
msw

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

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

  • Phát triển React

  • React + TypeScript

  • React Query

  • Next.js App Router

  • SSR & SEO

  • MSW

  • Next Auth

  • trực tiếp web socket chat

  • tình trạng

  • Phát hành AWS

Không phải x.com của Elon Musk
Hãy tạo z.com trong 0 giây !

Phiên bản mới nhất của khóa học Tiếp theo , đã được tổng cộng 4.400 người tham gia!

Khóa học thứ 14 tiếp theo đã được cập nhật thành khóa học thứ 15 tiếp theo!

  • Twitter đổi tên thành X.com nên tôi cũng đổi từ Nordbird thành Jet.com.

  • Bạn không cần phải biết Tiếp theo. Tôi sẽ kể cho bạn mọi thứ trong bài giảng này. Bạn phải biết React.

  • Bộ định tuyến ứng dụng Next.js được sử dụng theo mặc định. ( Khóa học Nordbird trước đây là Next Page Router)

  • Vì chúng tôi đã tải lên phiên bản này nên chúng tôi cũng đã cập nhật tất cả các phiên bản thư viện lên React Query 5, Next Auth 5 và MSW 2.

  • 14 tính năng tiếp theo như Server Action được đưa vào một cách tự nhiên.

  • Triển khai tính năng cuộn vô hạn, bộ nhớ đệm dữ liệu, cập nhật tối ưu, khôi phục, v.v. với React Query.

  • Trò chuyện trong thời gian thực được triển khai bằng cách sử dụng websockets + truy vấn phản ứng.

  • Hãy thay thế API bối cảnh bằng Zustand.

  • Bài giảng thực hiện theo quy trình tương tự như thực tế (khi người lập kế hoạch lập kế hoạch xong -> khi back-end dev chưa tạo API -> khi back-end dev đã hoàn thiện API)

Bạn có thể tạo ra kết quả như thế này 🙋‍♀

Làm cách nào để thay đổi địa chỉ trong khi bật lên phương thức??

Hãy sử dụng các tính năng mới nhất của bộ định tuyến như các tuyến song song và các tuyến chặn.

Hãy thử nó với chất lượng cao!

Các chức năng và tuyến đường chính của x.com gần như giống hệt nhau!

Hãy chú ý đến chiều cao cuộn!!

Tìm hiểu cách thực hiện cuộn vô hạn để truy xuất dữ liệu vô hạn.

Hãy nhìn tốc độ phản ứng của trái tim!!!

Cập nhật lạc quan cho phép phản hồi ngay lập tức trong khi truyền dữ liệu đến máy chủ!

  • Bạn sẽ có thể xem xét kế hoạch và xác định cấu trúc thư mục.

  • Việc phát triển API có thể được thực hiện mà không cần nhà phát triển phụ trợ.

  • Dữ liệu có thể được quản lý hiệu quả dựa trên API.

  • Bạn có thể chuẩn bị tự mình triển khai một máy chủ phía trước.

  • Trò chuyện thời gian thực có thể được thực hiện.

Bạn học được gì 📚

Bạn có tò mò về vai trò của những thư mục đó không?

Tận dụng tối đa lợi thế của Bộ định tuyến ứng dụng tiếp theo

Rất nhiều thư mục khác nhau và thú vị đã được thêm vào thư mục Next App Router() @folder, thư mục (..), thư mục (..), thư mục (...), thư mục [], _folder...

Việc định tuyến có thể được thực hiện dễ dàng nếu bạn có cấu trúc thư mục tốt. Chúng ta hãy cùng nhau học hỏi.

Tạo máy chủ API giả bằng MSW

Nhà phát triển phụ trợ của bạn chưa tạo API? Thế là lịch trình cứ bị lùi lại à? Tuy nhiên, bạn không nên chỉ mút ngón tay! Trước tiên hãy phát triển giao diện người dùng bằng cách tạo máy chủ API giả bằng MSW. Với những chú mèo dễ thương!

Chú mèo dễ thương 😺 Đang phát triển với dữ liệu giả!

Chúng tôi đã chuẩn bị không chỉ API mà còn cả tài liệu!

Triển khai một dịch vụ với phần phụ trợ đã được chuẩn bị sẵn

Sau khi làm việc chăm chỉ trên MSW, tôi nghe nói rằng nhà phát triển phụ trợ đã hoàn thành API! Bây giờ hãy phát triển giao diện người dùng bằng API thực tế.

Tôi đã chuẩn bị mọi thứ cho phần phụ trợ. Chỉ cần gọi tại quầy lễ tân và sử dụng nó! Hãy nhập dữ liệu từ phần phụ trợ vào React Query và thực hiện lưu vào bộ đệm, cũng như cuộn vô hạn và cập nhật tối ưu.

Chuẩn bị triển khai thông qua SSR

Tôi đã phân phối trước trên z.nodebird.com . Hãy quan tâm đến SEO của bạn thông qua SSR và đảm bảo trang chủ của bạn hiển thị tốt khi được chia sẻ trên mạng xã hội.

Nó cũng được chia sẻ rất tốt trên KakaoTalk.

Trò chuyện trực tiếp với Elon Musk!!

Phần thưởng: Kể cả trò chuyện trực tiếp

Tìm hiểu các ổ cắm web và đảo ngược thao tác cuộn vô hạn trong khi triển khai trò chuyện theo thời gian thực.

Sau khi tìm hiểu công nghệ WebSocket, bạn có thể sử dụng nó không chỉ trong trò chuyện mà còn ở nhiều nơi khác (chẳng hạn như làm mới theo thời gian thực...thông báo...).

Những lưu ý trước khi tham gia khóa học 📢

Môi trường phòng thí nghiệm

  • Hệ điều hành và phiên bản (OS): Windows 11

  • Công cụ được sử dụng: Node.js 22, Next 15


Kiến thức và biện pháp phòng ngừa của người chơi

  • Cần có kiến ​​thức cơ bản về HTML/CSS/JS/React.

  • TypeScript cần thiết cho bài giảng sẽ được cung cấp trong bài giảng.


  • Câu hỏi sẽ được trả lời trong vòng 24 giờ .

  • Bạn có thể sắp xếp nội dung bài giảng trên blog của mình nhưng phải ghi nguồn.

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

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

  • 웹 서비스를 완성하기 위해 React Framework sử dụng

  • Các nhà phát triển && người mong muốn trở thành nhà phát triển && người đang tìm việc làm trong lĩnh vực Front-end

  • Next App Router là ứng dụng mà bạn muốn sử dụng tích cực

  • React Query để quản lý dữ liệu máy chủ

  • SSR, SEO đều muốn chăm sóc

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

  • Kiến thức về HTML, CSS

  • JavaScript kiến thức cho đến ES2022

  • Kiến thức cơ bản về React (Xem khóa học React miễn phí của Zerocho)

  • TypeScript (sẽ được giới thiệu trong bài giảng)

Xin chào
Đây là

66,502

Học viên

1,682

Đánh giá

9,755

Trả lời

4.8

Xếp hạng

22

Các khóa học

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 현) 스모어톡 CTO 
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

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

Tất cả

81 bài giảng ∙ (14giờ 28phú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ả

121 đánh giá

4.5

121 đánh giá

  • 누구야님의 프로필 이미지
    누구야

    Đánh giá 1

    Đánh giá trung bình 3.0

    3

    69% đã tham gia

    새로운 기술을 도입하여 클론 코딩을 진행하는 콘텐츠는 좋다고 봅니다. 하지만 시간이 조금 흘러서인지 패키지 버전이 안 맞거나 사용법이 변화된 것들로 인하여 에러가 많이 발생하여 강의 시청 시간 보다 공식문서를 찾아서 직접 수정하는 시간이 압도적으로 늘어나는 상황이 발생되었습니다.(강의1, 공식문서 9 = 강의를 보는 건지 공홈에 들어가라고 알람을 듣는 건지 헷갈립니다) 강의라기 보다는 X 클론 코딩 시연을 보는 것만 같습니다. 해당 패키지는 어떻게 사용되는지 어떤 장점이 있는지, nextjs 프레임워크의 라이프사이클이, 장점, 단점, 추천 파일 구조 설계를 주로 설명해주셨으면 더 좋았을거 같다라는 아쉬움이 있으며, 코딩 짜는 것을 주로 보여주면서 오히려 설명이 빈약하다는 느낌을 많이 받아서 현타가 가끔씩 왔습니다. 클론 코딩으로 올바른 방법론과 구조 설계, 최적화 등을 더 집중해서 보여주셨으면 좋았겠지만 그렇지 않고 오히려 공식문서를 보고 알아서 더 공부하라고 하니 진짜 많이 공식문서를 보게 되면서 강의에 안나오는 지식도 얻게 되고 좋은거 같기도 한데 이 것을 목적으로 강의를 퍼블리싱 하신거면 성공하신거라고 보입니다만 좀 더 이해를 쉽게 받기 위해서 강의를 수강한 목적이 사라진듯하여 아쉬움이 많이 남는 강의 입니다. 다음 강의에서는 준비된 코드와 통일된 네이밍 컨벤션, 실무에서 사용하는 다양한 파일 구조로 적재적소의 예제 위주의 강의가 마련되었으면 좋겠습니다. 그럼 저는 깃허브에 있는 소스코드를 활용하여 강의에 안나오는 에러를 해결하기 위하여 공식문서에서 다시 차근차근 공부하여 해결하기 위하여 가보겠습니다. 언제나 좋은 강의를 만들기 위하여 노력하시는 제로초님께 미약하나마 도움이 되는 피드백이었길 바랍니다.

    • 제로초(조현영)
      Giảng viên

      좋은 피드백 감사합니다. 다음부터는 실무 중심의 구조 설계와 패키지의 장단점 위주로 진행해보도록 하겠습니다!

  • working.zima님의 프로필 이미지
    working.zima

    Đánh giá 14

    Đánh giá trung bình 4.4

    3

    54% đã tham gia

    분명 도움이 되는 내용은 많이 있는데, 학습하는데 힘든 느낌이 있습니다. 학생보다는 선생의 편의에 집중되어 보여 아쉽습니다.

    • 부끄님의 프로필 이미지
      부끄

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      60% đã tham gia

      const 명언 = 한번 당했던 에러한테는 안 당하지~

      • Grit Grit님의 프로필 이미지
        Grit Grit

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        68% đã tham gia

        믿고 보는 제로초님 강의네요! Next를 공부하려고 공식문서도 보고했지만 잘 안읽혀서 전 강의를 쭉 본다음에 공식문서 보는게 더 이해가 빠른거같아요. 보통 전 강의를 쭉 본다음에 핵심적인 기능들을 공부한 뒤 공식문서에서 어떤 기능들이 있다 키워드정도만 기억합니다 작업을 하다 어떤 기능이 필요하면 공식문서에서 찾아서 적용하는편입니다 편당 강의시간도 길지않고 잘 나눠놓으셔서 지하철이나 짬 날때 보기도 좋고 이해안되는 부분에서는 돌려보는것도 너무 편하더라구요 React-query도 찍먹개념으로 쓰던기능만 쓰고있었는데 이번에 설명들으면서 더 잘쓰게 된거같아요!! Zustand도 이번기회에 처음써보고 msw나 다양한 라이브러리도 덤으로 알아갑니당 현업에서 알아두면 좋은 배포나 웹소켓 등 부록내용들도 꾸준히 좋은 퀄리티로 올려주셔서 너무 감사드리고 앞으로도 화이팅하면서 활동해주세요! ㅎㅎ

        • 미니버드님의 프로필 이미지
          미니버드

          Đánh giá 2

          Đánh giá trung bình 5.0

          5

          53% đã tham gia

          이 강의 덕분에 Next.js가 제가 가장 좋아하는 최고의 기술이 되었습니다!!! 지금까지 다양한 플랫폼에서 강의를 들어왔고, 이번에 처음으로 인프런에서 강의를 수강했는데 이 Next 강의를 수강한 뒤, 너무 만족스러워서 이후 다른 인프런 강의도 수강하게 되었습니다! 이 강의는 단순히 클론코딩을 하는 것이 아니라 친절하게 잘 알려주시니 저의 실력도 많이 상승하는 것 같습니다! 저에게 최고의 Next 기술을 알려주셔서 감사하고, 앞으로 웹 개발에 있어서 많은 도움 받도록 하겠습니다!

          1.460.430 ₫

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

          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!