38,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨웹 게임을 만들며 배우는 React에 TypeScript 적용하기
createRoot
import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; import GuGuDan from './GuGuDan'; ReactDOM.createRoot(document.querySelector('#root')!).render(<GuGuDan />);https://github.com/DefinitelyTyped/DefinitelyTyped/issues/43848createRoot 에러 나길래 이슈에서 해결 방법 찾아서 공유드립니다!
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
babel-loader질문입니다! 왜쓰는지 궁금합니다!
react-typescript강좌 끝말잇기 부분에서 미래에서 온 제로초님께서webpack.config.ts파일에 추가하라고 하신 babel-loader에 관해서 질문이 있습니다.module설정하는 부분에 babel-loader를 추가해주었는데 버전이 업데이트 되면서 왜 이 로더를 추가해야될까요?? 그리고 에러를 해결하는 과정에서 질문이있습니다. module.rules 부분에 순서는 상관없다고 생각해서 ts-loader설정을 먼저 적고 babel-loader를 적어주었습니다. 그러나 아래와 같이 오류가 떳습니다그러나 설정 순서를 바꿔주었더니 해결이 되었는데 어떤 처리과정이 있길래 이 순서를 바꿔주어서 해결을 할 수 있게됬는지 의문입니다.아래는 해결되서 적어놓은 webpack.config.ts파일입니다!import path from 'node:path'; import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import { Configuration as WebpackConfiguration } from "webpack"; import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server"; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } const config: Configuration = { name: 'word-relay-dev', mode: 'development', //after production devtool: 'eval', resolve: { extensions: ['.jsx', '.js', '.tsx', '.ts'], }, entry: { app: './client' }, module: { rules: [ { loader: 'babel-loader', options: { plugins: ['react-refresh/babel'] }, }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: path.join(__dirname, 'node_modules'), },] }, plugins: [ new ReactRefreshPlugin(), new ForkTsCheckerWebpackPlugin() ], output: { filename: '[name].js', path: path.join(__dirname, 'dist'), publicPath: '/dist/', }, devServer: { devMiddleware: { publicPath: '/dist' }, static: { directory: path.resolve(__dirname) }, hot: true } } export default config;
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
undefined 처리
강의에서 computerChoice의 리턴타입에 undefined가 추가되어있는 문제 해결하실때 if() throw new Error(); 사용해서 처리하거나 느낌표(!) 사용하신다했는데 if() throw new Error();로 어떻게 처리하신다는건지 알 수 있을까요? 어떻게 해봐도 해결이 안되네요. ㅠㅠ const rspCoords = { 바위: '0', 가위: '-142px', 보: '-284px', } as const; const scores = { 가위: 1, 바위: 0, 보: -1, } as const; type imgCoords = typeof rspCoords[keyof typeof rspCoords]; const computerChoice = (imgCoords: imgCoords) => { return (Object.keys(rspCoords) as ['바위', '가위', '보']).find(function (v) { return rspCoords[v] === imgCoords; }); };
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
compilerOptions lib 관련
강의에서 lib 옵션 배열에 es5, es2015, es2016, es2017 등 모두 적어두면 좋다고 말씀해주셨는데 스펙에 추가된 문법이나 이런것들을 사용하기 위해서 그렇게 말씀해주신걸로 아는데 다른것들은 작성하지 않고 아래와 같이"lib": ["ESNext", "DOM"],또는 최신 ES2022 작성하면 그 이하의 스펙?들은 작성할 필요 없는거 아닌가요? 그래도 모두 작성해야 하는건가요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
event type 찾기
안녕하세요 다른 기본적인 data type들은 제 의도에 따라 사용하면 되는데, event type 같은 경우는 굉장히 낯설고 그냥 감으로 하는 것 같이 잘 적용했는지 의문이 듭니다.event type을 제대로 적용했는지 확인하는 방법이나 맞게 찾아내 적용하는 방법이 있을까요 ???
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
정확한 type vs 가독성
케바케이겠지만, 가독성이 좀 떨어지더라도 type을 정확하게 표현하는 것이 나중에 프로젝트가 커질 때 도움이 될까요?js로 작성했을 때보다 ts가 가독성이 개인적으로 많이 떨어지더라고요...
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
useRef에 대해 질문드립니다.
자바스크립트는 오버로딩을 지원하지 않는 걸로 알고 있습니다.useRef가 3가지 경우로 나눠서 사용이 가능한 이유가 궁금합니다.
- 해결됨웹 게임을 만들며 배우는 React에 TypeScript 적용하기
tsx파일에서 에러 표시
안녕하세요 제로초님현재 강의를 들으면서 tsx파일로 진행을 하고있는데위 사진과 같이 형식 주석은 Typescript 파일에서만 사용할수 있다고 나오고 아래에 input.focus() 부분은 밑줄조차 뜨지가 않는데 설정을 따로해줘야 하는 부분이 있는걸까요??혹시 setting 파일이위와 같이 되어있는데 이부분을 수정을 해야하는걸까요..?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
Props type 질문드립니다.
const Try: FunctionComponent<{tryInfo: TryInfo}> = ({ tryInfo }) => {...} 대신에 const Try = ({ tryInfo } : TryInfo) => {...} 로 써도 될까요? 둘 중 뭐가 많이 쓰이나요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
webpack.config.ts/ Could not find a declaration file for module '@pmmmwh/react-refresh-webpack-plugin'.
안녕하세요, 강좌를 따라가던 중 오류가 생겨 질문드립니다. 분명 @pmmmwh/react-refresh-webpack-plugin 해당 모듈이 package.json에 설치가 된 것은 확인 했는데 , 자꾸 아래의 에러가 뜹니다. Could not find a declaration file for module '@pmmmwh/react-refresh-webpack-plugin'. 'C:/Users/banan/Documents/공부/training-publish/typescript/ts-react/lecture/node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/index.js' implicitly has an 'any' type.Try `npm i --save-dev @types/pmmmwh__react-refresh-webpack-plugin` if it exists or add a new declaration (.d.ts) file containing `declare module '@pmmmwh/react-refresh-webpack-plugin';`ts(7016) 이런 경우 어떻게 해야할까요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
18버전에서의 ReactDOM.render
18버전에서 컴파일은 정상적으로 되었으나 ReactDOM.render 지원이 안되다는 에러가 나옵니다. 그래서 아래처럼 변경 했는데, 이부분도 다뤄주시면 좋겠습니다. import * as ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')!); root.render( <React.StrictMode> <GuGuDan /> </React.StrictMode> ); 그리고 document.getElementById('root') 라고만 하면 아래 에러가 납니다. 뒤에 명적으로 정의"!" 하니 에러가 안납니다. 왜 그런건지 궁금합니다. 'HTMLElement | null' 형식의 인수는 'Element | DocumentFragment' 형식의 매개 변수에 할당될 수 없습니다. 'null' 형식은 'Element | DocumentFragment' 형식에 할당할 수 없습니다.ts(2345)
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
깃허브에 react-router@6 업데이트 해주신 코드 질문드립니다.
제로초님 안녕하세요, 좋은 강의 만들어주셔서 감사합니다. https://github.com/ZeroCho/ts-react/blob/master/react-router/GameMatcher.tsx react-router@6버전으로 업데이트 해주신 GameMatcher.tsx의 코드를 적용하면 만든 컴포넌트들(게임들)이 렌더링되질 않습니다. 그래서 강의 내용과 비슷하게, @6버전에 맞게 useParams를 사용해 조건분기해서 각 컴포넌트를 리턴해주니 렌더링이 됩니다. (레포지토리의 기존 코드는 주석처리 했습니다) 궁금한점은 <Route path="number-baseball" element={<NumberBaseball />} /> <Route path="rock-scissors-paper" element={<RSP />} /> <Route path="lotto-generator" element={<Lotto />} /> <Route path="index" element={<div>일치하는 게임이 없습니다.</div>} /> react-router-dom의 Route 컴포넌트를 활용해서도 정상적으로 렌더링이 가능한가요? GameMatcher.tsx와 Games.tsx의 Route path를 한참 수정해가며 시도해봤지만 렌더링이 안되네요 ㅠㅠ 감사합니다.
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
2강 끝말잇기 npx webpack 오류가 질의사항
syntaxError를 구글링 해봐도 잘 모르겠습니다 ...
- 해결됨웹 게임을 만들며 배우는 React에 TypeScript 적용하기
Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
<div> <Routes> <Route path="/" render={(props) => <GameMaster {...props}/>}/> <Route path="/game/:name" render={(props) => <GameMaster {...props}/>}/> </Routes> </div> 해당 코드에서 Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. 라는 에러가 계속 뜨는데, 무슨 이유일까요? ㅠㅠ
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
webpack.config.ts import 할 때 에러좀 봐주세요!!
안녕하세요 타이핑 해봤다가 빨간줄이 그여서 깃허브 소스 긁어다 해도 저렇게 에러가 나오는데 어떻게 해결해야할까요?? 플러그인은 다 설치 한 상태입니다. package.json
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
React.FC에 대해 궁금합니다.
안녕하세요~ React.FC에 대해 조금 찾아보니 사용하지 않는 것을 추천한다는 말이 있던데, 상황에 맞게 사용하면 되는 것인지 아니면 사용하지 않는 추세가 맞는 것인지 또한 사용하신 이유가 있는 것인지 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
가위바위보 interval 타입과 이벤트타입에 관한질문
Q1. 제로초님 가위바위보편에서는 interval의 초기값과 타입에 null이 없어서 제가 이렇게 넣어줬는데 강의코드에서 빠진 부분이 맞을까요?? -------------------------------------------------------- Q2. 이벤트에서의 함수에 타입을 부여할때 onClick의 이벤트가 발생한다고 했을때 위와같이 따로 인자가 없거나 아래와 같이 이미 인자에 대한 타입이 정해졌다면 onClick 했을때의 React.MouseEvent 와 같은 이벤트 타입을 따로 어딘가에 부여할 필요는 없는 건가요??
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
npm run dev 실행은 성공적으로 되는데
npm run dev 실행은 성공적으로 되는데 페이지에 렌더가 되지 않습니다.ㅠㅠ 제로초님 깃헙에 올려진 코드로 변경해봤는데 뭐가 문제일까요 client.tsx webpack.config.js tsconfig.json package.json
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
redux 유료강좌를 듣고 와야 되는지 여쭈어보려고 합니다.
강의 초반에 redux에 대해서 미리 공부해오고 redux에 type 붙이는것만 알려주신다고 하셨는데 react 무료강좌에서는 redux에 대해 설명한 것이 없으셨던거 같아서요.. 유로강좌인 redux + mobx 강의를 듣고 와야 되는지 여쭈어보려고 합니다.
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
git 내용과 강의 내용이 달라서 여쭈어봅니다.
안녕하세요 제로초님 강의를 들으면서 진행중인데 git에서 clone한 내용과 강의 내용이 달라서 여쭈어봅니다. 후에 redux나 다른부분에서 변경하는것 같은데 어떤 강의에서 어떤 강의에서 변경하는지 여쭈어보고 싶습니다.