Thumbnail
BEST 개발 · 프로그래밍 웹 개발
[리뉴얼] React로 NodeBird SNS 만들기
(5.0)
58개의 수강평 ∙ 1245명의 수강생
88,000원

월 17,600원

5개월 할부 시
지식공유자 : 조현영
총 93개 수업˙총 22시간 48분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
내 목록 추가 824 공유
중급자를 위해 준비한
[웹 개발, 프레임워크 및 라이브러리] 강의입니다.

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 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전담개발자
커리큘럼 총 93 개 ˙ 22시간 48분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Hello, Next.js
리뉴얼 강좌 소개 미리보기 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 화면 만들기
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 연동하기
리덕스 설치와 필요성 소개 미리보기 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 연동하기
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. 백엔드 노드 서버 구축하기
노드로 서버 구동하기 미리보기 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 서버사이드렌더링
서버사이드렌더링 준비하기 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에 배포하기
EC2 생성하기 미리보기 18:09
우분투에 노드 설치하기 11:18
우분투에 MySQL 설치하기 10:54
pm2 사용하기 15:02
프론트 서버 배포하기 17:29
도메인 연결하기 14:28
S3 연결하기 18:03
Lambda로 이미지 리사이징 하기 22:21
카카오톡 공유하기 & 강좌 마무리 14:17
섹션 7. 보너스
nginx + https 적용하기 미리보기 19:16
백엔드에 https 적용하기 13:35
nginx와 콘솔 에러 해결하기 15:45
게시글 수정하기 24:27
빠르게 어드민 페이지 만들기 미리보기 18:15
팔로잉한 게시글만 가져오기 10:24
강의 게시일 : 2020년 07월 07일 (마지막 업데이트일 : 2020년 07월 20일)
수강평 총 58개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
58개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
OCK Sam thumbnail
현업 프론트엔드 개발자로 백엔드 개발을 어려워 했었고, 배포를 해보고 싶었지만 막연한 두려움 때문에 시작하지 못했었습니다. 그런데 이 강의를 통해서 직접 배포도 해보고, 백엔드 작업도 해서 정말 좋았습니다! 강의를 들으시는 분들 경우 redux와 saga 수업 들으실때, 어느 정도 패턴에 익숙해 지시면 제로초님이 redux, saga 작업 하기전에 미리 멈춰놓고 프론트에서 redux와 saga, backend router 작업을 미리 해보시고 강의를 들으면 좋을 것 같습니다^^!
2020-08-30
이하규 thumbnail
리뉴얼 이전 버전에 비해 내용 진행이 훨씬 매끄럽게 발전한게 느껴져서 좋습니다.
2020-07-19
소라연 thumbnail
강의 만족스럽습니다. 이해하기 쉽게 설명해 주시고 서비스도 잘 동작합니다. saga로 완강 후 toolkit으로 변경해 봐야 겠어요. 샘플로 하나 해보니 잘되네요. 아직도 Backend SSR 배포 등 남아 있어 즐겁네요. 즐겁게 완강할께요.! 감사합니다.
2021-01-03
Choi Boo thumbnail
강의 구매 고민하시면서 이 글을 보신다면 당장 수강하세요 후회하지 않습니다. 안녕하세요 이 강의를 듣고 취업하게 되었습니다. 이 강의를 수강한 뒤나 수강하면서 토이 프로젝트를 정하고 실행하세요. 그리고 기록하는 습관이 있으면 좋습니다. 또는 개발 블로그를 만드세요. 강의를 수강하면서 모르는 부분은 꼭 기록하세요. 개발 블로그에는 완전히 이해하고, 내 것으로 만들었다는 마음으로 쓰면 도움이 될 겁니다. 제 스토리를 다 풀고 싶지만 너무 길어져서... 제가 취업하기까지 학습 순서는 1. 제로초 Node 크롤링 (자바스크립트 뭣도 모를 때) 2. 자바스크립트 (계속 반복 학습하고 인프런 위주로 공부했습니다.) 3. 제로초, 캡틴판교 vue (살짝 맛만 봄, 지금 vue로 프로젝트 하라하면 못함) 4. 생활코딩 react, redux (유튜브) 5. John Ahn 리액트 시리즈 (인프런) 6. 제로초 [리뉴얼] react nodebird 7. nextjs 토이프로젝트 (제일 중요!! 인생의 전환점) 8. github 잔디 관리 9. 개발블로그 10. 이력서, 포트폴리오 관리 11. 면접 및 취업 제대로 취업하기 위해 준비한 기간이 생각보다 짧은데(4개월?) 뭔가 좀 많이한 느낌도 들긴합니다. 공부를 많이할 수 있었던 계기가 금토일 야간 알바하면서 일 없을 때 계속 공부해왔다가, 코로나로 장사 안 되서 알바 못나갈 때 그때 공부 엄청한거 같습니다. 꼭 이 강의만 봐서 취업하진 않았지만 이 강의를 수강함으로써 취업하기 위해 도움이 많이 되었습니다. 아마 이 강의가 없었다면 다른 알바 일하면서 계속 공부하고 있을거라 생각합니다. 이 강의를 보고 나시면 어떤 사이트든 만들 수 있는 자신감이 생깁니다. 파이팅!!
2020-10-21
이룸
next.js 토이프로젝트는 어디서 수강하신건가요?
2021-02-08
Choi Boo
이룸님 답변이 많이 늦었네요 알람이 안 와서 답글이 달린 줄도 몰랐습니다. 토이 프로젝트는 클론 코딩이랑 유사한데 강의로 듣지 않고 특정 사이트 정해서 하나하나 클론 했습니다.
2021-02-25
조도미에 thumbnail
JavaScript 일도 모르는 비개발자였습니다. 유툽 제로초 채널통해서 게임으로 배우는 JavaScript 자스스톤까지 듣고 빨리 리액트 시작하고 싶은 마음에 리액트 초급강좌로 개념만 후딱 터득하고 이거 들었어요. 원리 중심으로 설명하시는 스탈이라 관심만 있다면 비전공자가 들어도 따라오실수 있습니다. 문법에 대한건 중간중간 구글에 검색해서 알면되니까요. 그리고 질문에 답변 빨리 달아주시는 것도 큰 길라잡이가 되었습니다.
2020-07-16
88,000원

월 17,600원

5개월 할부 시
내 목록 추가 824 공유
지식공유자 : 조현영
총 93개 수업˙총 22시간 48분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스