강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

프론트엔드

Next + React Query로 SNS 서비스 만들기

리액트19 & 넥스트15 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!

(4.5) 수강평 121개

수강생 3,352명

실습 중심
next.js
react
트위터
클론코딩
ssr
Next.jsReactreact-querynext-authmsw

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • 리액트 개발

  • 리액트+타입스크립트

  • React Query

  • Next.js App Router

  • SSR & SEO

  • MSW

  • Next Auth

  • 실시간 웹소켓 채팅

  • zustand

  • AWS 배포

일론머스크의 x.com 말고
제로초의 z.com을 만들어봅시다!

누적 4400명이 들었던 Next 강좌의 최신 버전!

Next 14 강좌가 Next 15로 업데이트 되었습니다!

  • 트위터가 이름을 엑스닷컴으로 바꿔서 저도 노드버드에서 제트닷컴으로 바꿨습니다.

  • 넥스트 모르셔도 됩니다. 이 강의에서 다 알려드립니다. 리액트는 알고 있어야 합니다.

  • Next.js App Router를 기본으로 사용합니다. (이전 노드버드 강좌는 Next Page Router였습니다)

  • 이왕 버전을 올린 김에 React Query 5, Next Auth 5, MSW 2로 라이브러리 버전들도 전부 최신화하였습니다.

  • Server Action과 같은 Next 14 기능은 당연히 들어갑니다.

  • React Query로 인피니트 스크롤링, 데이터 캐싱, 옵티미스틱 업데이트, 롤백 등을 구현해봅니다.

  • 웹소켓 + 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 공유해도 잘 나오도록 해보세요.

카톡에도 잘 공유됩니다

일론머스크와 실시간 채팅을!!

보너스: 실시간 채팅까지

실시간 채팅을 구현하면서 웹소켓과 리버스 인피니트 스크롤링을 학습해봐요~

웹소켓 기술은 한 번 익혀두면 채팅뿐만 아니라 다양한 곳에서 활용할 수 있어요(실시간 새로고침이라든가... 노티피케이션이라든가...)

수강 전 참고 사항 📢

실습 환경

  • 운영 체제 및 버전(OS): Windows 11

  • 사용 도구: Node.js 22, Next 15


선수 지식 및 유의사항

  • HTML/CSS/JS/React에 대한 기본적인 지식이 필요합니다.

  • 강의에 필요한 타입스크립트는 강의 내에서 알려드려요.


  • 질문은 24시간 이내에 답변드립니다.

  • 강의 내용을 블로그에 정리하시는 건 괜찮으나 꼭 출처를 남겨주셔야 합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 리액트 프레임워크를 사용해서 웹 서비스를 완성하고 싶은 분

  • 프론트엔드 현업 개발자 && 지망생 && 취준생

  • Next App Router를 적극적으로 사용해보고 싶은 분

  • 서버의 데이터를 React Query로 관리해보고 싶은 분

  • SSR, SEO까지 다 챙기고 싶은 분

선수 지식,
필요할까요?

  • HTML, CSS 지식

  • 자바스크립트 ES2022까지의 지식

  • React 기초 지식(제로초의 리액트 무료 강좌 시청하세요)

  • 타입스크립트(강의 내에서 알려드려요)

안녕하세요
입니다.

66,503

수강생

1,682

수강평

9,755

답변

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분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

121개

4.5

121개의 수강평

  • noo9ya5923님의 프로필 이미지
    noo9ya5923

    수강평 1

    평균 평점 3.0

    3

    69% 수강 후 작성

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

    • zerocho
      지식공유자

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

  • zimablue14님의 프로필 이미지
    zimablue14

    수강평 14

    평균 평점 4.4

    3

    54% 수강 후 작성

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

    • dongry님의 프로필 이미지
      dongry

      수강평 3

      평균 평점 5.0

      5

      60% 수강 후 작성

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

      • minsukweb0331님의 프로필 이미지
        minsukweb0331

        수강평 1

        평균 평점 5.0

        5

        68% 수강 후 작성

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

        • ehdgus37262456님의 프로필 이미지
          ehdgus37262456

          수강평 2

          평균 평점 5.0

          5

          53% 수강 후 작성

          この講義のおかげで、Next.jsが私のお気に入りの最高の技術になりました! これまで様々なプラットフォームで講義を受けており、今回初めてインフラで講義を受講したのですが、このNext講義を受講した後、とても満足して以来他のインフラ講義も受講することになりました! この講義は単にクローンコーディングをするのではなく、親切によく教えてくれるので、私の実力もたくさん上昇するようです!私に最高のNext技術を教えてくれてありがとう、今後のWeb開発に多くのお手伝いをさせていただきます!

          ₩69,300

          제로초(조현영)님의 다른 강의

          지식공유자님의 다른 강의를 만나보세요!

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!