인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
Programming

/

Front-end

Next + React Query で SNS サービスを作成する

React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택을 사용하여 Twitter(X.com)와 유사한 SNS 서비스를 만들어보겠습니다. 마지막으로 검색 엔진 최적화를 위한 SSR까지!

Next.js
React
react-query
next-auth
msw

中級者のための講座です。

こんなことが学べます

  • React 開発

  • React + TypeScript

  • React Query

  • Next.js アプリ ルーター

  • SSR & SEO

  • MSW

  • Next Auth

  • リアルタイム Web ソケット チャット

  • 状態

  • AWS 配布

イロンマスクのx.com以外
ゼロ秒のz.comを作ろう!

累積4400人が聴いたの講座の最新バージョン!

Next 14コースはNext 15に更新されました!

  • Twitterが名前をX.comに変更し、私もノードバードからJet.comに変更しました。

  • ネクストモールシャーにもなります。この講義でお知らせします。リアクトは知っておく必要があります。

  • Next.js App Routerをデフォルトとして使用します。 (以前のノードバード講座はNext Page Routerでした)

  • この王様バージョンを上げたキムにReact Query 5、Next Auth 5、MSW 2でライブラリバージョンも全て最新化しました。

  • Server ActionのようなNext 14の機能は当然です。

  • React Queryでインフィニットスクロール、データキャッシュ、オプティミスティックアップデート、ロールバックなどを実装します。

  • Webソケット+ react-queryでリアルタイムチャットを実装します。

  • ZustandでContext APIを置き換えます。

  • 実務と同じプロセスで講義が流れます(企画者が企画を終えたとき - >バックエンド開発者がまだAPIを作成していないとき - >バックエンド開発者がAPIを完成したとき)

このような結果を作ることができます🙋‍♀

モーダル浮きながらアドレスを変えるのはどうしますか?

パララックルート、インターセプトルートなど最新のルータ機能を試してみましょう。

クオリティ高く追いましょう!

x.comの主な機能とルートをほぼそのままに!

スクロールの高さに注目!

データを無限にインポートするインフィニットスクロール方法を学びます。

ハートの反応速度を見てください!

サーバーにデータを転送しながら即時応答を実装するためのオプティミスティックアップデート!

  • 企画書を見てフォルダ構造をとることができるようになります。

  • バックエンド開発者がいなくてもAPI開発を進めることができます。

  • APIベースでデータを効率的に管理できるようになります。

  • 自分でフロントサーバーを展開する準備ができます。

  • リアルタイムチャットを実装できるようになります。

学習内容📚

そんなフォルダの役割が気になりますか?

Next App Routerを活用する

Next App Routerにはさまざまな不思議なフォルダがたくさん追加されました()フォルダ@フォルダ、(。)フォルダ、(..)フォルダ、(...)フォルダ、[]フォルダ、_フォルダ...

フォルダ構造だけを整理しても、ルーティングを簡単に行うことができます。一緒に学びましょう。

MSWで偽のAPIサーバーを作成する

バックエンド開発者はまだAPIを作成していませんか?それでどんどんスケジュールが後ろに押されると?それでも指だけを吸ってはいけません! MSWで偽のAPIサーバを作ってフロント先に開発しましょう。かわいい猫たちと一緒に!

かわいい猫😺ダミーデータと一緒に開発!

APIはもちろんドキュメントまで全て用意しておきました!

準備されたバックエンドでサービスを実装する

MSWで一生懸命開発し、バックエンド開発者がAPIを完成したというニュースが聞こえますね!それでは、実際のAPIを使ってフロントを開発しましょう。

バックエンドは私がすべて準備しました。ただフロントから呼び出して使ってください!バックエンドのデータはReact Queryにインポートしてキャッシュもしてみて、インフィニットスクロール、オプティミスティックアップデートもしましょう。

SSR経由で展開を準備する

z.nodebird.comに私が事前に配布しておきました。皆さんもSSRを通じてSEOを取り揃えて、フロントページをSNS共有してもよく出るようにしてみてください。

Katokにもよく共有されています

イロンマスクとリアルタイムチャット!

ボーナス:リアルタイムチャットまで

リアルタイムチャットを実装しながら、Webソケットとリバースインフィニットスクロールを学びましょう〜

ウェブソケット技術は一度身につけておけばチャットだけでなく様々なところで活用できますよ(リアルタイムリフレッシュとか…ノティフィケーションとか…)

受講前の注意事項📢

練習環境

  • オペレーティングシステムとバージョン(OS):Windows 11

  • 使用ツール: Node.js 22, Next 15


選手の知識と注意事項

  • HTML/CSS/JS/Reactに関する基本的な知識が必要です。

  • 講義に必要なタイプスクリプトは講義内でお知らせします。


  • 質問は24時間以内に回答いたします。

  • 講義内容をブログにまとめるのは大丈夫ですが、必ず出所を残してください。

こんな方に
おすすめです!

学習対象は
誰でしょう?

  • React フレームワークを使用して Web サービスを完成させたい方

  • フロントエンドの現役開発者、志望者、就職準備生

  • Next App Router を積極的に使用してみたい方

  • サーバーのデータを React Query で管理したい方

  • SSR、SEOまで全部챙ぎたい方

前提知識、
必要でしょうか?

  • HTML、CSS の知識

  • JavaScript ES2022までの知識

  • React の基礎知識 (ゼロチョの React 無料講座をご覧ください)

  • TypeScript (講義内で説明します)

こんにちは
です。

63,511

受講生

1,502

受講レビュー

9,576

回答

4.8

講座評価

22

講座

제 강의의 장점은 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)

カリキュラム

全体

81件 ∙ (14時間 28分)

講義資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

97件

4.5

97件の受講レビュー

  • 프론트취준님의 프로필 이미지
    프론트취준

    受講レビュー 14

    平均評価 5.0

    5

    34% 受講後に作成

    아직 초반부를 수강 중인데 만족합니다. 다만, 강의 중에 "요거, 요게, 이, 이거, 이게" 라고 말씀하시는 부분이 많아서 헷갈리는 거 빼고는 좋습니다. ("요게 없어서 여기에" 같은 말씀하실 때는 마우스 커서를 뚫어져라 봐야됩니다) 모달이면 모달, 버튼이면 버튼이라고 정확하게 지칭해서 말씀해 주시면 좋을 거 같습니다. 라이브여서 그런지 "이거 있죠 이거", "이렇게 뜨는거" 표현들이 너무 많아요.. 개인적으로 따라치면서 수강하기보다 시청만 하고 흐름을 이해하려는 쪽으로 방향을 바꾸었더니 괜찮습니다.

    • 제로초(조현영)
      知識共有者

      먼저 따라치시는 동안에 불편을 겪으셨을 것 같아서 죄송합니다. 하지만 이 강의는 맹목적으로 따라치는 목적으로 만들어진 강좌가 아닙니다(클론코딩의 장단점 영상에서 말씀드렸습니다). 그랬다면 제가 일일이 코드를 다 보여드리느라 강의 시간이 30시간이 넘어갔을 겁니다. 이 강의를 듣는 요령은, 직접 먼저 클론코딩을 해보고, 이 강좌의 코드는 정답지처럼 활용하시는 걸 추천드립니다. 또는 강의를 먼저 눈으로만 쭉 보시고 배운 내용을 바탕으로 직접 따라 만들어보시거나요. 코드를 따라치지 않고도 x.com같은 사이트를 스스로 만들 수 있게 하는 게 강의의 목적입니다.

    • 감사합니다. 좋은 공부 방법을 배웠습니다.

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

    受講レビュー 1

    平均評価 3.0

    3

    69% 受講後に作成

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

    • 제로초(조현영)
      知識共有者

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

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

    受講レビュー 3

    平均評価 5.0

    5

    60% 受講後に作成

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

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

      受講レビュー 1

      平均評価 5.0

      5

      68% 受講後に作成

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

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

        受講レビュー 2

        平均評価 5.0

        5

        53% 受講後に作成

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

        zerochoの他の講座

        知識共有者の他の講座を見てみましょう!

        似ている講座

        同じ分野の他の講座を見てみましょう!