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

[리뉴얼] React로 NodeBird SNS 만들기

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

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

이런 걸 배울 수 있어요

  • 리액트 개발

  • 리덕스&리덕스 사가

  • 리액트 Hooks 사용

  • Styled Components

  • Ant Design

  • SWR

  • 서버 사이드 렌더링

  • 검색 엔진 최적화

  • AWS 배포

새로 만나는 제로초리액트 노드버드 프로젝트!

리뉴얼된 사항

next@9, styled-components@5, antd@4, node.js@14의 버전을 다룹니다.

next@14와 node.js@20과도 호환되니 최신 버전으로 진행하셔도 됩니다. antd@5, next-redux-wrapper@8의 migration 방법은 강의노트와 새소식(공지사항)에 정리해두었습니다. 참고하면서 보세요!

이 강좌는 Pages Router를 다룹니다. App Router 강좌는 이 링크(클릭)에 있습니다. App router 강좌가 더 최신이지만 이 강좌를 남겨둔 이유는, App Router가 아직 불안정해서 실무에서 쓰기엔 조금 위험이 있습니다. 안정화될 때까지는 Pages Router를 실무에서 쓰시는 걸 추천드립니다.


당부의 말씀

작년에 많은 수강생분들이 이 강좌를 들어주셨습니다. 감사합니다. 다만 드리고 싶은 말씀이 하나 있습니다. 단순히 강의를 눈으로 본다고 해서 풀스택 개발자 되지 않습니다(그것은 욕심입니다). 직접 따라서 치시고, 발생하는 에러들을 해결하고, 강좌에는 없는 기능을 만들어보면서 나오는 기술을 자기 것으로 만들어야 합니다.

이 강좌는 실제로 6개월 이상이 걸리는 커리큘럼을 20시간 가까이 이어서 보여드리는 것입니다. HTML, CSS, JS, Node, MySQL, AWS 모두 최소 1달 이상을 투자해야 어느 정도 소화할 수 있습니다. 따라서 강좌는 20시간 분량이더라도 별도의 공부가 필요합니다.


제로초의 React로 배우는
20시간 풀스택 강좌!

▲ NodeBird SNS 만들기

  • 트위터와 비슷한(이라고 쓰고 짝퉁이라 읽는다) 제로초의 시그니처 프로젝트 NodeBird SNS를 만들어보며, 서비스 구현부터 배포까지 모두 배워봐요.
  • Next.js(SSR) + React Hooks + Redux + Redux saga + Ant Design + Styled Components + Node + Express + Sequelize(MySQL)를 배웁니다.
  • 검색엔진 최적화와 AWS 배포(간단하게 EC2 + Lambda + S3 + Route53 사용)는 보너스!

직접 만들어보세요!

로그인, 게시글 작성, 좋아요
이미지 업로드, 댓글, 리트윗

 

인피니트 스크롤링, 팔로우, 언팔로우

 

해시태그 검색, 유저 프로필

 

질문에 빠르게
대답해 드립니다.

제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드려요.
강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부해 보세요.
내용을 이해하기에 더 도움이 될 거예요!


지식공유자를 소개합니다.

웹개발 베스트셀러
<Node.js 교과서> 저자

주식회사 오늘의픽업
CTO


연관 강의

웹 게임을 만들며 배우는 React
무료로 웹 게임을 통해 리액트를 배워봅니다.
프론트를 중점으로 다루고 백엔드는 부가적인 역할을 합니다.
[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
노드에 대한 핵심 개념을 익힌 후,
실전 예제를 통해 실무에 뛰어들 준비를 갖춥니다.
Vue로 Nodebird SNS 만들기
Vue로 만드는 풀스택 SNS 강좌!

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 리액트 Hooks나 Next같이 리액트를 응용하고 싶은 분

  • 풀스택 개발에 관심있는 분

  • 프론트엔드 개발자 지망생

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

선수 지식,
필요할까요?

  • HTML, CSS 지식

  • 자바스크립트 최신 문법 지식

  • 제로초의 리액트 무료 강좌 시청

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

64,012

수강생

1,536

수강평

9,614

답변

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)

더보기

커리큘럼

전체

94개 ∙ (23시간 3분)

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

수강평

전체

178개

4.9

178개의 수강평

  • ksw50621916님의 프로필 이미지
    ksw50621916

    수강평 2

    평균 평점 5.0

    5

    91% 수강 후 작성

    Hello! I took Zerocho's class and got a job at a blockchain company, and I'm writing a course review to promote my project separately :) I'll first reveal the project I'm currently maintaining while working at the company! It's almost the same stack as the Nodebird I wrote here, but TypeScript and Nest have been added! https://musicsseolprise.com You can come here! The person who's the subject of the project appeared on the broadcast, so I'm writing a course review to promote it☺️ The project I'm going to reveal is of a difficulty level that you can do if you just understand the Nodebird lectures well for the front end! For the back end, you have to study Nest.js separately. I was a major, but I wandered a lot except for the database I learned in my last semester as an undergraduate, so my grades weren't good, and you can see that my base was no different from that of a non-major. First of all, the biggest advantage of the course is the Q&A! I was a major, but I entered college late and lacked connections. So when I asked questions during the live lecture or Inflearn, they answered me very kindly. Thanks to you, I studied Linux together and it was a great help in getting into this company! And the front-end changes so quickly. So when you study, ask yourself why you are using the library, and if you still can't figure it out, look for other libraries and use the questions to improve your skills a lot! Personally, if you are a job seeker, I recommend Recoil.js for state management. In fact, if you do Saga with Redux, the amount of code will increase too much and your productivity will decrease. And Nest.js will be covered in a lecture later, but it is actually better to study Express in advance, so I recommend you study it and ask questions about refactoring! As a reference, I additionally studied TypeScript and replaced all my code with TypeScript! And I used a different style library. I also used Redux and then removed it and implemented Ajax with swr. And I used a browser-built API called intersection observer for infinite scrolling. Anyway, thank you so much, Zerocho, for always kindly answering questions even though you are busy!!

    • qnrjs42님의 프로필 이미지
      qnrjs42

      수강평 18

      평균 평점 4.8

      5

      99% 수강 후 작성

      If you are thinking about purchasing a course and reading this article, take it right away. You won't regret it. Hello, I got a job after taking this course. After taking this course or while taking it, decide on a toy project and execute it. And it would be good to have a habit of recording. Or, create a development blog. While taking the course, make sure to record the parts you don't know. It will be helpful if you write on the development blog with the mindset of fully understanding and making it your own. I want to tell you all about my story, but it's too long... My learning order until I got a job was 1. Zerocho Node Crawling (when I knew nothing about JavaScript) 2. JavaScript (I kept learning repeatedly and studied mainly with Inflearn.) 3. Zerocho, Captain Pangyo Vue (I just got a taste of it, but I can't do a project with Vue now) 4. Life Coding React, Redux (YouTube) 5. John Ahn React Series (Inflearn) 6. Zerocho [Renewal] React Nodebird 7. Nextjs Toy Project (The most important!! A turning point in life) 8. Github Lawn Management 9. Development Blog 10. Resume, Portfolio Management 11. Interview and Job Search The period of time I spent preparing for a proper job search was shorter than I thought (4 months?), but I feel like I did a lot. The reason I was able to study a lot was because I kept studying when I didn't have work while working a night shift on Fridays and Saturdays, and when I couldn't go to work because of the coronavirus, I think I studied a lot at that time. I didn't get a job just by watching this lecture, but taking this lecture helped me a lot in getting a job. If I hadn't taken this lecture, I think I would have been working a different part-time job and continuing to study. After watching this lecture, you will gain the confidence to create any website. Fighting!!

      • Where did you take the next.js toy project?

      • Irumnim, your reply is very late. I didn't even know you had replied because I didn't get an alarm. The toy project is similar to clone coding, but I didn't listen to the lecture, I chose a specific site and cloned it one by one.

    • kaei25740567님의 프로필 이미지
      kaei25740567

      수강평 2

      평균 평점 4.5

      5

      97% 수강 후 작성

      As a front-end developer in the field, I had difficulty developing back-end, and I wanted to try deployment, but I couldn't start because of a vague fear. However, through this lecture, I was able to deploy it myself and work on the back-end, so it was really good! For those who are taking the lecture, when taking the redux and saga class, if you are somewhat familiar with the pattern, it would be good to stop before working on redux and saga and work on redux, saga, and back-end router in the front before taking the lecture^^!

      • heruse7318님의 프로필 이미지
        heruse7318

        수강평 4

        평균 평점 2.5

        5

        37% 수강 후 작성

        I was a non-developer who didn't even know JavaScript. I listened to JavaScript through games on YouTube's Zerocho channel, and even Jasstone, and I wanted to start React quickly, so I quickly learned the concepts through the React beginner course and listened to this. Since it's a style that explains things based on principles, even non-majors can follow along if they're interested. You can just search on Google here and there for grammar. And the fact that you answer my questions quickly was a great guide.

        • 9uke님의 프로필 이미지
          9uke

          수강평 2

          평균 평점 3.5

          3

          88% 수강 후 작성

          I would like to list the pros and cons of this lecture. Pros 1. The lecture content is too informative. Cons 1. Whenever there is a section where you copy and paste code or a section where you edit and suddenly complete the code, it is a code that was suddenly created, so there is a lack of explanation about where the code came from and what was modified, so a lot of time is spent on this part. 2. If you follow the lecture well, an error occurs in the middle, but since it is a mistake made in the lecture itself, there is a section where it is corrected in the next lecture, but since there is no mention of it, you will keep looking for where you made a mistake until you watch the next lecture. The lecture content is very informative, but the editing part is very disappointing.

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

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

          비슷한 강의

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

          ₩88,000