[무료] 웹 게임을 만들며 배우는 React - 인프런

BEST 개발 · 프로그래밍 웹 개발

웹 게임을 만들며 배우는 React

(5.0)109개의 수강평 ∙ 4124명의 수강생

조현영

React 웹 개발 게임개발 Front-End

무료

지식공유자 : 조현영

총 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전담개발자

이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. 구구단 10강 ∙ 1시간 36분

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강 ∙ 2시간 11분

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강 ∙ 2시간 15분

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분

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강 ∙ 1시간 5분

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시간 22분

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강 ∙ 1시간 15분

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시간 55분

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년 06월 17일 (마지막 업데이트일 : 2019년 06월 17일)

수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.

5.0

109개의 수강평

5점

4점

3점

2점

1점

VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

약 4명의 강사님들의 React강의를 들었는데 단연 최고입니다. 초보자가 이해하기 가장 쉽게 설명하며 이론설명뿐 아니라 예제를 통해 실제로 써볼 수 있고 오류도 같이 내면서 쉽고 재미있게 학습이 가능합니다. 제 리액트 강좌 원픽이에요. 앞으로도 좋은 강의 많이 만들어주세요 :)

2020-11-12