Thumbnail
BEST 개발 · 프로그래밍 웹 개발
웹 게임을 만들며 배우는 React
(5.0)
109개의 수강평 ∙ 4124명의 수강생

무료

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

웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React Router, 웹팩, 바벨까지 추가로 배웁니다.

✍️
이런 걸
배워요!
리액트 개발
리액트 Hooks 사용
Context API 사용
바벨&웹팩
React-Router 사용

8개의 간단한 웹게임을 만들어보며 배우는 리액트 강좌입니다.
React Hooks에서부터 Context API까지 최신 API를 활용합니다.

다 배우신 후에는 리액트 유료강좌(SNS 만들기)를 수강하시면 좋습니다.

다양한 웹 게임을 만들어볼까요? :D


지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
리액트를 배우고 싶은 개발자
프론트엔드 개발자 지망생
📚
선수 지식,
필요한가요?
자바스크립트 최신 문법

안녕하세요
조현영 입니다.
조현영의 썸네일
– Node.js교과서 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중 
– 스타트업 CTO
– 글로벌SW전담개발자
커리큘럼 총 64개 ˙ 12시간 38분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 구구단
1-1. 리액트를 왜 쓰는가 미리보기 10:51
1-2. 첫 리액트 컴포넌트 10:43
1-3. HTML 속성과 상태(state) 09:46
1-4. JSX와 바벨(babel) 11:22
1-5. 첫 번째 Q&A 07:11
1-6. 구구단 리액트로 만들기 11:49
1-7. 클래스 메서드 10:47
1-8. Fragment와 기타 팁들 09:57
1-9. 함수형 setState 06:29
1-10. ref 07:51
섹션 1. 끝말잇기
2-1. React Hooks 사용하기 13:48
2-2. Class와 Hooks 비교하기 12:41
2-3. 웹팩 설치하기 15:48
2-4. 모듈 시스템과 웹팩 설정 13:26
2-5. 웹팩으로 빌드하기 14:43
2-6. 구구단 웹팩으로 빌드하기 12:10
2-7. @babel/preset-env와 plugins 15:02
2-8. 끝말잇기 Class 만들기 12:21
2-9. 웹팩 데브 서버와 핫 리로딩 미리보기 09:42
2-10. 끝말잇기 Hooks로 전환하기 11:41
섹션 2. 숫자야구
3-1. import와 require 비교 09:16
3-2. 리액트 반복문(map) 11:42
3-3. 리액트 반복문(key) 10:57
3-4. 컴포넌트 분리와 props 12:12
3-5. 주석과 메서드 바인딩 09:34
3-6. 숫자야구 만들기 17:52
3-7. Q&A 06:56
3-8. 숫자야구 Hooks로 전환하기 08:46
3-9. React Devtools 08:59
3-10. shouldComponentUpdate 08:50
3-11. PureComponent와 React.memo 13:58
3-12. React.createRef 07:12
3-13. props와 state 연결하기 09:45
섹션 3. 반응속도체크
4-1. React 조건문 13:59
4-2. setTimeout 넣어 반응속도체크 13:21
4-3. 성능 체크와 Q&A 11:18
4-4. 반응속도체크 Hooks로 전환하기 11:45
4-5. return 내부에 for과 if 쓰기 05:44
섹션 4. 가위바위보
5-1. 리액트 라이프사이클 소개 14:26
5-2. setInterval과 라이프사이클 연동하기 10:48
5-3. 가위바위보 게임 만들기 09:56
5-4. 고차 함수와 Q&A 07:53
5-5. Hooks와 useEffect 13:48
5-6. 클래스와 Hooks 라이프사이클 비교 08:12
섹션 5. 로또 추첨기
6-1. 로또 추첨기 컴포넌트 14:59
6-2. setTimeout 여러 번 사용하기 11:14
6-3. componentDidUpdate 13:18
6-4. useEffect로 업데이트 감지하기 14:13
6-5. useMemo와 useCallback 15:04
6-6. Hooks에 대한 자잘한 팁들 13:31
섹션 6. 틱택토
7-1. 틱택토와 useRedcuer 소개 12:37
7-2. reducer, action. dispatch의 관계 11:21
7-3. action 만들어 dispatch 하기 13:47
7-4. 틱택토 구현하기 18:06
7-5. 테이블 최적화하기 19:50
섹션 7. 지뢰찾기
8-1. Context API 소개와 지뢰찾기 10:46
8-2. createContext와 Provider 11:12
8-3. useContext 사용해 지뢰 칸 렌더링 15:26
8-4. 왼쪽 오른쪽 클릭 로직 작성하기 20:11
8-5. 지뢰 개수 표시하기 10:20
8-6. 빈 칸들 한 번에 열기 17:25
8-7. 승리 조건 체크와 타이머 18:06
8-8. Context api 최적화 11:39
섹션 8. React-router
유튜브에서 제공합니다. ZeroCho TV 유튜브 재생목록 확인해주세요!
강의 게시일 : 2019년 06월 17일 (마지막 업데이트일 : 2019년 06월 17일)
수강평 총 109개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
109개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
tunion00 thumbnail
약 4명의 강사님들의 React강의를 들었는데 단연 최고입니다. 초보자가 이해하기 가장 쉽게 설명하며 이론설명뿐 아니라 예제를 통해 실제로 써볼 수 있고 오류도 같이 내면서 쉽고 재미있게 학습이 가능합니다. 제 리액트 강좌 원픽이에요. 앞으로도 좋은 강의 많이 만들어주세요 :)
2020-11-12
최영민 thumbnail
좋은 강의 감사합니다
2021-04-16
파괴광선 thumbnail
감사합니다!!
2021-04-12
박한라산 thumbnail
지금 다른 유료 리액트 수업 결제해서 듣고 있는데 정말로 너무너무 하기가 싫더라구요😫😫😫 그래서 이 강의나 들어볼까 해서 보고 있는데 너무 재미있어요 게다가 무료라니...💛 유료강의 환불할까봐요.... 이거 듣고 트위터짝퉁 유료 수업 결제하러 갑니다
2020-09-15
mhr thumbnail
리액트를 애매하게 알고 있어서 들을지 말지 고민을 하다가 빠른 배속으로 해서 정주행 했는데 듣기를 잘 한 것 같습니다. 굉장히 유익하네요.
2021-04-04

무료

내 목록 추가 공유
지식공유자 : 조현영
총 64개 수업˙총 12시간 38분
평생 무제한 수강
수료증 미발급 강의
입문 초급 대상 중급이상
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스