웹 게임을 만들며 배우는 React
웹 게임을 만들며 배우는 React
수강정보
(56개의 수강평)
3019명의 수강생
무료
지식공유자 : 조현영
64회 수업 · 총 12시간 38분 수업
기간 : 평생 무제한 시청
수료증 : 미발급 강의
수강 난이도 : 초급

이 강의는

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

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

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

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


이런 걸 배워요

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

도움 되는 분들

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

선수 지식

  • 자바스크립트 최신 문법

공개 일자

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

지식공유자 소개

– Node.js교과서 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중 
– 스타트업 CTO
– 글로벌SW전담개발자

5.0
56개의 수강평
default_profile.png
김흰둥이 1일 전
클래스와 훅을 자유롭게 바꿀 수 있게 되었습니다
image
박한라산 2달 전
지금 다른 유료 리액트 수업 결제해서 듣고 있는데 정말로 너무너무 하기가 싫더라구요😫😫😫 그래서 이 강의나 들어볼까 해서 보고 있는데 너무 재미있어요 게다가 무료라니...💛 유료강의 환불할까봐요.... 이거 듣고 트위터짝퉁 유료 수업 결제하러 갑니다
default_profile.png
tunion00 14일 전
약 4명의 강사님들의 React강의를 들었는데 단연 최고입니다. 초보자가 이해하기 가장 쉽게 설명하며 이론설명뿐 아니라 예제를 통해 실제로 써볼 수 있고 오류도 같이 내면서 쉽고 재미있게 학습이 가능합니다. 제 리액트 강좌 원픽이에요. 앞으로도 좋은 강의 많이 만들어주세요 :)

교육과정

모두 펼치기 64 강의 12시간 38분
섹션 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 강의 131 : 22
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. 숫자야구
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 유튜브 재생목록 확인해주세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스