웹 게임을 만들며 배우는 React에 TypeScript 적용하기
웹 게임을 만들며 배우는 React에 TypeScript 적용하기
수강정보
(5개의 수강평)
171명의 수강생
스킬태그 #React, #TypeScript, #웹 개발
38,500원
지식공유자 : 조현영
36회 수업 · 총 7시간 40분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상

이 강의는

리액트로 만든 웹 게임과 React Router, Redux, MobX에 타입스크립트를 붙여보면서 리액트와 타입스크립트를 같이 사용해봅시다.

리액트로 웹 게임을 만들고 타입스크립트를 붙여보는 예제를 통해
안정적인 리액트 프로그래밍을 학습해 봅니다.

리액트 + 타입스크립트
웹게임 예제로 실무에 적응하세요!

웹 게임을 만들며 배우는 React의 후속작으로 같은 게임을 타입스크립트를 적용하여 만들어봅니다.
또, 웹 게임만 타이핑하면 아쉬우니까 리액트와 자주 같이 쓰이는 React Router, Redux, MobX에 대한 타이핑도 배워봅니다. Class와 Hooks 문법 모두 같이 타이핑합니다.

타입스크립트를 붙임으로써 더더욱 안정적React 프로그래밍이 가능해집니다.

🌈 강의 예제 미리보기

구구단, 끝말잇기 👉 숫자 야구, 반응속도 체크 👉 가위바위보, 로또추첨기 👉 틱택토 👉 지뢰찾기 웹게임을 통해
리액트에 타입스크립트를 적용하는 법을 학습해봅니다.

🛠 여기서 다루는 툴

  1. 구글 크롬 브라우저
  2. Visual Studio Code (또는 웹스톰)

제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드립니다. 단순히 강좌만 시청하는 것보다는 강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부하시면 많은 도움이 됩니다. 강좌 내용에서 설명이 부족하거나 이해가 안 가는 부분이 있다면 언제든지 질문주세요. 다른 분들이 이미 했던 질문을 읽어보시는 것도 도움이 됩니다.

🙋🏻‍♂️ 예상되는 질문 QnA

Q. 타입스크립트 몇 버전을 사용하나요?
A. 3.8버전을 사용합니다. 그 이후 버전을 설치하셔도 무방합니다.

Q. 소스코드는 어디에 있나요?
A. https://github.com/zerocho/ts-react 

Q. 리액트, 리덕스 개념도 다루나요?
A. 이 부분은 아래 선수과목을 먼저 듣고 오셔야 합니다. 이 강좌에는 타이핑을 붙이는 것만 설명하지, 그 자체의 개념은 설명하지 않습니다.

Q. 선수과목이 있나요?
A. 웹게임을 만들며 배우는 React 강좌, 웹게임을 만들며 배우는 TypeScript를 보시고 오셔야 됩니다. TypeScript 강좌는 유료이므로 공식문서를 보시는 것으로 어느 정도 대체 가능합니다.

이런 걸 배워요

  • React + TypeScript
  • DefinitelyTyped
  • React Router 타이핑
  • Redux 타이핑
  • MobX 타이핑

도움 되는 분들

  • 타입스크립트를 배웠으나 리액트에 어떻게 붙여야할지 모르겠는 분
  • 타입스크립트와 리액트를 실무에서 사용하실 분
  • 남의 라이브러리 타이핑에 두려움을 갖고 계신 분

선수 지식

  • 자바스크립트 문법 지식
  • 리액트 웹게임 강좌
  • 타입스크립트 웹게임 강좌
  • Redux, MobX 기초 개념

공개 일자

2020년 2월 22일 (마지막 업데이트 일자 : 2020년 2월 24일)

지식공유자 소개

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

4.8
5개의 수강평
default_profile.png
000 Jay 16일 전
리액트 무료강의 이후 복습겸 타입스크립트 배우기 좋은 강좌였습니다.
default_profile.png
차영부 9시간 전
뿌듯했어요
default_profile.png
꽃갈피 7달 전
리뷰어로 참여하게 되어 좋은 기회로 평소 듣고싶었던 해당 강의를 무료로 듣게 되었습니다. 먼저 이 강의는 React와 TypeScript에 대한 선행 지식이 있어야 하는 강의입니다. React와 TypeScript의 문법을 가르쳐주는 강의는 아닙니다. 그래서 이에 대한 지식이 아예 없다면 수업을 따라가는데 지장이 있을겁니다. 다만, 제 개인적인 생각으로는 React와 TypeScript 둘 다 기초 수준의 기본적인 문법 정도만 알고 있다면 강의를 듣는 데 큰 어려움은 없으리라 생각됩니다. 제 경우에는 강의 초반에 '생각보다 쉬운데?' 하면서 자신감이 붙었습니다. 물론 모든 내용이 쉽다는 것은 아니고, 듣다 보면 어려운 내용도 있습니다. 특히 Redux 는 어느 정도 지식이 필요합니다. 하지만 저는 Redux 외에 React Router, ContextAPI, MobX는 따로 공부한 적이 없어서 잘 몰랐는데도 불구하고 충분히 강의를 따라갈 수 있었습니다. 예를 들면, 리액트는 강의마다 나오는 내용에 대해 가볍게 개념을 짚어 주시면서 진행하십니다. TypeScript도 가볍게 그리고 반복적으로 설명하고 넘어가 주셔서 기존에 알고 있던 TypeScript 개념을 한 번 더 정리하는 느낌도 들었습니다. (물론 개인차로 설명 안 해주시는 부분도 있을 것입니다) 그리고 제가 이 강의를 선택한 또 다른 이유 중 하나는 Q&A 방이 활성화되어있다는 점인데, 질문 글이 올라오면 빠르게 답변해주시는 부분도 좋았습니다. 쓰다 보니 글이 길어졌는데 지원하고 싶었던 회사에서 React에 TypeScript를 적용하는 과제를 제출해야 했던 적이 있었습니다. 짧은 기간 내에 독학해보려고 했지만 일일이 찾으며 공부하려니 막막함이 느껴졌습니다. 그래서 계속 기초 수준에서 머물렀는데, 이 강좌를 듣고 나서는 이제 큰 어려움을 느끼지 않고 리액트에 타입스크립트를 적용해서 코딩할 수 있게 되었습니다. 그리고 새로운 내용을 접하고 배우니, 개발 실력 향상이 되지 않아 겪었던 슬럼프도 어느 정도 회복되었습니다. 좋은 강의 만들어 주셔서 감사하고, 늘 좋은 일들 가득하시길 바랍니다 :D

교육과정

모두 펼치기 36 강의 7시간 40분
섹션 0. 구구단, 끝말잇기
6 강의 76 : 20
강좌 소개
12 : 40
기본 타입스크립트 세팅하기
12 : 29
이벤트 핸들러, useRef 타이핑
16 : 24
Class State 타이핑
12 : 09
useCallback 타이핑
10 : 56
끝말잇기 Class 타이핑과 Q&A
11 : 42
섹션 1. 숫자야구, 반응속도체크
4 강의 56 : 50
숫자야구 타이핑
11 : 06
Props 타이핑
13 : 30
setTimeout, useRef 타이핑
14 : 52
Class State에서의 주의점
17 : 22
섹션 2. 가위바위보, 로또추첨기
4 강의 46 : 02
useCallback과 keyof, typeof
12 : 07
가위바위보 타이핑하기
12 : 08
로또 추첨기와 FC, useMemo
13 : 20
Class 라이프사이클 타이핑
08 : 27
섹션 3. 틱택토
5 강의 63 : 22
useReducer 타이핑
11 : 36
Dispatch, children
14 : 38
Reducer 타이핑
07 : 24
React JSX 부분 타이핑
18 : 14
Q&A
11 : 30
섹션 4. 지뢰찾기
5 강의 66 : 24
지뢰찾기와 복습
16 : 36
Context API 타이핑
08 : 29
useContext 타이핑
16 : 23
useContext 타이핑2
13 : 22
지뢰찾기 완성과 Q&A
11 : 34
섹션 5. React Router
4 강의 42 : 54
리액트 라우터 타이핑 준비하기
10 : 34
match와 location, history
14 : 22
withRouter
05 : 44
react router hooks
12 : 14
섹션 6. Redux
6 강의 69 : 26
리덕스 구조 잡기
17 : 11
action, reducer 타이핑
12 : 02
리덕스 컴포넌트 타이핑
07 : 31
redux-thunk 타이핑
18 : 14
ThunkDispatch와 immer
09 : 41
redux hooks 타이핑
04 : 47
섹션 7. MobX
2 강의 38 : 57
MobX 세팅하기
17 : 39
MobX 타이핑하기
21 : 18
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스