BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(4.6) 수강평 74개

수강생 2,824명

Next.jsReactreact-querynext-authmsw
Thumbnail

중급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸
배워요!

  • 리액트 개발

  • 리액트+타입스크립트

  • React Query

  • Next.js App Router

  • SSR & SEO

  • MSW

  • Next Auth

  • 실시간 웹소켓 채팅

  • zustand

  • AWS 배포

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

스크린샷 2023-11-20 135704

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

Next 13 강좌를 찍던 중 Next 14가 나와서 눈물을 머금고 다시 찍었습니다.

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

  • 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 기반으로 데이터를 효율적으로 관리할 수 있게 됩니다.

  • 스스로 프론트 서버를 배포하기 위한 준비를 할 수 있습니다.

  • 실시간 채팅을 구현할 수 있게 됩니다.

학습 내용 📚

스크린샷 2023-11-20 134555

저런 폴더들의 역할이 궁금하시죠?

Next App Router 적극 활용하기

Next App Router에는 다양하고 신기한 폴더들이 많이 추가되었습니다 ()폴더 @폴더, (.)폴더, (..)폴더, (...)폴더, []폴더, _폴더...

폴더 구조만 잘 짜도 라우팅을 쉽게 할 수 있습니다. 같이 배워봅시다.

MSW로 가짜 API 서버 만들기

백엔드 개발자가 아직 API를 만들지 않았다고요? 그래서 자꾸 일정이 뒤로 밀린다고요? 그래도 손가락만 빨고 있으면 안 됩니다! MSW로 가짜 API 서버를 만들어서 프론트 먼저 개발합시다. 귀여운 고양이들과 함께요!

스크린샷 2023-11-20 134502

귀여운 고양이😺 더미데이터와 함께 개발하기!

스크린샷 2023-11-20 133935

API는 물론 문서까지 다 준비해놨어요!

준비된 백엔드로 서비스 구현하기

MSW로 열심히 개발하다가 백엔드 개발자가 API를 완성했다는 소식이 들려오네요! 이제 실제 API를 사용해서 프론트를 개발해봅시다.

백엔드는 제가 다 준비해놨습니다. 그냥 프론트에서 호출해서 사용하세요! 백엔드의 데이터는 React Query로 가져와서 캐싱도 해보고 인피니트스크롤링, 옵티미스틱 업데이트도 해봅시다.

SSR을 통해 배포 준비하기

z.nodebird.com에 제가 미리 배포해두었습니다. 여러분도 SSR을 통해 SEO를 챙겨 프론트 페이지를 SNS 공유해도 잘 나오도록 해보세요.

스크린샷 2023-11-20 135121

카톡에도 잘 공유됩니다

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

보너스: 실시간 채팅까지

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

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

수강 전 참고 사항 📢

실습 환경

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

  • 사용 도구: Node.js 20, Next 14


선수 지식 및 유의사항

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

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


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

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

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

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

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

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

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

선수 지식,
필요할까요?

  • HTML, CSS 지식

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

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

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

안녕하세요
제로초(조현영)입니다.

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

https://www.zerocho.com/lecture

제로초 강의 전체 로드맵

 

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

커리큘럼

전체

75개 ∙ (14시간 46분)

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!