Thumbnail
BEST
개발 · 프로그래밍 풀스택

React로 NodeBird SNS 만들기 대시보드

(4.9)
54개의 수강평 ∙  911명의 수강생
공개되지 않은 강의로
수강이 제한됩니다.
지식공유자: 조현영
총 111개 수업 (23시간 39분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공

중급자를 위해 준비한
[풀스택, 웹 개발] 강의입니다.

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

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

강좌 리뉴얼 공지

안녕하세요. 오늘(6.2)부터 유튜브에서 리액트 노드버드 리뉴얼 강좌가 시작됩니다.

1달 정도 촬영할 예정이고 7월 초에 새로운 강좌로 인프런에 등록될 예정입니다.

기존 구버전 강좌 구매하신 분들께는 신규 강좌 50% 할인 쿠폰이 지급될 것입니다.

주요한 변경 사항은 next@9, antd@4, next-redux-wrapper@6, node@14 사용입니다.

구버전 강좌에 많은 질문들이 달렸는데 이에 대한 답변들을 강좌에 좀 더 명확하게 반영해드릴 예정입니다.

제로초의 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도 제작됩니다.)

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

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

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

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

연관된 강좌

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

Vue로도 만들어 볼까요?

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

참고 사항

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트 Hooks나 Next같이 리액트를 응용하고 싶은 분
풀스택 개발에 관심있는 분
프론트엔드 개발자 지망생
📚
선수 지식,
필요할까요?
HTML, CSS 지식
자바스크립트 최신 문법 지식
제로초의 리액트 무료 강좌 시청

안녕하세요
조현영 입니다.
조현영의 썸네일

제 강의의 장점은 Q&A입니다. 24시간 이내에 무조건 답변드립니다! 다만 여러분들도 질문을 잘 해주셔야 합니다.

https://www.zerocho.com/lecture

제로초 강의 전체 로드맵

 

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 개발파트장)
- 스모어톡 CTO

커리큘럼 총 111 개 ˙ 23시간 39분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Hello, Next.js
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 화면 만들기
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. 리덕스 익히기
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. 리덕스 사가 배우기
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. 백엔드 서버 만들기
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. 기능 완성해나가기
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. 서버 사이드 렌더링
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에 배포하기
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년 06월 03일 (마지막 업데이트일 : 2019년 06월 06일)
수강평 총 54개
수강생분들이 직접 작성하신 수강평입니다.
4.9
54개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
LUA thumbnail
5
강의가 나올수록 완성도나 듣는사람을 고려하는 편집이나 전반적으로 점점 발전하네요! 많은 도움 되었습니다
2019-06-29
KYUNG TAE BAE thumbnail
4
리엑트의 응용부분을 체계적으로 배울 수 있습니다. 다만 조금 양이 많아서 전부 학습하는데는 조금 시간이 필요합니다.. 하지만 실력향상에는 정말 많은 도움이 되었습니다. 감사합니다 :)
2021-02-01
ryu sin thumbnail
5
정말 좋은 강좌입니다 : ) 매우 테크니컬한 부분을 배울 수 있고, 강사님의 설명도 친절합니다.
2019-06-08
박찬수 thumbnail
5
강의 퀄리티는 제가 들어본 한국강의 중 최강입니다. 다만 해외 강의들처럼 매 강의마다 깃헙에 커밋하여 코드를 볼수 있다면 더 최강이 될 것 같네요! 제로초님 강의, 블로그 감사합니다!
2019-10-20
Dooyoung Ruy thumbnail
5
클론코딩 강의중 이렇게 가성비 좋은 강의는 또 없을 겁니다 필요한 내용으로 부족함 없이 구성되어 있어 정말 큰 도움 되었습니다 프론트엔드 개발자로 무엇을 해야할지 고민 된다면 제로초님 강의부터 수강하세요 후회없이 완강 할 수 있을겁니다
2020-01-12