38,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
Ball.tsx 타이핑
안녕하세요 제로초님 현재 부분까지 강의를 듣고 있는데요 Ball.tsx 부분을 타이핑 하다보니 강의에서는 FC (Function Component)로 타이핑을 하셨는데 작성하신 깃허브에 보니 memo로 타이핑이 되어있어서요.. 뒤에 강의에서 따로 바꾸시나요? 아니면 강의가 잘못된건지 여쭈어보려고 합니다.
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
react-router 버젼 업그레이드 변경사항 문의
react-router 버젼 업그레이드로 인한 변경사항 문의 드립니다. 기존 강좌에서 변경점은 어떤부분이 있는지 알고 싶습니다... 영상 수정 부탁드립니다.^^
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
리액트 타입스크립트 공식문서
안녕하세요 제로초님. 혹시 리액트에 대한 타입스크립트 문서는 보통 어디를 참고하는지 알 수 있을까요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
button 클릭 할 떄 마다 더보기/닫기 에러
제로초님 안녕하세요. 제가 button 클릭 할 떄마다 더보기/닫기 버튼을 만들어 주었는데. 처음에는 5개씩 보이도록 설정 해 주고. 더 보기 버튼을 클릭하면 -> 모든 length 만큼 보이도록 설정 해 주었습니다. 그리고 닫기 버튼을 누르면 -> 처음 5개만 보이도록 설정 해 주었구요. 하지만 문제점이 있습니다. 클릭 하면 동작은 합니다. 하지만, 1~2초 있다가 type Error 가 발생합니다. 어디서 잘못 됐는지 잘 모르겠습니다. 아 그리고 처음에 5개 이하로 보일 떈 버튼을 안 보이도록 설정 해 주고 싶은데, 어떻게 코드를 작성 해야 할 지 모르겠습니다. 똑같이 setState 를 만들어서 5개 이하로 보이는 것들은 false 를 만들어 안보이도록 설정 해 주면 될 거 같은데 모르겠네요 에러 발생 구문 입니다. TypeError: setVisible(...) is not a function 46 | 47 | 48 | const showMore = () => { > 49 | visible === 5 ? ( 50 | setVisible(ProductDetail.allergies.length) 51 | ) ( 52 | setexpanded(true) // 제가 작성한 코드 입니다. const [visible, setVisible] = useState(5) const [expanded, setexpanded ] = useState(false); const showMore = () => { visible === 5 ? ( setVisible(ProductDetail.allergies.length) ) ( setexpanded(true) ) : ( setVisible(5) ) ( setexpanded(false) ) return ( {ProductDetail && ProductDetail.allergies?.length ? ProductDetail.allergies.slice(0, visible).map(All => ( <li key={All.id}> {All.displayText}</li> )) : <li>No information.</li>} ) <button type="button" onClick={showMore}> {expanded ? ( <span>close</span> ) : ( <span>see more</span> )} </button> }
- 해결됨웹 게임을 만들며 배우는 React에 TypeScript 적용하기
10강 Class State에서 주의점 강좌에서 궁금한 점이 생겨 질문 드립니다.
this.startTime = new Date().getTime(); this.endTime = new Date().getTime(); 강좌 9분 15초 지점 이 부분 설명하실 때 getTime 메소드의 반환 타입이 number인데 this.startTime, this.endTime의 타입이 number | null로 타입이 지정되는 이유는 타입스크립트의 한계라고 말씀하셨는데 클래스 상단에서 startTime, endTime의 타입을 number | null로 지정해서 그렇게 나오는 것이 아닌가 하고 여쭤봅니다! 제가 혹시 잘못 알고 있는 것인지 타입스크립트가 버젼 업그레이드되면서 수정된 것인지 궁금합니다! 강의 항상 잘 듣고 있습니다. 감사합니다 :)
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
create-react-app 관련 질문있습니다!
저는 React로 앱을 만들때 항상 create-react-app으로 만들어 왔는데 제로초님 강의보면 일일히 파일들을 생성하시더라구요 혹시 어떠한 점때문에 create-react-app을 사용안하시는건 알수 있을까요???
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
npx webpack 에러 관련
npx webpack시 위와 같은 에러가 나오게 됩니다. package.json파일 입니다. 혹시 제가 버젼이 안맞아서 나는 에러일까요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
.ts .tsx 질문드립니다.
cra로 프로젝트 진행중인데요. 화면에 보여지는 컴포넌트만 .tsx 확장자로 만들고 redux, reudx-saga 등은 모두 .ts 확장자로 만드는게 맞나요?? 그리고 이전 typescript 강의에서는 import * as React from 'react'; 이런식으로 모듈을 가져와야한다고 하셨었는데 sleact 프로젝트보면 여기는 그냥 import React from 'react';로 가져오셧더라구요! 혹시 업데이트가 되어서 이제는 * as 방식으로 안불러와도 되는건가요?
- 해결됨웹 게임을 만들며 배우는 React에 TypeScript 적용하기
npm run dev 시 오류 발생
안녕하세요 제로초님 강의에서 npx webpack 으로 오류가 발생하지 않는데 저는 npm run dev 로 webpack을 실행하니 아래와 같은 에러가 발생합니다.. 우선 webpack.config.js 파일 코드 입니다. 아래는 오류 메세지 입니다.
- 해결됨웹 게임을 만들며 배우는 React에 TypeScript 적용하기
onClickBtn 고차함수 사용 이유
안녕하세요 제로초님, 강의 항상 잘듣고 있는 수강생 인데요. onClickBtn을 왜 고차함수로 구성하셨는지 궁금해서 질문드립니다. 저는 리액트(자바스크립트)로 코딩하면서 이벤트 핸들러가 인자를 요구하더라도 아래와 같이 작성했었는데요 const onClickBtn = (choice: keyof typeof rspCoords) => { ... } <button onClick={onClickBtn('보')}/> 위와 같이 인자가 요구되더라도 onClick props 안에 필요한 인자와 함수를 적어넣었으면, 자바스크립트에서는 정상 작동했던 것 같은데 타입스크립트에서는 오류가 나는 것 같네요. 한편, 아래와 같이 JSX 부분을 변경하면 또 정상 작동 하는 것 같은데요. const onClickBtn = (choice: keyof typeof rspCoords) => { ... } <button id="paper" className="btn" onClick={() => onClickBtn('보')}> 그렇다면, 고차함수를 사용한 이유는 props 부분의 arrow 부분을 합쳐서 넣기위해 구성한 것 일까요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
분리
노드버드에 ts 적용해보려는데요. 일반적인 파일 구조를 어떻게 하면서 하나씩 ts를 적용해 나가야 좋을까요? 컴포넌트별로 폴더를 만들고 tsx 파일을 생성해야하는지 아니면 그냥 현재 파일 구조에서 동일한 위치에 tsx 파일을 생성해야하는지 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
tsconfig.json 만들시 오류 발생
안녕하세요 제로초님 강의를 따라서 tsconfig.json을 만들고 똑같이 따라서 작성을 하였는데.. 강의처럼 ts파일로 표시되는것이 아닌 json 파일로 {...} 형태로 표시가 되고 파일에 빨간 표시로 오류가 뜹니다. 오류 내용은 다음과 같습니다..
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
Create-react-app 으로 만들시에 Typescript 연동방법
안녕하세요 제로초님 다름이 아니라 제로초님 강좌에서는 대부분 Create-react-app으로 만들지 않으시고 직접 어떻게 돌아가는지 알려주시기 위해 하나하나 Webpack부터 만드시는 걸로 알고 있습니다.. 그런데 현업에서는 대부분 Create-react-app을 사용하여 만드는 걸로 알고 있어서 혹시 이 강의에서도 Create-react-app 사용해서 만드는 법도 알려주시나요? 아니면 따로 직접 만드는것이랑 별반 차이가 없나요? 리액트를 Create-react-app 으로 만들시에 Typescript 연동방법에 대해 여쭈어 보고 싶습니다.
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
안녕하세요 제로초님 리액트를 어느정도 다룰줄 알고 보는게 좋은지 여쭈어 보고 싶습니다.
안녕하세요 제로초님 이 강의의 선수강좌가 제로초님 리액트 무료강의와, 타입스크립트 강의라고 말씀 해주셨는데 리액트강의 같은 경우는 수강을 하고 있지만 강의 양이 워낙 많아서 다 수강하기에는 어려울것 같고(시간이 촉박해서) 타입스크립트 강의는 이전에 다른 질문을 드렸을때 공식문서만 보고 공부하면서 해도 충분하다고 말씀해주셔서요.. 개인적으로 빠르게 공부하고 클론코딩 강좌로 넘어가고 싶습니다. 그래서 제가 여쭈어 보고 싶은것은 이전에 개인적으로 책을 가지고 독학하면서 타이핑 공부를 해서 hooks까지 개념정도는 이해하고 있으면 이 강의를 진행하는데 무리가 없을까요? ("리액트를 다루는 기술" << 이책으로 블로그에 타이핑 하면서 기본적인 개념정도는 기록해놓고 보고 있습니다.) 그리고 Redux, Mobx, 강의도 결제는 해놨는데 이 강의를 먼저 보고 오는게 좋은가요? 아니면 이해 안가면 따로 보면서 같이 진행해도 되는건가요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
최근에 useObserver 쓰는방법이 바뀐거같아요
return 값에 useObserver 쓰려고 하면 console에 경고로 곧 사라진다고 fn에 감싸라고 하네요! 스택오버플로우 뒤져서 대충 이렇게 해결했는데 아직 mobX 지식이 부족한데 이렇게 하면 되는거 맞을까요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
useReducer 사용시 dispatch 함수에 generic으로 action 타입을 넘겨줄 때 에러가 발생합니다.
제로초님 안녕하세요. TicTacToe 코드에서 질문이 있습니다. const TicTacToe = () => { const [state, dispatch] = useReducer<Reducer<ReducerState, ReducerActions>>(reducer, initialState); ... if (win) { dispatch<SetWinnerAction>({ type: SET_WINNER, winner: turn }); dispatch({ type: RESET_GAME}); } ... } 위의 코드에서 SET_WINNER action을 dispatch 하는 부분에서처럼 dispatch에 generic으로 SetWinnerAction 인터페이스를 줘서 표기를 확실히하고 싶은데, 저렇게 하면 SetWinnerAction 부분에서 타입에러가 나면서 "Expected 0 arguments, but got 1" 이라는 메시지가 뜹니다. 현재 웹스톰 사용 중인데, type definition을 따라가보면 useReducer가 function useReducer<R extends ReducerWithoutAction<any>, I>( reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction<R>): [ReducerStateWithoutAction<R>, DispatchWithoutAction]; 여기에 매칭이 되더라고요. vscode로 보면 function useReducer<R extends Reducer<any, any>>( reducer: R, initialState: ReducerState<R>, initializer?: undefined ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; 여기에 매칭이 되기는 하는데 어쨌든 IDE에나 컴파일해봤을 때나 같은 에러가 뜹니다. 이건 어떤 식으로 해결할 수 있을까요? 감사합니다.
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
npx webpack Error
I am getting Errors when run "npx webpack". Is it related to TypeScript and Webpack version?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
(강의 2:28) 이벤트 타입에 대한 질문입니다.!
저는 마우스를 올려도 강의처럼 e객체의 타입이 바로 나오지 않고 아래 사진처럼 나오더라구요..!! 그래서 일단 TS에서 시키는 대로 ⬇ 아래와 같이 사용하니까 TS가 알아서 e객체의 타입을 인식하는 것 같더라구요! 📍 강의처럼 바로 e객체의 타입을 커서를 올려서 확인하려면 어떻게 해야하나요?? 📍 index.d.ts파일에는 이렇게 적혀있던데 e 객체의 타입을 직접 지정하는 방법과 이벤트핸들러에 타입을 지정하는 방법 중 어떤 방법이 더 올바른 방법일까요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
tsconfig.json 에서 compilerOptions
안녕하세요! 인강 감사히 잘 보고 있습니다.몇가지 질문이 있어서 이렇게 질문을 남깁니다!📍Webpack을 사용하기 때문에 tsconfig.json에 사진의 옵션들을 설정하지 않는건가요? 두 방식의 차이점이 뭘까요? 📍 index.tsx가 아닌 client.tsx 라고 쓰시는 이유가 혹시 있을까요?
- 미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
input.focus() 부분에서 if문 대신 옵셔널체이닝 사용
input.focus() 부분에서 if문 대신 input?.focus() 이렇게 작성해도 되나요?