인프런 업데이트 소식 🔨👷🏼‍♂️
React로 NodeBird SNS 만들기

React로 NodeBird SNS 만들기

(9개의 수강평)

291명의 수강생

77,000원

평생
중급
수료증
111회 수업, 총 23시간 39분
위시리스트 추가

이런 걸 배울 수 있어요

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

제로초의 React로 배우는 20시간짜리(어마어마) 풀스택 강좌!

트위터와 비슷한(이라고 쓰고 짝퉁이라 읽는다) 제로초의 시그니처 프로젝트 NodeBird SNS를 만들어보며,

Next.js(SSR) + React Hooks + Redux + Redux saga + Ant Design + Styled Components + Node + Express + Sequelize(MySQL)를 배웁니다.

검색엔진 최적화와 AWS 배포(간단하게 EC2 + Lambda + S3 + Route53 사용)는 보너스!

(이 강좌는 시리즈이며 추후 Vue, TS, GraphQL, MobX등을 사용한 다른 버전의 NodeBird도 제작됩니다.)

 

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

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

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

연관된 강좌

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

Vue로도 만들어 볼까요?

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

참고 사항

수강 대상

  • 리액트 Hooks나 Next같이 리액트를 응용하고 싶은 분
  • 풀스택 개발에 관심있는 분
  • 프론트엔드 개발자 지망생

선수 지식

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

지식공유자 소개

조현영

– Node.js교과서 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroChoTV로 방송중 
– 전 스타트업 CTO

교육과정

모두 펼치기 111 강의 23시간 39분
섹션 0. Hello, Next.js
7 강의 79 : 23
1-1. 프로젝트 구조와 배우는 것들
11 : 34
1-2. next와 eslint 설치하기
11 : 47
1-3. next 라우팅 시스템
12 : 10
1-4. ant design 적용하기
13 : 12
1-5. 기본 페이지들 만들기
07 : 42
1-6. 회원가입 폼 만들기
11 : 50
1-7. 회원가입 state와 custom hook
11 : 08
섹션 1. SNS 화면 만들기
7 강의 87 : 53
2-1. _app.js로 레이아웃 분리하기
15 : 27
2-2. prop-types
13 : 18
2-3. antd 그리드 시스템
13 : 00
2-4. 커스텀 훅 재사용하기
12 : 17
2-5. 메인 화면 만들기
11 : 47
2-6. 프로필 화면 만들기
07 : 53
2-7. 컴포넌트 분리하기
14 : 11
섹션 2. 리덕스 익히기
9 강의 96 : 02
3-1. redux 주요 개념 소개
09 : 20
3-2. 첫 리듀서 만들기
13 : 16
3-3. 불변성과 리듀서 여러 개 합치기
09 : 36
3-4. redux와 react 연결하기
11 : 02
3-5. redux devtools 사용하기
10 : 43
3-6. react-redux 훅 사용하기
10 : 24
3-7. react-redux connect
05 : 06
3-8. dummy 데이터로 리덕스 사용하기
13 : 06
3-9. 리액트 state와 리덕스 state
13 : 29
섹션 3. 리덕스 사가 배우기
16 강의 175 : 34
4-1. 리덕스 사가의 필요성과 맛보기
16 : 41
4-2. 사가 미들웨어 리덕스에 연결하기
11 : 01
4-3. ES2015 제너레이터
10 : 50
4-4. 사가의 제너레이터 이해하기
09 : 42
4-5. 사가에서 반복문 제어하기
10 : 34
4-6. takeEvery, takeLatest
10 : 03
4-7. fork, call, 사가 총정리
09 : 46
4-8. 사가 패턴과 Q&A
12 : 28
4-9. eslint-config-airbnb와 코드 정리
10 : 24
4-10. redux state와 action 구조 잡기
12 : 28
4-11. 로그인 리덕스 사이클
11 : 23
4-12. 회원가입 리덕스 사이클
05 : 47
4-13. 게시글 작성 리덕스 사이클
12 : 33
4-14. next Router로 페이지 이동하기
04 : 15
4-15. 댓글 컴포넌트 만들기
10 : 47
4-16. 댓글 작성 리덕스 사이클
16 : 52
섹션 4. 백엔드 서버 만들기
17 강의 234 : 32
5-1. 백엔드 서버 구동에 필요한 모듈들
11 : 42
5-2. HTTP 요청 주소 체계 이해하기
14 : 19
5-3. Sequelize와 ERD
14 : 49
5-4. 테이블간의 관계들
12 : 45
5-5. 시퀄라이즈 Q&A와 DB 연결하기
15 : 31
5-6. 백엔드 서버 API 만들기
14 : 26
5-7. 회원가입 컨트롤러 만들기
11 : 52
5-8.실제 회원가입과 미들웨어들
12 : 50
5-9. 로그인을 위한 미들웨어들
09 : 17
5-10. passport와 쿠키, 세션 동작 원리
10 : 20
5-11. passport 로그인 전략
13 : 06
5-12. passport 총정리와 실제 로그인
21 : 02
5-13. 다른 도메인간에 쿠키 주고받기
10 : 11
5-14. include와 as, foreignKey
11 : 24
5-15. 로그아웃과 사용자 정보 가져오기
18 : 47
5-16. 게시글 작성과 데이터 관계 연결하기
19 : 19
5-17. 게시글 불러오기
12 : 52
섹션 5. 기능 완성해나가기
20 강의 286 : 24
6-1. 해시태그 링크로 만들기
13 : 16
6-2. next와 express 연결하기
13 : 23
6-3. getInitialProps로 서버 데이터 받기
23 : 03
6-4. 해시태그 검색, 유저 정보 라우터 만들기
17 : 11
6-5. Link 컴포넌트 고급 사용법
14 : 00
6-6. 댓글 작성, 댓글 로딩
24 : 48
6-7. 미들웨어로 중복 제거하기
05 : 45
6-8. 이미지 업로드 프론트 구현하기
12 : 22
6-9. multer로 이미지 업로드 받기
10 : 02
6-10. express.static과 이미지 제거
07 : 47
6-11. 폼데이터로 게시글 올리기
11 : 06
6-12. 게시글 이미지 표시하기
08 : 13
6-13. react-slick으로 이미지 슬라이더 구현
18 : 00
6-14. 게시글 좋아요, 좋아요 취소
22 : 59
6-15. 리트윗 API 만들기
14 : 39
6-16. 리트윗 프론트 화면 만들기
13 : 17
6-17. 팔로우, 언팔로우
13 : 55
6-18. 다른 리듀서 데이터 조작하기
06 : 10
6-19. 프로필 및 데이터 로딩하기
22 : 20
6-20. 닉네임 수정하기
14 : 08
섹션 6. 서버 사이드 렌더링
18 강의 243 : 14
7-1. 서버 사이드 렌더링(SSR)
13 : 18
7-2. SSR을 위해 쿠키 넣어주기
11 : 59
7-3. 리덕스 사가 액션 로깅하기
08 : 26
7-4. SSR에서 내 정보 처리하기
11 : 58
7-5. 회원가입 리다이렉션과 포스트 제거
19 : 36
7-6. 페이지네이션
11 : 56
7-7. 더보기 버튼
10 : 34
7-8. 인피니트 스크롤링
18 : 02
7-9. 쓰로틀링(throttling)
19 : 33
7-10. immer로 불변성 쉽게 쓰기
16 : 20
7-11. 프론트 단에서 리덕스 액션 호출 막기
06 : 14
7-12. 개별 포스트 불러오기
14 : 32
7-13. react-helmet으로 head 태그 조작하기
13 : 06
7-14. react-helmet SSR
13 : 47
7-15. styled-components
15 : 08
7-16. styled-components SSR
06 : 38
7-17. 기타 기능 구현과 Q&A
16 : 24
7-18. 폴더 구조와 _error.js
15 : 43
섹션 7. AWS에 배포하기
17 강의 216 : 47
8-1. favicon 서빙과 prefetch
06 : 21
8-2. next.config.js
06 : 33
8-3. next-bundle-analyzer
13 : 36
8-4. tree shaking 예제와 gzip
14 : 24
8-5. 최적화 예제 1
08 : 21
8-6. 최적화 예제 2
12 : 55
8-7. 최적화 예제 3
11 : 15
8-8. 배포전 마지막 준비(IE, 에러 표시)
16 : 37
8-9. ec2 생성, 접근하기
11 : 24
8-10. node, mysql 설치하기
09 : 58
8-11. 프론트 서버 구동하기
14 : 36
8-12. pm2 서버 구동과 MySQL 에러 해결
17 : 50
8-13. 도메인 연결하기
12 : 15
8-14. S3에 이미지 업로드
17 : 34
8-15. 프론트, 백엔드 쿠키 통일하기
07 : 15
8-16. lambda 사용해보기
12 : 16
8-17. lambda 배포와 마무리
23 : 37

공개 일자

2019년 6월 2일 (마지막 업데이트 일자 : 2019년 9월 4일)

수강 후기

5.0
9개의 수강평
ryu sin 3달 전
정말 좋은 강좌입니다 : ) 매우 테크니컬한 부분을 배울 수 있고, 강사님의 설명도 친절합니다.
LUA 2달 전
강의가 나올수록 완성도나 듣는사람을 고려하는 편집이나 전반적으로 점점 발전하네요! 많은 도움 되었습니다