무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
hooks component에서는 shouldComponentUpdate( ) 같은건 없나요??
hooks에서 memo를 쓰는 경우 말고 따로 업데이트 커스터 마이징 하는경우에는 어떻게 하나요?
- 미해결웹 게임을 만들며 배우는 React
7-3강의, reducer CLICK_CELL 질문
const tableData = [...state.tableData]; tableData[action.row] = [...tableData[action.row]]; 에서 tableData는 배열이라 spread써서 불변성을 지킨건 알겠는데 tableData[action.row]는 왜한건가요? 2차배열이라 배열안에 배열이라서 애도 해준건가요?
- 해결됨웹 게임을 만들며 배우는 React
const onClickBtn = (choice) => () => {....} / 이해가 잘 안되요..ㅠㅠ
가위바위보 class로 만들때 는 onClickBtn = (choice) => {....} 로 하셧는데, 가위바위보 Hooks로 만들때는 const onClickBtn = (choice) => () => {....} 하셧는데, 왜 '=> ()' 이걸 한번 더 써야지 오류가 안나고 실행이 되는건가요??? '=> ()'를 안쓰면 에러메세지가 무한 루프를 돈다고 나오는데...무엇을 의미하는지 잘 모르겠습니다. 답변좀 부탁드립니다
- 미해결웹 게임을 만들며 배우는 React
tableData에서 state바꿀때 이해가 좀 안되서 질문 드립니다
tableData객체를 불변성을 유지하면서 값을 바꿔야 한다고 하셨는데요.. tableData가 이중배열이라서 row까지만 얕은 복사를 한건가요?
- 미해결웹 게임을 만들며 배우는 React
onClickBtn()는 왜 한번 더 함수를 쓰는지 이해가 안되요...
고차함수로 바꾸기 전에 () => this.onClickBtn('바위') () => 를 빼면 랜더링 에러가 나는데.. 왜 그런건지 설명좀 해주세요 () => 왜 들어가는지 이해가 안되요
- 미해결웹 게임을 만들며 배우는 React
리액트 & TS
react + typescript + redux 이용한 NodeBird 강의는 언제쯤 나올까요?
- 미해결웹 게임을 만들며 배우는 React
JSX와 바벨(babel) 질문
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="root"></div> <script text="text/babel"> class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { return <button type="submit" onClick={() => {this.setState({ liked:true })}}> {this.state.liked === true ? 'liked' : 'like'} </button>; } } </script> <script text="text/babel"> ReactDOM.render( <LikeButton />, document.querySelector('#root') ); </script> </body> </html> 질문이 있습니다. 여기에서 강의 들은대로 작성을 하였는데 Uncaught SyntaxError: Unexpected token '<' index.html:32 Uncaught SyntaxError: Unexpected token '<' 이러한 에러가 나옵니다.... 에러를 해결하고싶습니다..
- 미해결웹 게임을 만들며 배우는 React
OnClickButton에 ()()
() = () => 이렇게 하셨는데.. 왜 그러시는건가요?? 저번에도 봤었는데 이해를 못하겠습니다 ㅠㅠ
- 미해결웹 게임을 만들며 배우는 React
webpack 실행 질문이여
강의를 보니까 webStrom으로 강의를 진행하시더라구요. 그런데 강의에도 언급하셨지만... 유료로 알고 있어서 현재 visualStudio Code로 학습을 진행하고 있습니다. 제가 못찾는거 일수도 있겠지만 페이지를 실행하는 부분이 어디에도 보이지 않네여... 그래서 npm start를 이용하여 웹을 실행시키려고 했죠... 예상과 다르게 실행이 되지 않았습니다. 그래서 인터넷에 찾아보니 start를 추가하라고 하더라구요... 그래서 추가했죠. 하지만 되지 않았어여... ㅜㅜ 분명 인터넷에는 "start": "node index.js", 이렇게 추가하라고 하던데...ㅜㅜ 그래서 추가했는데.... 안되네여... 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'start' ] 2 info using npm@6.9.0 3 info using node@v10.16.3 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info lifecycle lecture@1.0.0~prestart: lecture@1.0.0 6 info lifecycle lecture@1.0.0~start: lecture@1.0.0 7 verbose lifecycle lecture@1.0.0~start: unsafe-perm in lifecycle true 8 verbose lifecycle lecture@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Administrator\Desktop\study\react-game\lecture\node_modules\.bin;C:\Program Files\MySQL\MySQL Server 8.0\bin;C:\Program Files\Java\jdk-10.0.1\bin;C:\Users\Administrator\Desktop\study\maven\apache-maven-3.6.1\bin;C:\Program Files\nodejs\;C:\Windows\System32\;C:\Users\Administrator\C:\Users\Administrator\AppData\Roaming\Roaming\npm;C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Administrator\AppData\Roaming\npm 9 verbose lifecycle lecture@1.0.0~start: CWD: C:\Users\Administrator\Desktop\study\react-game\lecture 10 silly lifecycle lecture@1.0.0~start: Args: [ '/d /s /c', 'node index.js' ] 11 silly lifecycle lecture@1.0.0~start: Returned: code: 1 signal: null 12 info lifecycle lecture@1.0.0~start: Failed to exec start script 13 verbose stack Error: lecture@1.0.0 start: `node index.js` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16) 13 verbose stack at EventEmitter.emit (events.js:198:13) 13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:198:13) 13 verbose stack at maybeClose (internal/child_process.js:982:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5) 14 verbose pkgid lecture@1.0.0 15 verbose cwd C:\Users\Administrator\Desktop\study\react-game\lecture 16 verbose Windows_NT 6.1.7601 17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start" 18 verbose node v10.16.3 19 verbose npm v6.9.0 20 error code ELIFECYCLE 21 error errno 1 22 error lecture@1.0.0 start: `node index.js` 22 error Exit status 1 23 error Failed at the lecture@1.0.0 start script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ] 이런식으로 오류가 발생하는데....ㅜㅜ 그래서 app.js으로도 바꿔보고 jsx두개 로도 바꿔봤는데 소용이 없더라구요. 그래서 index.js를 추가해봤는데도 안되네요... 위에 보니까 main이라고 index.js가 되있는 부분이 있던데 그 부분도 수정도 같이 해보고 따로 수정도 해봤는데 안되네여... 어떻게 하면 실행시켜서 볼수 있을까요? 아니면 다른 ide를 사용해야 되는 걸까요?
- 미해결웹 게임을 만들며 배우는 React
onClickBtn에서 ()위치
onClickBtn = (choice) => () => onClickBtn = () => (choice) => 두개 다 잘 작동하던데 아무런 문제가 없는 건가요?
- 미해결웹 게임을 만들며 배우는 React
onChangeInput 이런 함수는 input태그마다 모두 말들어줘야 하는건가요?
만약에 input이 여러개 있다면 어떻게 처리해야하나요?
- 미해결웹 게임을 만들며 배우는 React
컴포넌트를 훅스와 클래스모두써서 만들기
저희가 훅스로 만드는법 클래스로 만드는법 모두 배웠고 두 개 모두 사용해서 1번 컴포넌트는 훅스로 2번 컴포넌트는 클래스로 이런식으로 만들수 있을텐데 이렇게 하는 것을 권장하지는 않나요? 리스트 컴포넌트는 클래스로 요소 컴포넌트는 훅스로 만들면 편하지 않을까요?
- 미해결웹 게임을 만들며 배우는 React
import를 쓰면 되고 require를 쓰면 안되는데 왜그럴까요..
import React from 'react'; import { render } from 'react-dom'; import { hot } from 'react-hot-loader/root'; import WordRelay from './WordRelay'; const Hot = hot(WordRelay); render(<Hot />, document.querySelector('#root')); const React = require('react'); const ReactDom = require('react-dom'); const { hot } = require('react-hot-loader/root'); const WordRelay = require('./WordRelay'); const Hot = hot(WordRelay); ReactDom.render(<Hot />, document.querySelector('#root')); 요 두 모양으로 썼는데 위에꺼는 되고 아래꺼는 안되네요.. [HMR] Waiting for update signal from WDS... react.development.js:172 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. in HotExportedComponent warningWithoutStack @ react.development.js:172 warning @ react.development.js:612 createElementWithValidation @ react.development.js:1944 React$$1.createElement @ react-hot-loader.development.js:2846 render @ react-hot-loader.development.js:3127 finishClassComponent @ react-dom.development.js:17039 updateClassComponent @ react-dom.development.js:16994 beginWork$1 @ react-dom.development.js:18505 beginWork$$1 @ react-dom.development.js:23193 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 react-hot-loader.development.js:2345 React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work. AppContainer @ react-hot-loader.development.js:2345 AppContainer @ VM1223:14 constructClassInstance @ react-dom.development.js:13308 updateClassComponent @ react-dom.development.js:16985 beginWork$1 @ react-dom.development.js:18505 beginWork$$1 @ react-dom.development.js:23193 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 react-dom.development.js:24036 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. at eval (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24036:34) at createFiberFromTypeAndProps (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24039:13) at createFiberFromElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24060:15) at reconcileSingleElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14530:23) at reconcileChildFibers (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14587:35) at reconcileChildren (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16691:28) at finishClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17056:5) at updateClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16994:24) at beginWork$1 (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18505:16) at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:347:14) (anonymous) @ react-dom.development.js:24036 createFiberFromTypeAndProps @ react-dom.development.js:24039 createFiberFromElement @ react-dom.development.js:24060 reconcileSingleElement @ react-dom.development.js:14530 reconcileChildFibers @ react-dom.development.js:14587 reconcileChildren @ react-dom.development.js:16691 finishClassComponent @ react-dom.development.js:17056 updateClassComponent @ react-dom.development.js:16994 beginWork$1 @ react-dom.development.js:18505 callCallback @ react-dom.development.js:347 invokeGuardedCallbackDev @ react-dom.development.js:397 invokeGuardedCallback @ react-dom.development.js:454 beginWork$$1 @ react-dom.development.js:23217 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 Show 4 more frames react-dom.development.js:19814 The above error occurred in the <AppContainer> component: in AppContainer (created by HotExportedComponent) in HotExportedComponent Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:19814 logError @ react-dom.development.js:19850 update.callback @ react-dom.development.js:20929 callCallback @ react-dom.development.js:12929 commitUpdateEffects @ react-dom.development.js:12968 commitUpdateQueue @ react-dom.development.js:12959 commitLifeCycles @ react-dom.development.js:20098 commitLayoutEffects @ react-dom.development.js:22813 callCallback @ react-dom.development.js:347 invokeGuardedCallbackDev @ react-dom.development.js:397 invokeGuardedCallback @ react-dom.development.js:454 commitRootImpl @ react-dom.development.js:22585 unstable_runWithPriority @ scheduler.development.js:643 runWithPriority$2 @ react-dom.development.js:11305 commitRoot @ react-dom.development.js:22414 scheduleUpdateOnFiber @ react-dom.development.js:21421 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 Show 3 more frames react-dom.development.js:24036 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. at eval (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24036:34) at createFiberFromTypeAndProps (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24039:13) at createFiberFromElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24060:15) at reconcileSingleElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14530:23) at reconcileChildFibers (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14587:35) at reconcileChildren (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16691:28) at finishClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17056:5) at updateClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16994:24) at beginWork$1 (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18505:16) at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:347:14)
- 미해결웹 게임을 만들며 배우는 React
useRef 질문
왜 timeOut의 useRef에는 null이 있고, startTime, endTime의 useRef에는 null없이 빈 값으로 두신건가요??
- 미해결웹 게임을 만들며 배우는 React
평균 시간 질문
평균 시간: {result.reduce((a,c) => a + c) / result.length}ms 여기서 result.length 값은 1이 되고 result.reduce 부분은 누르는 시간마다 바뀌는 건가요?
- 미해결웹 게임을 만들며 배우는 React
react devtool 질문
지금은 react devtool이 조금 바꼈는데 바뀐 버젼에서는 하이라이트 설정 어떻게 하죠...??
- 미해결웹 게임을 만들며 배우는 React
hot-loader 질문
react-hot-loader를 깔지 않고, webpack-dev-server만 깔고 저장을 해봐도 실시간으로 바뀌던데.... hot-loader랑 차이가 뭔가요?
- 미해결웹 게임을 만들며 배우는 React
함수 질문
render안에 ref={함수} 이렇게 말고 함수를 따로 빼주는 이유가 render가 자주 실행되면 함수를 계속 호출해야 돼서라고 하셨는데... 따로 빼도 어차피 함수를 불러오는 건 똑같은거 아닌가요? 보기 쉽게 하려고 따로 빼는게 아닌가 싶어서 질문드립니다.
- 미해결웹 게임을 만들며 배우는 React
질문이요
useEffect, useMemo, useCallback, 제가 이해하기로는 useCallback 의 경우는 함수자체를 기억하고, useMemo는 함수의 리턴값을 기억한다고 알고 있는데요. useEffect 역시 함수의 리턴값을 기억하는건가요???
- 미해결웹 게임을 만들며 배우는 React
질문이요
react dveloper tool 이요 업데이트되서 하이라이트 표시 되는거 없어진거 같은데요, 인제는, 렌더링 되는지 안되는지 여부 체크 할 수 없는건가요???