BEST

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

Name: Next + React Query로 SNS 서비스 만들기
Price: 69300 KRW

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

(4.5) 수강평 97개

수강생 3,227명

제로초(조현영)

Next.js React react-query next-auth msw

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

이런 걸 배울 수 있어요

리액트 개발
리액트+타입스크립트
React Query
Next.js App Router
SSR & SEO
MSW
Next Auth
실시간 웹소켓 채팅
zustand
AWS 배포

누적 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를 완성한 때)

이런 분들께
추천드려요!

학습 대상은
누구일까요?

리액트 프레임워크를 사용해서 웹 서비스를 완성하고 싶은 분
프론트엔드 현업 개발자 && 지망생 && 취준생
Next App Router를 적극적으로 사용해보고 싶은 분
서버의 데이터를 React Query로 관리해보고 싶은 분
SSR, SEO까지 다 챙기고 싶은 분

선수 지식,
필요할까요?

HTML, CSS 지식
자바스크립트 ES2022까지의 지식
React 기초 지식(제로초의 리액트 무료 강좌 시청하세요)
타입스크립트(강의 내에서 알려드려요)

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

63,481

명

수강생

1,500

개

수강평

9,575

개

답변

4.8

점

강의 평점

개

강의

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

해당 강의에서 제공:

수업자료

섹션 1. 인트로

6개 ∙ (1시간 25분)

섹션 2. 기획자와 디자이너가 기획서를 던져주었다

12개 ∙ (1시간 24분)

7. Next 프로젝트 시작하기
13:08
8. 브라우저 주소 app 폴더에 반영하기
09:47
9. 라우트 그룹
05:20
10. template.tsx, Link, Image, redirect
06:07
11. css module을 선택한 이유
05:52
12. 패러렐 라우트
07:58
13. 클라이언트 컴포넌트로 전환하기
04:22
14. default.tsx
03:57
15. 인터셉팅 라우트
06:54
16. private folder(_폴더)
02:30
17. 로그인 모달에서 발생하는 문제 해결하기(router.replace)
10:15
18. Main, SignupModal css 설명
08:45

섹션 3. 본격 클론 시작!

15개 ∙ (2시간 57분)

19. 레이아웃 클론하기
11:28
20. useSelectedLayoutSegment로 ActiveLink 만들기
14:32
21. 오른쪽 섹션 클론코딩
07:42
22. 홈탭 만들면서 Context API 적용해보기
10:37
23. PostForm 만들기(타이핑 외우기)
08:42
24. 게시글 만들며 dayjs 사용해보기
08:51
25. classnames로 클래스 합성하기(feat. npmtrends로 라이브러리 고르기)
06:28
26. /compose/tweet 만들기
09:50
27. usePathname과 /explore 페이지
08:42
28. [Next 15 반영]useSearchParams와 프로필, /search 페이지
16:13
29. 이벤트 캡처링과 /status/[id] 페이지
11:15
30. faker.js와 /photo/[photoId]
13:52
31. /messages 페이지 라이브 클론
21:28
32. 다중 이미지 구역 만들기
17:55
33. 반응형 만들기
09:57

섹션 4. 그런데 백엔드 개발자가 API를 아직 못 만들었다

22개 ∙ (3시간 44분)

섹션 5. 백엔드 개발자가 드디어 API 문서를 주었다

15개 ∙ (2시간 21분)

섹션 6. 보너스: 백엔드 개발자가 퇴사했다

11개 ∙ (2시간 33분)

강의 게시일: 2023. 12. 03.

마지막 업데이트일: 2025. 05. 13.

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!