웹 게임을 만들며 배우는 React

웹 게임을 만들며 배우는 React

(9개의 수강평)

1193명의 수강생
무료
지식공유자 · 조현영
64회 수업 · 총 12시간 44분 수업
평생 무제한 시청
수료증 미발급 강의
수강 난이도 '초급'

이런 걸 배울 수 있어요

  • 리액트 개발
  • 리액트 Hooks 사용
  • Context API 사용
  • 바벨&웹팩
  • React-Router 사용

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

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

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


수강 대상

  • 리액트를 배우고 싶은 개발자
  • 프론트엔드 개발자 지망생

선수 지식

  • 자바스크립트 최신 문법

지식공유자 소개

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

교육과정

모두 펼치기 64 강의 12시간 44분
섹션 0. 구구단
10 강의 96 : 46
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. 끝말잇기
10 강의 137 : 10
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. webpack-dev-server와 hot-loader
15 : 30
2-10. 끝말잇기 Hooks로 전환하기
11 : 41
섹션 2. 숫자야구
13 강의 135 : 59
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. 반응속도체크
5 강의 56 : 07
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. 가위바위보
6 강의 65 : 03
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 강의 82 : 19
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. 틱택토
5 강의 75 : 41
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 강의 115 : 05
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
1 강의
유튜브에서 제공합니다. ZeroCho TV 유튜브 재생목록 확인해주세요!

공개 일자

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

수강 후기

5.0
9개의 수강평
조찬형 16일 전
조아요
nodeMoon 17일 전
cra없이 기본적인 웹팩 설정에서부터 리액트 기본 개념까지 잘 배웠습니다 :)
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스