Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(4.5) 수강평 109개

수강생 3,304명

실습 중심
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 기초 지식(제로초의 리액트 무료 강좌 시청하세요)

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

안녕하세요
입니다.

65,298

수강생

1,590

수강평

9,690

답변

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

해당 강의에서 제공:

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

수강평

전체

109개

4.5

109개의 수강평

  • justfix0109464님의 프로필 이미지
    justfix0109464

    수강평 14

    평균 평점 5.0

    5

    34% 수강 후 작성

    I'm still in the first half of the class, but I'm satisfied. However, it's good except that it's confusing because there are many parts where you say "this, this, this, this, this" during the lecture. (When you say "this isn't here, so here", I have to look at the mouse cursor) It would be better if you could say it accurately, saying "modal" if it's a modal, and "button" if it's a button. Maybe because it's live, there are too many expressions like "this is here", "this comes up like this".. Personally, I changed the direction from taking the class by following along to just watching and trying to understand the flow, and it's fine.

    • zerocho
      지식공유자

      First of all, I apologize for any inconvenience you may have experienced while following along. However, this lecture is not designed for blindly following along (as I explained in the video on the pros and cons of cloning). If I had, the lecture time would have been over 30 hours because I would have shown you all the codes one by one. The trick to taking this lecture is to try cloning yourself first and use the code in this lecture as an answer sheet. Or, you can just watch the lecture first and then try to create your own based on what you learned. The purpose of this lecture is to enable you to create a site like x.com without following the code.

    • Thank you. I learned a good way to study.

  • noo9ya5923님의 프로필 이미지
    noo9ya5923

    수강평 1

    평균 평점 3.0

    3

    69% 수강 후 작성

    I think the content that introduces new technologies and proceeds with clone coding is good. However, as time has passed, there have been many errors due to incorrect package versions or changes in usage, so the time spent directly modifying the official documentation has increased significantly more than the time spent watching the lecture. (Lecture 1, Official Document 9 = I'm confused whether I'm watching the lecture or hearing an alarm telling me to go to the official website) It feels more like watching a demonstration of X clone coding than a lecture. I wish they had mainly explained how the package is used, what its advantages are, the life cycle of the nextjs framework, advantages, disadvantages, and recommended file structure design. I felt that the explanation was lacking because they mainly showed coding, so I was sometimes shocked. It would have been nice if you had focused more on the correct methodology, structural design, optimization, etc. through clone coding, but instead, you were told to study more by looking at the official documentation, so you ended up looking at the official documentation a lot and gaining knowledge that wasn't covered in the lecture, which seems good. If you published the lecture for this purpose, it seems like you succeeded, but it's a lecture that leaves a lot of regret because it seems like the purpose of taking the lecture to make it easier to understand has disappeared. In the next lecture, I hope you will provide a lecture centered on examples that are appropriate for the situation, with prepared code, unified naming conventions, and various file structures used in practice. Then, I will use the source code on GitHub to solve errors that aren't covered in the lecture and study them step by step in the official documentation to solve them. I hope this feedback was helpful, even if it was a little, to Zerocho, who always strives to create good lectures.

    • zerocho
      지식공유자

      Thank you for the great feedback. From now on, I will focus on practical structural design and the pros and cons of the package!

  • dongry님의 프로필 이미지
    dongry

    수강평 3

    평균 평점 5.0

    5

    60% 수강 후 작성

    const quote = I won't make the same mistake again~

    • minsukweb0331님의 프로필 이미지
      minsukweb0331

      수강평 1

      평균 평점 5.0

      5

      68% 수강 후 작성

      This is a lecture by Zerocho that I trust and watch! I tried to study Next and looked at the official documentation, but I couldn't read it well, so I think it's faster to watch all the lectures and then look at the official documentation. Usually, I watch all the lectures and then study the core functions, and then I remember only the keywords of the functions in the official documentation. If I need a function while working, I look it up in the official documentation and apply it. The lecture time is not long and it's well-divided, so it's good to watch it on the subway or when I have free time, and it's also very convenient to look it up again when I don't understand something. I used to use React-query only as a function that I used to use, but I think I've been using it better after listening to the explanation this time!! I also used Zustand for the first time this time and learned about MSW and various libraries as a bonus. I'm so grateful that you've consistently uploaded good quality supplementary contents such as distribution and web socket that are good to know in the field. Please keep up the good work and continue to be active! ㅎㅎ

      • ehdgus37262456님의 프로필 이미지
        ehdgus37262456

        수강평 2

        평균 평점 5.0

        5

        53% 수강 후 작성

        Thanks to this lecture, Next.js has become my favorite and best technology!!! I have taken lectures on various platforms so far, and this is the first time I took a lecture on Inflearn. After taking this Next lecture, I was so satisfied that I took other Inflearn lectures! This lecture is not just about clone coding, but it kindly teaches you well, so I think my skills have improved a lot! Thank you for teaching me the best Next technology, and I will receive a lot of help in web development in the future!

        ₩69,300

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

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

        비슷한 강의

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