25%
66,000원
중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.
[웹 개발, 프론트엔드] 강의입니다.
리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 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 사용)는 보너스!
직접 만들어보세요!
로그인, 게시글 작성, 좋아요
이미지 업로드, 댓글, 리트윗
인피니트 스크롤링, 팔로우, 언팔로우
해시태그 검색, 유저 프로필
질문에 빠르게
대답해 드립니다.
제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드려요.
강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부해 보세요.
내용을 이해하기에 더 도움이 될 거예요!
지식공유자를 소개합니다.
연관 강의
Vue로 Nodebird SNS 만들기
Vue로 만드는 풀스택 SNS 강좌!
Vue로 만드는 풀스택 SNS 강좌!
지식공유자가 알려주는
강의 수강 꿀팁!
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
이런 분들께
추천드려요!
리액트 Hooks나 Next같이 리액트를 응용하고 싶은 분
풀스택 개발에 관심있는 분
프론트엔드 개발자 지망생
Next9버전의 변경점이 궁금하신 분.
📚
선수 지식,
필요한가요?
선수 지식,
필요한가요?
HTML, CSS 지식
자바스크립트 최신 문법 지식
제로초의 리액트 무료 강좌 시청
안녕하세요
조현영 입니다.
조현영 입니다.
– Node.js교과서 저자
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중
– 오늘의픽업 CTO(카카오모빌리티에 엑싯)
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중
– 오늘의픽업 CTO(카카오모빌리티에 엑싯)
커리큘럼
총 93
개 ˙ 22시간 47분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Hello, Next.js
7
강 ∙ 1시간 18분
리뉴얼 강좌 소개
미리보기
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
강 ∙ 1시간 47분
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
강 ∙ 2시간 48분
리덕스 설치와 필요성 소개
미리보기
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
강 ∙ 3시간 23분
redux-thunk 이해하기
13:33
saga 설치하고 generator 이해하기
10:40
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
강 ∙ 6시간 38분
노드로 서버 구동하기
미리보기
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
강 ∙ 2시간 47분
서버사이드렌더링 준비하기
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
강 ∙ 2시간 22분
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
강 ∙ 1시간 41분
nginx + https 적용하기
미리보기
19:16
백엔드에 https 적용하기
13:35
nginx와 콘솔 에러 해결하기
15:45
게시글 수정하기
24:27
빠르게 어드민 페이지 만들기
미리보기
18:15
팔로잉한 게시글만 가져오기
10:24
강의 게시일 : 2020년 07월 07일
(마지막 업데이트일 : 2020년 11월 11일)
수강평
총 131개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
131개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
현업 프론트엔드 개발자로 백엔드 개발을 어려워 했었고, 배포를 해보고 싶었지만 막연한 두려움 때문에 시작하지 못했었습니다.
그런데 이 강의를 통해서 직접 배포도 해보고, 백엔드 작업도 해서 정말 좋았습니다!
강의를 들으시는 분들 경우 redux와 saga 수업 들으실때, 어느 정도 패턴에 익숙해 지시면 제로초님이 redux, saga 작업 하기전에 미리 멈춰놓고 프론트에서 redux와 saga, backend router 작업을 미리 해보시고 강의를 들으면 좋을 것 같습니다^^!
2020-08-30
안녕하세요! 제로초님 수업듣고 블록체인 회사에 취업도 했고, 따로 제 프로젝트 홍보도 할 겸 해서 수강평을 작성하게 되었습니다:) 현재도 회사 다니면서 유지보수중인 프로젝트 먼저 공개하겠습니다! 여기 쓴 노드버드랑 거의 동일한 스택인데 타입스크립트, Nest가 추가됐어요!
https://musicsseolprise.com 여기 들어오시면 됩니다! 프로젝트 주제이신 분이 방송 나오셔서 홍보도 할 겸 해서 수강평 쓰게 되었어요☺️
제가 공개할 프로젝트는 프론트에 한해서 노드버드 강의만 잘 이해해도 충분히 할 수 있는 난이도에요! 백앤드는 Nest.js를 따로 공부하셔야 하구요.
저는 전공자였지만 학부 시절 마지막 학기 때 들은 데이터베이스를 제외하고 방황을 많이 했어서 학점도 좋지 않고, 비전공자랑 베이스가 차이가 없었다고 보시면 됩니다.
일단 강의의 가장 큰 장점은 질문답변! 전공자지만 대학을 늦게 들어가서 인맥이 부족했어요. 그래서 라이브 강의하실때나 인프런 질문이나 열심히 올리면 답변 너무 친절하게 달아주셨어요. 덕분에 리눅스까지 같이 공부해서 이번 회사 들어가는데 큰 도움이 되었습니다!
그리고 프론트앤드는 변화가 너무 빨라요. 그래서 공부하실 때 라이브러리를 왜 쓰시는지 스스로 질문 해보시고 그래도 안 풀리시면 다른 라이브러리도 찾아보시고 질문을 활용해주시면 실력이 많이 느실거에요!
개인적으로 저는 취준생이라면 상태관리를 Recoil.js를 하시는거 추천드려요. 리덕스는 사실 사가까지 하시면 코드량이 너무 많아져서 생산성이 떨어지거든요. 그리고 Nest.js는 나중에 강의로도 올려주실거지만 사실 사전에 익스프레스를 공부하시는게 더 좋아서 공부해보시고 리팩토링으로 질문하시면서 공부하시는거 추천드려요!
참고로 저는 추가로 타입스크립트를 공부 해서 짠 코드를 전부 다 타입스크립트로 교체했습니다! 그리고 스타일 라이브러리는 다른거 썼구요. 저도 리덕스는 썼다가 제거하고 swr로 ajax를 구현했습니다. 그리고 무한스크롤은 intersection observer라고 브라우저 내장 api를 썼구요.
어째튼 바쁘신데 질문 항상 친절하게 달아주셔서 제로초님 정말 감사합니다!!
2021-05-23
JavaScript 일도 모르는 비개발자였습니다.
유툽 제로초 채널통해서
게임으로 배우는 JavaScript 자스스톤까지 듣고
빨리 리액트 시작하고 싶은 마음에 리액트 초급강좌로 개념만 후딱 터득하고 이거 들었어요. 원리 중심으로 설명하시는 스탈이라 관심만 있다면 비전공자가 들어도 따라오실수 있습니다. 문법에 대한건 중간중간 구글에 검색해서 알면되니까요. 그리고 질문에 답변 빨리 달아주시는 것도 큰 길라잡이가 되었습니다.
2020-07-16
강의 구매 고민하시면서 이 글을 보신다면 당장 수강하세요 후회하지 않습니다.
안녕하세요 이 강의를 듣고 취업하게 되었습니다.
이 강의를 수강한 뒤나 수강하면서 토이 프로젝트를 정하고 실행하세요.
그리고 기록하는 습관이 있으면 좋습니다. 또는 개발 블로그를 만드세요.
강의를 수강하면서 모르는 부분은 꼭 기록하세요.
개발 블로그에는 완전히 이해하고, 내 것으로 만들었다는 마음으로 쓰면 도움이 될 겁니다.
제 스토리를 다 풀고 싶지만 너무 길어져서...
제가 취업하기까지 학습 순서는
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
강의 만족스럽습니다.
이해하기 쉽게 설명해 주시고
서비스도 잘 동작합니다.
saga로 완강 후 toolkit으로 변경해 봐야 겠어요. 샘플로 하나 해보니 잘되네요.
아직도 Backend SSR 배포 등 남아 있어 즐겁네요.
즐겁게 완강할께요.! 감사합니다.
2021-01-03
조현영님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
배달앱 클론코딩[with React Native]
₩71,500
Slack 클론 코딩[실시간 채팅 with React]
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
비전공자를 위한 진짜 입문 올인원 개발 클래스
Vue.js 끝장내기 - 실무에 필요한 모든 것
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
