[리뉴얼] React로 NodeBird SNS 만들기
[리뉴얼] React로 NodeBird SNS 만들기
수강정보
(8개의 수강평)
245명의 수강생

이 강의는

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

이런 걸 배울 수 있어요

  • 리액트 개발
  • 리덕스&리덕스 사가
  • 리액트 Hooks 사용
  • Styled Components
  • Ant Design
  • SWR
  • 서버 사이드 렌더링
  • 검색 엔진 최적화
  • 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나 Next같이 리액트를 응용하고 싶은 분
  • 풀스택 개발에 관심있는 분
  • 프론트엔드 개발자 지망생
  • Next9버전의 변경점이 궁금하신 분.

선수 지식

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

지식공유자 소개

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

교육과정

모두 펼치기 91 강의 22시간 33분
섹션 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 강의 167 : 17
리덕스 설치와 필요성 소개
13 : 25
리덕스의 원리와 불변성
17 : 07
리덕스 실제 구현하기
14 : 50
미들웨어와 리덕스 데브툴즈
09 : 46
리듀서 쪼개기
08 : 13
더미데이터와 포스트폼 만들기
19 : 43
게시글 구현하기
17 : 05
댓글 구현하기
12 : 45
이미지 구현하기
09 : 37
이미지 캐루셀 구현하기(react-slick)
16 : 02
글로벌 스타일과 컴포넌트 폴더 구조.
17 : 33
게시글 해시태그 링크로 만들기
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 : 13
노드로 서버 구동하기
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 : 06
쿼리스트링과 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 강의 141 : 08
EC2 생성하기
18 : 09
우분투에 노드 설치하기
11 : 18
우분투에 MySQL 설치하기
10 : 54
pm2 사용하기
15 : 02
프론트 서버 배포하기
17 : 29
도메인 연결하기
14 : 28
S3 연결하기
18 : 03
Lambda로 이미지 리사이징 하기
21 : 28
카카오톡 공유하기 & 강좌 마무리
14 : 17
섹션 7. 보너스
4 강의 88 : 25
nginx + https 적용하기
19 : 16
백엔드에 https 적용하기
13 : 35
콘솔 에러 해결하기
15 : 45
게시글 수정하기
39 : 49

공개 일자

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

수강 후기

4.9
8개의 수강평
default_profile.png
이하규 25일 전
리뉴얼 이전 버전에 비해 내용 진행이 훨씬 매끄럽게 발전한게 느껴져서 좋습니다.
default_profile.png
boy pepper 25일 전
기존 html로 마크업하면서 페이지에 기능을 넣는 것과 다르게 리액트는 어떤 식으로 해야하는 지 어렵더라고여... 리액트의 기능은 배웠는데 막상 사이트를 만들려고 하니까 어떻게 시작해야 할지 막막하고 그랬는데 이 강의를 통해 어떻게 작업을 해야하는지 감이 잡혔습니다.
default_profile.png
치구 17일 전
풀스택 개발자가 되고싶은 주니어 개발자입니다! 제로초님 덕분에 노드서버+배포+next 경험을 할 수 있었어요!! 강의 정말 좋았습니다ㅠㅠ 최고에요bb 제가 너무 찬양 한ㄱㅓ 같지만 너무 소름돋게 평소에 개발하면서 궁금했던 내용을 물어보지도 않았는데 강의에서 말씀해주시는거 보고 감탄하면서 봤답니당ㅎ 앞으로도 좋은 강의 기대할게요!! 감사합니다 >_< 참고로 react 에 대한 전반적인 지식이나 경험 후에 듣는게 좋은거같아여!!!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스