[리뉴얼] React로 NodeBird SNS 만들기
[리뉴얼] React로 NodeBird SNS 만들기
수강정보
(26개의 수강평)
577명의 수강생
스킬태그 #React, #Redux, #Node.js, #Express

이 강의는

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

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

리뉴얼된 사항

next@9, styled-components@5, next-redux-wrapper@5, node.js@14의 최신 버전을 다룹니다. 최근 업데이트로 인해서 SSR 연동 방법이 어려워졌는데 그 부분이 어려우시다면 들으시면 됩니다.

또한 https를 적용할 때 greenlock-express 대신 nginx+letsencrypt(certbot-auto) 조합으로 합니다.

당부의 말씀

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

이 강좌는 실제로 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 사용)는 보너스!

질문 답변을 제공합니다!

▲ 2019 인프런 어워드 <가장 많은 질문에 답변한 지식공유자> 선정

제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드립니다. 단순히 강좌만 시청하는 것보다는 강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부하시면 많은 도움이 됩니다. 강좌 내용에서 설명이 부족하거나 이해가 안 가는 부분이 있다면 언제든지 질문 주세요. 다른 분들이 이미 했던 질문을 읽어보시는 것도 도움이 됩니다.

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

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

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

연관된 강의

Node.js 교과서 - 기본부터 프로젝트 실습까지
노드에 대한 핵심 개념을 익힌 후,
실전 예제를 통해 실무에 뛰어들 준비를 갖춥니다.

뷰로도 만들어볼까요?

Vue로 Nodebird SNS 만들기
Vue로 만드는 풀스택 SNS 강좌!

참고 사항

이런 걸 배워요

  • 리액트 개발
  • 리덕스&리덕스 사가
  • 리액트 Hooks 사용
  • Styled Components
  • Ant Design
  • SWR
  • 서버 사이드 렌더링
  • 검색 엔진 최적화
  • AWS 배포

도움 되는 분들

  • 리액트 Hooks나 Next같이 리액트를 응용하고 싶은 분
  • 풀스택 개발에 관심있는 분
  • 프론트엔드 개발자 지망생
  • Next9버전의 변경점이 궁금하신 분.

선수 지식

  • HTML, CSS 지식
  • 자바스크립트 최신 문법 지식
  • 제로초의 리액트 무료 강좌 시청

공개 일자

2020년 7월 07일 (마지막 업데이트 일자 : 2020년 7월 20일)

지식공유자 소개

– Node.js교과서 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중 
– 스타트업 CTO
– 글로벌SW전담개발자

5.0
26개의 수강평
default_profile.png
Choi Boo 1달 전
강의 구매 고민하시면서 이 글을 보신다면 당장 수강하세요 후회하지 않습니다. 안녕하세요 이 강의를 듣고 취업하게 되었습니다. 이 강의를 수강한 뒤나 수강하면서 토이 프로젝트를 정하고 실행하세요. 그리고 기록하는 습관이 있으면 좋습니다. 또는 개발 블로그를 만드세요. 강의를 수강하면서 모르는 부분은 꼭 기록하세요. 개발 블로그에는 완전히 이해하고, 내 것으로 만들었다는 마음으로 쓰면 도움이 될 겁니다. 제 스토리를 다 풀고 싶지만 너무 길어져서... 제가 취업하기까지 학습 순서는 1. 제로초 Node 크롤링 (자바스크립트 뭣도 모를 때) 2. 자바스크립트 (계속 반복 학습하고 인프런 위주로 공부했습니다.) 3. 제로초, 캡틴판교 vue (살짝 맛만 봄, 지금 vue로 프로젝트 하라하면 못함) 4. 생활코딩 react, redux (유튜브) 5. John Ahn 리액트 시리즈 (인프런) 6. 제로초 [리뉴얼] react nodebird 7. nextjs 토이프로젝트 (제일 중요!! 인생의 전환점) 8. github 잔디 관리 9. 개발블로그 10. 이력서, 포트폴리오 관리 11. 면접 및 취업 제대로 취업하기 위해 준비한 기간이 생각보다 짧은데(4개월?) 뭔가 좀 많이한 느낌도 들긴합니다. 공부를 많이할 수 있었던 계기가 금토일 야간 알바하면서 일 없을 때 계속 공부해왔다가, 코로나로 장사 안 되서 알바 못나갈 때 그때 공부 엄청한거 같습니다. 꼭 이 강의만 봐서 취업하진 않았지만 이 강의를 수강함으로써 취업하기 위해 도움이 많이 되었습니다. 아마 이 강의가 없었다면 다른 알바 일하면서 계속 공부하고 있을거라 생각합니다. 이 강의를 보고 나시면 어떤 사이트든 만들 수 있는 자신감이 생깁니다. 파이팅!!
default_profile.png
이하규 4달 전
리뉴얼 이전 버전에 비해 내용 진행이 훨씬 매끄럽게 발전한게 느껴져서 좋습니다.
default_profile.png
OCK Sam 2달 전
현업 프론트엔드 개발자로 백엔드 개발을 어려워 했었고, 배포를 해보고 싶었지만 막연한 두려움 때문에 시작하지 못했었습니다. 그런데 이 강의를 통해서 직접 배포도 해보고, 백엔드 작업도 해서 정말 좋았습니다! 강의를 들으시는 분들 경우 redux와 saga 수업 들으실때, 어느 정도 패턴에 익숙해 지시면 제로초님이 redux, saga 작업 하기전에 미리 멈춰놓고 프론트에서 redux와 saga, backend router 작업을 미리 해보시고 강의를 들으면 좋을 것 같습니다^^!

교육과정

모두 펼치기 93 강의 22시간 48분
섹션 0. Hello, Next.js
7 강의 78 : 22
리뉴얼 강좌 소개
11 : 07
Next.js 역할 소개
09 : 10
실전 예제와 준비사항
10 : 20
Next.js 실행해보기.
09 : 24
page와 레이아웃.
10 : 31
Link와 eslint
09 : 03
Q&A
18 : 47
섹션 1. antd 사용해 SNS 화면 만들기
9 강의 107 : 27
antd와 styled-components
10 : 55
_app.js와 Head
09 : 18
반응형 그리드 사용하기.
11 : 33
로그인 폼 만들기
09 : 36
리렌더링 이해하기
09 : 59
더미 데이터로 로그인하기
08 : 39
크롬 확장프로그램과 Q&A
11 : 53
프로필 페이지 만들기
18 : 28
회원가입 페이지 만들기(커스텀 훅)
17 : 06
섹션 2. Redux 연동하기
12 강의 168 : 44
리덕스 설치와 필요성 소개
13 : 25
리덕스의 원리와 불변성
17 : 07
리덕스 실제 구현하기
14 : 50
미들웨어와 리덕스 데브툴즈
09 : 46
리듀서 쪼개기
08 : 13
더미데이터와 포스트폼 만들기
19 : 43
게시글 구현하기
17 : 05
댓글 구현하기
12 : 45
이미지 구현하기
09 : 37
이미지 캐루셀 구현하기(react-slick)
16 : 02
글로벌 스타일과 컴포넌트 폴더 구조.
19 : 00
게시글 해시태그 링크로 만들기
11 : 11
섹션 3. Redux-saga 연동하기
13 강의 205 : 01
redux-thunk 이해하기
13 : 33
saga 설치하고 generator 이해하기
12 : 02
saga 이펙트 알아보기
15 : 26
take, take 시리즈, throttle 알아보기
11 : 52
saga 쪼개고 reducer와 연결하기
16 : 21
액션과 상태 정리하기
14 : 24
바뀐 상태 적용하고 eslint 점검하기
16 : 22
게시글, 댓글 saga 작성하기
15 : 50
게시글 삭제 saga 작성하기
18 : 41
immer 도입하기
16 : 28
faker로 실감나는 더미데이터 만들기
11 : 51
인피니트 스크롤링 적용하기
28 : 03
팔로우, 언팔로우 구현하기
14 : 08
섹션 4. 백엔드 노드 서버 구축하기
25 강의 398 : 12
노드로 서버 구동하기
11 : 28
익스프레스로 라우팅하기
12 : 45
익스프레스 라우터 분리하기
04 : 59
MySQL과 시퀄라이즈 연결하기
11 : 18
시퀄라이즈 모델 만들기
12 : 47
시퀄라이즈 관계 설정하기
28 : 46
시퀄라이즈 sync + nodemon
08 : 06
회원가입 구현하기
20 : 50
CORS 문제 해결하기
12 : 05
패스포트로 로그인하기.
19 : 35
쿠키/세션과 전체 로그인 흐름.
21 : 26
로그인 문제 해결하기
17 : 30
미들웨어로 라우터 검사하기
07 : 22
게시글, 댓글 작성하기
13 : 16
credentials로 쿠키 공유하기
10 : 22
내 로그인 정보 매번 불러오기
13 : 14
게시글 불러오기
30 : 49
게시글 좋아요
18 : 08
게시글 제거 / 닉네임 변경
15 : 47
팔로우 / 언팔로우
25 : 27
이미지 업로드를 위한 multer
21 : 25
express.static 미들웨어
17 : 30
해시태그 등록하기
06 : 46
리트윗하기
24 : 05
쿼리스트링과 lastId 방식
12 : 26
섹션 5. Next.js 서버사이드렌더링
12 강의 167 : 29
서버사이드렌더링 준비하기
14 : 43
SSR시 쿠키 공유하기
12 : 20
getStaticProps 사용해보기
14 : 05
다이나믹 라우팅
15 : 21
CSS 서버사이드렌더링
08 : 56
사용 게시글, 해시태그 게시글
19 : 26
getStaticPaths
07 : 38
swr 사용해보기
19 : 29
해시태그 검색하기
08 : 05
moment와 next 빌드하기
14 : 31
커스텀 웹팩과 bundle-analyzer
21 : 12
배포 전 Q&A
11 : 43
섹션 6. AWS에 배포하기
9 강의 142 : 01
EC2 생성하기
18 : 09
우분투에 노드 설치하기
11 : 18
우분투에 MySQL 설치하기
10 : 54
pm2 사용하기
15 : 02
프론트 서버 배포하기
17 : 29
도메인 연결하기
14 : 28
S3 연결하기
18 : 03
Lambda로 이미지 리사이징 하기
22 : 21
카카오톡 공유하기 & 강좌 마무리
14 : 17
섹션 7. 보너스
6 강의 101 : 42
nginx + https 적용하기
19 : 16
백엔드에 https 적용하기
13 : 35
nginx와 콘솔 에러 해결하기
15 : 45
게시글 수정하기
24 : 27
빠르게 어드민 페이지 만들기
18 : 15
팔로잉한 게시글만 가져오기
10 : 24

수강 문의

  • hellooguy 프로필 hellooguy
    2020-11-06 87879

    제로초님 안녕하세요 리뉴얼 되기 전에 강좌를 수강했었는데요 현재는 할인 쿠폰을 등록하니까 신규 발급이 제한됐거나 발급 수량이 초과되었다고 나와서 문의드립니다~~! 이전 수강생 할인 적용되는 기간이 다 끝난거겠죵?

    조현영
    조현영
    조현영
    2020-11-06 77659

    네 10월까지만 할인이었습니다. ㅠㅠ

  • 2020솦 프로필 2020솦
    2020-11-01 85539

    안녕하세요 고등학교 소프트웨어 동아리를 하고있는 학생인데요, 저희가 이번 교내 프로젝트로 학생들을 대상으로 공부에 도움을 줄 수 있는 건강한 sns를 만들기로 했는데요, 저희가 예산이 지금 좀 모자라서요.. 혹시 할인 일정이 있다면 알려주실 수 있나요??ㅠㅠ

    조현영
    조현영
    조현영
    2020-11-01 76987

    할인은 인프런 주관이라 저는 잘 모르겠습니다. 보통 명절이나 기념일에 합니다.

  • rkdtpgml6580 프로필 rkdtpgml6580
    2020-10-14 77625

    학교 자율동아리 프로젝트로 저번에 이 강좌가 할인하길래 사려고 했으나 지원 예산이 늦게 나와서 구매를 하지 못 했습니다 혹시 또 할인 행사는 언제 하는지 알 수 있을까요? ㅠㅠ 최대 동아리 예산이 오만원이라 할인 일정 있으면 알려 주세요!

    조현영
    조현영
    조현영
    2020-10-14 74748

    zerohch0@gmail.com으로 메일주세요.

  • 임기현 프로필 임기현
    2020-10-04 72895

    유튜브에서 리액트 무료강의를 보고있습니다. 리액트 무료강의 후의 유료강의가 있다고 하셔서 찾고 있습니다. 이 강의가 맞는건가요??

    조현영
    조현영
    조현영
    2020-10-04 73344

    네 맞습니다~

  • 김지원 프로필 김지원
    2020-09-24 67703

    이강의와 크롤링강의 두개 구입하려고하는데요..! 혹시 올해 크롤링강의도 2020년도 강의 새로내실 생각이 있으신지 궁금합니다!

    조현영
    조현영
    조현영
    2020-09-24 72160

    크롤링 강의는 올해 리뉴얼되지 않습니다~

  • 로날루영 프로필 로날루영
    2020-08-25 55837

    리액트 리뉴얼 전 버전 수강하였는데 혹시 할인 쿠폰 발급해주신다는 메일이나 문자를 받은 거 같은데 리액트 리뉴얼을 새로 들으면 할인 된느 부분이 있나요?

    조현영
    조현영
    조현영
    2020-08-25 67876

    전 버전 강좌 공지사항 확인하시면 쿠폰 코드 있습니다~

다른 수강문의 보기
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스