강의

멘토링

로드맵

Inflearn brand logo image
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) 111 đánh giá

3,311 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

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

  • 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à

65,525

Học viên

1,602

Đánh giá

9,702

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ả

111 đánh giá

4.5

111 đánh giá

  • justfix0109464님의 프로필 이미지
    justfix0109464

    Đánh giá 14

    Đánh giá trung bình 5.0

    5

    34% đã tham gia

    まだ初半を受講しているのに満足しています。 ただし、講義中 "ヨガ、ヨゲ、イ、コレ、コレ"と言われる部分が多いので、混乱することを除いては良いです。 ("要ないのでここに"同じことを言われるときはマウスカーソルを開けて見なければなりません) モーダルであればモーダル、ボタンであればボタンと正確に指して教えていただければと思います。これはライブだから"これがあります"、"表現が多すぎます。 個人的に従いながら受講するより視聴だけして流れを理解しようとする方へ方向を変えたら大丈夫です。

    • zerocho
      Giảng viên

      まず、フォローしている間にご迷惑をおかけしたことがありましたので申し訳ありません。しかし、この講義は盲目的に従う目的で作られた講座ではありません(クローンコーディングの長所と短所の映像で申し上げました)。もしそうなら、私は毎日このコードをすべて見せてくれるので、講義時間が30時間を超えたのでしょう。 この講義を聞くコツは、直接先にクローンコーディングをしてみて、この講座のコードは正解のように活用されることをお勧めします。あるいは、講義を先に目でしか見ず、学んだ内容を元に直接ついてみてみましょう。コードに従わずにx.comのようなサイトを自分で作成できるようにするのが講義の目的です。

    • ありがとうございます。 良い勉強方法を学びました。

  • noo9ya5923님의 프로필 이미지
    noo9ya5923

    Đánh giá 1

    Đánh giá trung bình 3.0

    3

    69% đã tham gia

    新技術を導入してクローンコーディングを進めるコンテンツは良いと思います。 しかし、時間が少し流れているのか、パッケージのバージョンが合わないか、使用法が変化したことによってエラーが多く発生し、講義視聴時間より公式文書を見つけて直接修正する時間が圧倒的に増える状況が発生しました(講義1、公式文書9 =講義を見るのか公共のホームに入るとアラームを聞くのか混乱します) 講義というよりは、Xクローンコーディングのデモンストレーションを見るだけです。 そのパッケージはどのように使用されるのか、どんなメリットがあるのか​​、nextjsフレームワークのライフサイクルが、メリット、デメリット、推奨ファイル構造設計を主に説明していただければもっと良かったと思います。 コーディング織りを主に見せながら、むしろ説明が貧弱だという感じをたくさん受けて、ヒョンタがたまに来ました。 クローンコーディングで正しい方法論と構造設計、最適化などをもっと集中して見せてほしいと思いましたが、そうではなく、むしろ公式文書を見て知ってもっと勉強するように言うので、本当にたくさんの公式文書を見るようになり、講義に出てくる知識も得られるようになり、良いと思いますが、ことを目的に講義をパブリッシングしたら成功したと思われますが、もっと理解を容易にするために講義を受講した目的がなくなったように、物足りなさがたくさん残る講義です。 次のレッスンでは、準備されたコードと統一されたネーミングコンベンション、実務で使用するさまざまなファイル構造で、積載適所の例を中心としたレッスンが用意されてほしいと思います。 それでは、私はFitHubのソースコードを活用して講義に出てくるエラーを解決するために公式文書で改めて勉強して解決することにします。 いつも良い講義を作るために努力しているゼロ初心者に微弱なのに役立つフィードバックだったことを願っています。

    • zerocho
      Giảng viên

      良いフィードバックありがとうございます。次からは実務中心の構造設計とパッケージの長所と短所を中心に進めてみましょう!

  • dongry님의 프로필 이미지
    dongry

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    60% đã tham gia

    const名言=一度当たったエラーにはならない〜

    • minsukweb0331님의 프로필 이미지
      minsukweb0331

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      68% đã tham gia

      信じてみるゼロチョン講義ですね! Nextを勉強しようと公式文書も報告しましたが、よく読まないので、前の講義をずっと見た後、公式文書を見る方が理解が早いと思います。通常、前の講義をずっと見た後に核心的な機能を勉強した後、公式文書にある機能がある。 片方の講義時間も長くなく、よく分かち合っていたので、地下鉄や組んだときに見やすく、わかりにくい部分では振り返るのもとても楽でした。 React-queryも披露概念で使っていた機能だけを使っていましたが、今回の説明を聞きながらもっとよく書くようになったと思います! Zustandも今回に初めて見て、mswや様々なライブラリもおまけに気付いています。 現業で知っておけば良い配布やウェブソケットなど付録内容も着実に良いクオリティで上げていただきありがとうございますし、今後もファイティングしながら活動してください! ㅎㅎ

      • zimablue14님의 프로필 이미지
        zimablue14

        Đánh giá 14

        Đánh giá trung bình 4.4

        3

        54% đã tham gia

        確かに役に立つ内容がたくさんあるのですが、学習するのが大変な感じがします。 生徒よりも教師の利便性に重点が置かれているように見えるので残念です。

        1.464.816 ₫

        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!