Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

Next + React Query로 SNS 서비스 만들기 대시보드

(4.6)
31개의 수강평 ∙  2,158명의 수강생

69,300원

지식공유자: 조현영
총 75개 수업 (14시간 46분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

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

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트 프레임워크를 사용해서 웹 서비스를 완성하고 싶은 분
프론트엔드 현업 개발자 && 지망생 && 취준생
Next App Router를 적극적으로 사용해보고 싶은 분
서버의 데이터를 React Query로 관리해보고 싶은 분
SSR, SEO까지 다 챙기고 싶은 분
📚
선수 지식,
필요할까요?
HTML, CSS 지식
자바스크립트 ES2022까지의 지식
React 기초 지식(제로초의 리액트 무료 강좌 시청하세요)
타입스크립트(강의 내에서 알려드려요)

안녕하세요
조현영 입니다.
조현영의 썸네일

제 강의의 장점은 Q&A입니다. 24시간 이내에 무조건 답변드립니다! 다만 여러분들도 질문을 잘 해주셔야 합니다.

https://www.zerocho.com/lecture

제로초 강의 전체 로드맵

 

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

커리큘럼 총 75 개 ˙ 14시간 46분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 인트로
Next 13 이후에 바뀐 점 미리보기 12:00 클론 코딩의 장단점 미리보기 09:21
리액트 압축 요약 강좌(리액트 기초가 약하면 듣고 오세요) 21:46
에러 잘 질문하는 법 & 삽질 덜 하는 법 29:46
이 강의를 효율적으로 듣는 방법 미리보기 04:34
섹션 1. 기획자와 디자이너가 기획서를 던져주었다
Next 프로젝트 시작하기 미리보기 13:30
브라우저 주소 app 폴더에 반영하기 09:47
라우트 그룹 06:06
template.tsx, Link, Image, redirect 06:40
css module을 선택한 이유 06:12
패러렐 라우트 08:20
클라이언트 컴포넌트로 전환하기 04:26
default.tsx 03:57
인터셉팅 라우트 06:50
private folder(_폴더) 02:30
로그인 모달에서 발생하는 문제 해결하기(router.replace) 11:03
Main, SignupModal css 설명 08:45
섹션 2. 본격 클론 시작!
레이아웃 클론하기 12:38
useSelectedLayoutSegment로 ActiveLink 만들기 15:14
오른쪽 섹션 클론코딩 08:04
홈탭 만들면서 Context API 적용해보기 11:13
PostForm 만들기(타이핑 외우기) 09:16
게시글 만들며 dayjs 사용해보기 09:10
classnames로 클래스 합성하기(feat. npmtrends로 라이브러리 고르기) 06:28
/compose/tweet 만들기 10:47
usePathname과 /explore 페이지 09:03
useSearchParams와 프로필, /search 페이지 15:01
이벤트 캡처링과 /status/[id] 페이지 11:54
faker.js와 /photo/[photoId] 14:37
/messages 페이지 라이브 클론 21:28
다중 이미지 구역 만들기 17:55
반응형 만들기 09:57
섹션 3. 그런데 백엔드 개발자가 API를 아직 못 만들었다
msw 세팅과 버전 업그레이드 미리보기 14:20
next용 msw 컴포넌트와 .env 06:06
서버 컴포넌트에서 Server Actions 사용하기 10:43
클라이언트 컴포넌트에서 Server Actions 사용하기 09:24
미들웨어, API 라우트, catch-all 라우트 10:39
next-auth로 로그인하기 08:25
로그아웃 & 로그인 여부에 따라 화면 다르게 하기 15:29
react-query SSR 설정하기 10:08
클라이언트 react-query 10:14
react-query를 쓰는 이유와 fresh, stale, inactive 18:10
refetch, invalidate, reset의 차이 05:03
팔로잉 게시글, 검색 결과 불러오기 17:57
조건부 쿼리 & 쿼리 재사용하기 16:31
에러 상황 처리하기(유저 정보 없음) 13:16
게시글 상세 페이지, 답글, 포토모달 13:26
미흡한 부분 구현하기 10:23
인피니트 스크롤링 10:11
react-intersection-observer로 더 불러오기 10:32
Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx) 21:16
섹션 4. 백엔드 개발자가 드디어 API 문서를 주었다
백엔드 서버 세팅하기 미리보기 11:11
로그인과 회원가입 실제로 하기 13:10
업로드 이미지 미리보기 07:44
서버 쿠키 공유하기 & 게시글 업로드 완성 07:28
useMutation 사용하기 09:30
주소에 해시가 들어가면 문제가 됩니다(encodeURIComponent) 04:57
하트 누를 때 optimistic update 적용하기 23:59
팔로우/언팔로우 optimistic update 12:42
서로 다른 컴포넌트간 query 일치하게 하기 12:14
완전히 로그아웃 하기 & 프론트 서버에서 쿠키보내기 11:30
메타데이터 설정하기 05:51
답글과 재게시글 꾸미기 07:05
SSR 적용 여부 판단 기준 03:17
재게시, 답글 기능 zustand로 만들어보기 23:59
섹션 5. 보너스: 백엔드 개발자가 퇴사했다
request memoization과 data cache 12:26
Full Route Cache와 Router Cache(static vs dynamic) 09:20
Static(SSG) 모드와 사라진 ISR 모드 06:44
배포 직전 build 하기 08:57
보너스: 배포 맛보기(과금주의) 15:38
보너스: 카톡 공유용 데이터 넣기 07:56
/message 페이지 수정하기 22:48
웹소켓으로 실시간 채팅 구현하기 17:04
리버스 인피니트 스크롤링 21:58
보너스: Vanilla Extract 적용하기 28:30
강의 게시일 : 2023년 12월 04일 (마지막 업데이트일 : 2024년 02월 20일)
수강평 총 31개
수강생분들이 직접 작성하신 수강평입니다.
4.6
31개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
스즈메쨩 thumbnail
5
아직 초반부를 수강 중인데 만족합니다. 다만, 강의 중에 "요거, 요게, 이, 이거, 이게" 라고 말씀하시는 부분이 많아서 헷갈리는 거 빼고는 좋습니다. ("요게 없어서 여기에" 같은 말씀하실 때는 마우스 커서를 뚫어져라 봐야됩니다) 모달이면 모달, 버튼이면 버튼이라고 정확하게 지칭해서 말씀해 주시면 좋을 거 같습니다. 라이브여서 그런지 "이거 있죠 이거", "이렇게 뜨는거" 표현들이 너무 많아요.. 개인적으로 따라치면서 수강하기보다 시청만 하고 흐름을 이해하려는 쪽으로 방향을 바꾸었더니 괜찮습니다.
2023-12-13
지식공유자 조현영
먼저 따라치시는 동안에 불편을 겪으셨을 것 같아서 죄송합니다. 하지만 이 강의는 맹목적으로 따라치는 목적으로 만들어진 강좌가 아닙니다(클론코딩의 장단점 영상에서 말씀드렸습니다). 그랬다면 제가 일일이 코드를 다 보여드리느라 강의 시간이 30시간이 넘어갔을 겁니다. 이 강의를 듣는 요령은, 직접 먼저 클론코딩을 해보고, 이 강좌의 코드는 정답지처럼 활용하시는 걸 추천드립니다. 또는 강의를 먼저 눈으로만 쭉 보시고 배운 내용을 바탕으로 직접 따라 만들어보시거나요. 코드를 따라치지 않고도 x.com같은 사이트를 스스로 만들 수 있게 하는 게 강의의 목적입니다.
2023-12-27
스즈메쨩
감사합니다. 좋은 공부 방법을 배웠습니다.
2023-12-28
Grit Grit thumbnail
5
믿고 보는 제로초님 강의네요! Next를 공부하려고 공식문서도 보고했지만 잘 안읽혀서 전 강의를 쭉 본다음에 공식문서 보는게 더 이해가 빠른거같아요. 보통 전 강의를 쭉 본다음에 핵심적인 기능들을 공부한 뒤 공식문서에서 어떤 기능들이 있다 키워드정도만 기억합니다 작업을 하다 어떤 기능이 필요하면 공식문서에서 찾아서 적용하는편입니다 편당 강의시간도 길지않고 잘 나눠놓으셔서 지하철이나 짬 날때 보기도 좋고 이해안되는 부분에서는 돌려보는것도 너무 편하더라구요 React-query도 찍먹개념으로 쓰던기능만 쓰고있었는데 이번에 설명들으면서 더 잘쓰게 된거같아요!! Zustand도 이번기회에 처음써보고 msw나 다양한 라이브러리도 덤으로 알아갑니당 현업에서 알아두면 좋은 배포나 웹소켓 등 부록내용들도 꾸준히 좋은 퀄리티로 올려주셔서 너무 감사드리고 앞으로도 화이팅하면서 활동해주세요! ㅎㅎ
2024-01-18
KarTech thumbnail
5
저는 1년차 개발자로써 트렌드에 맞춰 nextjs를 공부하고자 했습니다. 하지만 13버전이 나오고나서 기존의 12버전 강의들로는 부족해서 공식문서를 통해서 혼자서 공부하고 있었는데 경험도 실력도 부족해서 공부하는데에 어려움이 있었습니다. 거기에 트렌드에 맞는 라이브러리들을 사용하고 싶어서 이것저것 적용하다보니 내가 잘 모르고 라이브러리의 장점들을 제대로 활용하고 있는지에 대한 의심도 있었습니다. 이때 딱 제로초님의 nextjs14버전 강의와 그동안 제대로 써보고 싶었던 라이브러리 대부분을 사용한 강의가 나온다는 소식에 목빠지게 기다리고 있었습니다. 지금 한 절반정도 듣고 있는데 각 섹션에 대해 제가 궁금했던 부분 대부분이 해소되고 있습니다. 너무 감사합니다 ㅎㅎ
2023-12-05
지식공유자 조현영
감사합니다. 궁금하신 점 언제든지 질문주세요~
2023-12-05
부끄 thumbnail
5
const 명언 = 한번 당했던 에러한테는 안 당하지~
2024-04-14
roider2316 thumbnail
5
감사합니다~!
2024-03-11
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!