Thumbnail
BEST 개발 · 프로그래밍 프론트엔드

웹 게임을 만들며 배우는 React에 TypeScript 적용하기

(4.8)
24개의 수강평 ∙ 693명의 수강생

38,500원

지식공유자: 조현영
총 36개 수업 (7시간 38분)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
조현영 프로필
타입스크립트 올인원 강좌 Part2. 실전 분석편 공개!
조현영 3달 전

안녕하세요.

타입스크립트 올인원 강좌 Part2. 실전 분석편이 공개되었습니다.

https://inf.run/9XCK

jQuery, Axios, React, Redux, React-Redux, Node, Express 타입을 분석해보고, 모듈 시스템 위주로 공부합니다. 라이브러리 타이핑이 없을 때 직접 타이핑을 해보는 예제도 몇 개 추가했습니다. 혹시 분석을 원하는 라이브러리가 있다면 많은 의견이 모인 라이브러리 위주로 추가로 강좌 찍어서 올리겠습니다.

감사합니다.

제로초 드림.

조현영 프로필
React18버전 타이핑 변경 안내
조현영 4달 전

크게 두 가지 확인한 게 있습니다.

먼저 FC에서 더 이상 children 타이핑을 제공하지 않습니다. props에 직접 children: ReactNode를 넣어서 사용하세요.

FC랑 VFC랑 같아짐에 따라 VFC는 더 이상 쓰이지 않습니다.

useCallback에서도 함수의 매개변수의 타입이 any가 아니게됨에따라 명시적인 타이핑이 필요합니다.

조현영 프로필
webpack-dev-server@4 관련
조현영 9달 전

웹팩 데브 서버 버전 업그레이드에 따라 강좌 영상 1-1, 1-2, 1-5, 2-2가 업데이트 되었습니다.

import
{ Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}


...


devServer
: {
devMiddleware: { publicPath: '/dist' },
static: { directory: path.resolve(__dirname) },
hot: true
}

4버전에서는 devServer 옵션이 위와 같이 바뀌었습니다. 깃헙 코드 참고하세요. 다른 버전들도 최신화해두었습니다!

https://github.com/zerocho/ts-react
조현영 프로필
react-router@6 코드 추가
조현영 2021.11.24

https://github.com/ZeroCho/ts-react/tree/master/react-router

react-router 6 코드를 요청하신 수강생분이 계셔서 코드 업데이트 했습니다.

react-router@5와 많이 달라졌습니다. reach-router와 통합했고, remix라는 react 기반 프레임워크에 쓰기 위해 많이 변경한 것 같습니다.

Switch, render, exact, children, component, useHistory, useRouteMatch 등이 전부 사라졌습니다.

Routes, element, useNavigate 등으로 대체되었습니다.

한 가지 주목할 만한 차이점은 더 이상 class 문법을 지원하지 않는 것입니다. 살짝 꼼수를 써야 class에서 사용할 수 있습니다(아직도 class 쓰는 분이 계신지를 모르겠지만요...)