인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST

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

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

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

이런 걸 배울 수 있어요

  • 리액트 개발

  • 리액트+타입스크립트

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

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

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

63,816

수강생

1,523

수강평

9,598

답변

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

해당 강의에서 제공:

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

수강평

전체

101개

4.5

101개의 수강평

  • 프론트취준님의 프로필 이미지
    프론트취준

    수강평 14

    평균 평점 5.0

    5

    34% 수강 후 작성

    아직 초반부를 수강 중인데 만족합니다. 다만, 강의 중에 "요거, 요게, 이, 이거, 이게" 라고 말씀하시는 부분이 많아서 헷갈리는 거 빼고는 좋습니다. ("요게 없어서 여기에" 같은 말씀하실 때는 마우스 커서를 뚫어져라 봐야됩니다) 모달이면 모달, 버튼이면 버튼이라고 정확하게 지칭해서 말씀해 주시면 좋을 거 같습니다. 라이브여서 그런지 "이거 있죠 이거", "이렇게 뜨는거" 표현들이 너무 많아요.. 개인적으로 따라치면서 수강하기보다 시청만 하고 흐름을 이해하려는 쪽으로 방향을 바꾸었더니 괜찮습니다.

    • 제로초(조현영)
      지식공유자

      먼저 따라치시는 동안에 불편을 겪으셨을 것 같아서 죄송합니다. 하지만 이 강의는 맹목적으로 따라치는 목적으로 만들어진 강좌가 아닙니다(클론코딩의 장단점 영상에서 말씀드렸습니다). 그랬다면 제가 일일이 코드를 다 보여드리느라 강의 시간이 30시간이 넘어갔을 겁니다. 이 강의를 듣는 요령은, 직접 먼저 클론코딩을 해보고, 이 강좌의 코드는 정답지처럼 활용하시는 걸 추천드립니다. 또는 강의를 먼저 눈으로만 쭉 보시고 배운 내용을 바탕으로 직접 따라 만들어보시거나요. 코드를 따라치지 않고도 x.com같은 사이트를 스스로 만들 수 있게 하는 게 강의의 목적입니다.

    • 감사합니다. 좋은 공부 방법을 배웠습니다.

  • Grit Grit님의 프로필 이미지
    Grit Grit

    수강평 1

    평균 평점 5.0

    5

    68% 수강 후 작성

    믿고 보는 제로초님 강의네요! Next를 공부하려고 공식문서도 보고했지만 잘 안읽혀서 전 강의를 쭉 본다음에 공식문서 보는게 더 이해가 빠른거같아요. 보통 전 강의를 쭉 본다음에 핵심적인 기능들을 공부한 뒤 공식문서에서 어떤 기능들이 있다 키워드정도만 기억합니다 작업을 하다 어떤 기능이 필요하면 공식문서에서 찾아서 적용하는편입니다 편당 강의시간도 길지않고 잘 나눠놓으셔서 지하철이나 짬 날때 보기도 좋고 이해안되는 부분에서는 돌려보는것도 너무 편하더라구요 React-query도 찍먹개념으로 쓰던기능만 쓰고있었는데 이번에 설명들으면서 더 잘쓰게 된거같아요!! Zustand도 이번기회에 처음써보고 msw나 다양한 라이브러리도 덤으로 알아갑니당 현업에서 알아두면 좋은 배포나 웹소켓 등 부록내용들도 꾸준히 좋은 퀄리티로 올려주셔서 너무 감사드리고 앞으로도 화이팅하면서 활동해주세요! ㅎㅎ

    • 미니버드님의 프로필 이미지
      미니버드

      수강평 2

      평균 평점 5.0

      5

      53% 수강 후 작성

      이 강의 덕분에 Next.js가 제가 가장 좋아하는 최고의 기술이 되었습니다!!! 지금까지 다양한 플랫폼에서 강의를 들어왔고, 이번에 처음으로 인프런에서 강의를 수강했는데 이 Next 강의를 수강한 뒤, 너무 만족스러워서 이후 다른 인프런 강의도 수강하게 되었습니다! 이 강의는 단순히 클론코딩을 하는 것이 아니라 친절하게 잘 알려주시니 저의 실력도 많이 상승하는 것 같습니다! 저에게 최고의 Next 기술을 알려주셔서 감사하고, 앞으로 웹 개발에 있어서 많은 도움 받도록 하겠습니다!

      • 누구야님의 프로필 이미지
        누구야

        수강평 1

        평균 평점 3.0

        3

        69% 수강 후 작성

        새로운 기술을 도입하여 클론 코딩을 진행하는 콘텐츠는 좋다고 봅니다. 하지만 시간이 조금 흘러서인지 패키지 버전이 안 맞거나 사용법이 변화된 것들로 인하여 에러가 많이 발생하여 강의 시청 시간 보다 공식문서를 찾아서 직접 수정하는 시간이 압도적으로 늘어나는 상황이 발생되었습니다.(강의1, 공식문서 9 = 강의를 보는 건지 공홈에 들어가라고 알람을 듣는 건지 헷갈립니다) 강의라기 보다는 X 클론 코딩 시연을 보는 것만 같습니다. 해당 패키지는 어떻게 사용되는지 어떤 장점이 있는지, nextjs 프레임워크의 라이프사이클이, 장점, 단점, 추천 파일 구조 설계를 주로 설명해주셨으면 더 좋았을거 같다라는 아쉬움이 있으며, 코딩 짜는 것을 주로 보여주면서 오히려 설명이 빈약하다는 느낌을 많이 받아서 현타가 가끔씩 왔습니다. 클론 코딩으로 올바른 방법론과 구조 설계, 최적화 등을 더 집중해서 보여주셨으면 좋았겠지만 그렇지 않고 오히려 공식문서를 보고 알아서 더 공부하라고 하니 진짜 많이 공식문서를 보게 되면서 강의에 안나오는 지식도 얻게 되고 좋은거 같기도 한데 이 것을 목적으로 강의를 퍼블리싱 하신거면 성공하신거라고 보입니다만 좀 더 이해를 쉽게 받기 위해서 강의를 수강한 목적이 사라진듯하여 아쉬움이 많이 남는 강의 입니다. 다음 강의에서는 준비된 코드와 통일된 네이밍 컨벤션, 실무에서 사용하는 다양한 파일 구조로 적재적소의 예제 위주의 강의가 마련되었으면 좋겠습니다. 그럼 저는 깃허브에 있는 소스코드를 활용하여 강의에 안나오는 에러를 해결하기 위하여 공식문서에서 다시 차근차근 공부하여 해결하기 위하여 가보겠습니다. 언제나 좋은 강의를 만들기 위하여 노력하시는 제로초님께 미약하나마 도움이 되는 피드백이었길 바랍니다.

        • 제로초(조현영)
          지식공유자

          좋은 피드백 감사합니다. 다음부터는 실무 중심의 구조 설계와 패키지의 장단점 위주로 진행해보도록 하겠습니다!

      • 부끄님의 프로필 이미지
        부끄

        수강평 3

        평균 평점 5.0

        5

        60% 수강 후 작성

        const 명언 = 한번 당했던 에러한테는 안 당하지~

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

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

        비슷한 강의

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

        연관 로드맵

        강의가 포함된 로드맵으로 학습해 보세요!

        ₩69,300