무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨웹 게임을 만들며 배우는 React
Uncaught TypeError: tries.map is not a function
function getNumbers() { // 숫자 네 개를 겹치치 않고 랜덤하게 뽑는 함수 const candidate = [1,2,3,4,5,6,7,8,9] const array = [] for (let i = 0; i<4; i+=1) { const chosen = candidate.splice(Math.floor(Math.random()*(9-i)), 1)[0] array.push(chosen) } return array } const NumberBaseball = () => { const [result, setResult] = useState('') const [value, setValue] = useState('') const [answer, setAnswer] = useState(getNumbers) // lazy init const [tries, setTries] = useState([]) const submit = (e) => { e.preventDefault() if (value === answer.join('')) { setResult('홈런!') setTries(...tries, {try:value, result:'홈런!'}) alert('게임을 다시 시작합니다!') setValue('') setAnswer(getNumbers()) setTries([]) } else { // 답 틀렸으면 const answerArray = value.split('').map((v)=> parseInt(v)) let strike = 0 let ball = 0 if(tries.length >= 9) { // 10번 이상 틀렸을 때 setResult(`10번 넘게 틀려서 실패! 답은 ${answer.join(', ')}였습니다!`) alert('게임을 다시 시작합니다!') setValue('') setAnswer(getNumbers()) setTries([]) } else { for (let i=0; i<4; i++) { if (answerArray[i] === answer[i]) { strike += 1 } else if (answer.includes(answerArray[i])) { ball += 1 } } setTries({tries: [...tries, {try:value, result: `${strike} 스트라이크, ${ball} 볼입니다.`}]}) setValue('') } } } const change = (e) => { setValue(e.target.value) } return ( <> <h1>{result}</h1> <form onSubmit={submit}> <input maxLength={4} value={value} onChange={change}/> </form> <div>시도: {tries.length}</div> <ul> {tries.map((value, index) => { return ( <Try key={`${index+1}차 시도 : ${value.try}`} tryInfo={value} /> ) })} </ul> </> ) } Uncaught TypeError: tries.map is not a function 오류가 뜨는데 원인을 모르겠습니다
- 해결됨웹 게임을 만들며 배우는 React
splice 질문
뒤에다가 [0]을 붙이는 이유가 무엇인가요?
- 미해결웹 게임을 만들며 배우는 React
savedCallback.current = callback을 useEffect안에 넣은 이유가 궁금합니다
function useInterval(callback, delay) { const savedCallback = useRef(); //useEffect(() => { savedCallback.current = callback; //}); useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); return savedCallback.current; } deps를 주지 않은 useEffect는 렌더링될때마다 실행되는 것으로 알고 있습니다useEffect로 감싸주든 안 감싸주든savedCallback.current = callback 코드는 렌더링될때마다 실행되는데useEffect로 감싸준 이유가 궁금합니다!
- 미해결웹 게임을 만들며 배우는 React
지뢰찾기 클릭한 셀 주변을 검사하는 checkAround 함수 질문있습니다
const checkAround = (row, cell) => { let around = []; if (tableData[row - 1]) { around = around.concat( tableData[row - 1][cell - 1], tableData[row - 1][cell], tableData[row - 1][cell + 1] ); } around = around.concat( tableData[row][cell - 1], tableData[row][cell + 1] ); if (tableData[row + 1]) { around = around.concat( tableData[row + 1][cell - 1], tableData[row + 1][cell], tableData[row + 1][cell + 1] ); }해당 함수에서 8방향 체크를 할 때 먼저 윗줄과 아랫줄이 존재하는지 확인하는데좌우 체크는 굳이 안해도 되는건가요?해당 강좌에서는 concat 후 filter로 해당 코드들만 걸러내서 괜찮은건 알겠는데어느정도 큰 규모의 프로젝트에서 이렇게하면 낭비되는 메모리는 없는지, 일일히 다 체크해줘야 하는지 궁금합니다!
- 해결됨웹 게임을 만들며 배우는 React
react dev tool 사용시 strict mode 오류
안녕하세요react dev tool 사용시 오류 발생하여 문의 드립니다.오류 내용은 'This component is not running in StrictMode.' 입니다. StrictMode를 따로 설정해준거 같지 않은데 왜 해당 오류가 발생하는지 원인을 알 수 없어 질문 드립니다.추가로 해당 오류 때문에 html 태그들이 안 보이는 건지 아니면 tool이 업데이트 되어서 안 보이는 건지도 궁금합니다.감사합니다.
- 미해결웹 게임을 만들며 배우는 React
핫리로딩 안되는 분들 혹시나 도움될까해서 올리는 글
영상대로 했고 에러없는데핫 리로딩이 안되고 리로딩(새로고침)이 되는 경우가 발생했는데요. webpack.config.js 파일의 devServer에 liveReload: false 추가하니까 되네요~
- 해결됨웹 게임을 만들며 배우는 React
web pack hot 리로딩을 하면 dist 폴더가 필요없나요?
webpack을 실행하면 dist폴더에 app.js가 저장되고 이것을 실행하면서 react가 실행되었는데 핫리로딩을 할때는 dist폴더가 필요없고app.js도 안만들어지는것 같습니다 설정에서는 dist와 app.js를 명시하고 있는데 핫리로딩을 어디에서 app.js를 저장하는 건가요?
- 해결됨웹 게임을 만들며 배우는 React
e.preventDefault()
e.preventDefault() 함수의 역할은 잘 알고있습니다만e.preventDefault()를 안썼을 때 setState가 작동되긴 하지만 그 결과가 떳다가 바로 사라지는 현상이 발생하는데그 현상의 이유가 궁금합니다.
- 해결됨웹 게임을 만들며 배우는 React
웹팩 질문
웹팩설정 다 따라했는데 ReactDom.render(<WordRelay/>, document.querySelector('#root'))리액트 18이하로 이렇게 하면위 사진처럼 오류가 뜨고 리액트18으로 하면 이런 오류가 뜹니다. 그리고 웹팩 설정할 때 엄청나게 많은걸 설정해야 되던데 그런거 다 외워야 하나요?
- 미해결웹 게임을 만들며 배우는 React
Failed to load resource
github에 있는 like-button-jsx.html 그대로 실행했는데도 이러한 오류가 뜹니다. 뿐만 아니라 모든 html 파일을 열면Failed to load resource: net::ERR_FILE_NOT_FOUND이게 뜨는데 어떻게 해야할까요?
- 해결됨웹 게임을 만들며 배우는 React
useMemo를 사용하는 케이스에 대해
강좌에서는 함수의 결과값을 렌더링에 쓰는 경우만 useMemo를 적용했는데요props나 state를 렌더링에 사용하는경우에도 모두 useMemo를 적용해야 하나요?useCallback같은 경우는 렌더링에 사용하는 함수에 대해 모두 적용하면 되는데useMemo는 어떤경우에 적용해야하는지 헷갈리네요
- 해결됨웹 게임을 만들며 배우는 React
지뢰찾기 dispatch
안녕하세요.지뢰찾기 학습을 하고 있습니다.Context.Provider를 설정한 후시작 버튼을 눌렀을 때 dispatche가 선언 안 되어 있다는 오류가 나는데,코드를 한 번 봐 주실 수 있나요?감사합니다. https://drive.google.com/file/d/1BaP1l60kFetjxsPqJlHnxXltmRO0LJt0/view?usp=sharing ==========================================================코드 첨부 합니다.MineSearch.jsx Form.jsxStart 버튼을 누를 때 발생하는 에러 입니다.
- 해결됨웹 게임을 만들며 배우는 React
강의 3-4. 컴포넌트 분리와 props에서 분리된 컴포넌트에 this바인딩이 되나요?
Try.jsx 에서 {this.props.value}를 사용하는데 이때 this는 Try컴포넌트에 바인딩 된다고 생각하는데 NumberBaseball.jsx 컴포넌트의 render함수에서 상위로 스코프가 체이닝 되나요? 정리하면 컴포넌트를 import 해서 사용할 때 this바인딩이 <Try />컴포넌트의 this는 어떻게 바인딩 이루어져서 props를 받을 수 있는지 궁금합니다 ㅠ
- 해결됨웹 게임을 만들며 배우는 React
제로초님 안녕하세요!! setInterval clearInterval 실행위치 부탁드립니다.
제로초님 안녕하세요!! setInterval clearInterval 실행위치 부탁드립니다. import { useRef, useEffect } from 'react';function useInterval(callback, delay) {const savedCallback = useRef();useEffect(() => {savedCallback.current = callback;});useEffect(() => {function tick() {savedCallback.current();}if (delay !== null) {let id = setInterval(tick, delay);return () => clearInterval(id); 요부분!!}}, [delay]);return savedCallback.current;}export default useInterval;질문1. if문에서 return에 단지 익명함수를 작성하고 그 익명함수의 return으로 clearInterval 을 적어준건데 왜 익명함수가 실행되어 clearInterval이 등록이되는건가요?? if의 함수의 리턴값이 익명함수의 주소아닌가요?질문2. if에서 reutnrn에 익명함수가 실행되었고 clearinterval이 등록되었다고 치면 왜 delay가 빠꼈을때 실행되는거에요?? ㅠㅠ부탁드립니다. 이해하고싶어요 4시간째 구글링하고 찾아봐도 이해가안되네요..다른분답변에서 setInterval 500으로 실행되면서 return쪽 clearInterval 코드도 등록됩니다. 이 부분도 왜 등록이 되는건가요?ㅠ
- 해결됨웹 게임을 만들며 배우는 React
tries 안에 value와 result차이
안녕하세요 강의 잘 듣고있습니다.강의듣는도중 궁금한게 생겨서요!!위의 사진에서 보면 value는 tries의속성값으로 사용하셨고 원래 코드라면 result : "홈런!!" 이렇게 되어있어서 위의 사진처럼 바꾸면되지않을까해서 바꾸고 인덱스에맞게 답을맞추고 출력해봤는데 오류가 뜨더라구요. 왜그런거죠?? 리액트18말고 강의기준으로 질문드립니다(usecallback , 의존성배열없는코드). 리액트가 { } 블럭단위로 변화점을 다 찾은다음에 한번에 리렌더링시켜서 그런것인가요?
- 미해결웹 게임을 만들며 배우는 React
끝말잇기
-> 똑같이 따라하며 끝말잇기를 실행했을 때, 화면에 아예 아무것도 뜨지 않고, 다음과 같은 오류가 뜨는데, 무엇이 문제일까요? 서버이면 package.json 파일에 문제가 있는걸까요?
- 미해결웹 게임을 만들며 배우는 React
hooks 의 특징 (전체가 다 실행된다)
안녕하세요. 강사님.해당 강의에서 1분 20초 경에'hooks의 특징상 전체가 계속 다시 실행된다' 라고 하셨는데.1.state가 바뀌어서 rendering이 될 때, 모든 hooks의 내용이 다시 실행된다. 라는 말씀이 맞으실까요?2.또한 hooks의 개념이functional component 구현 시에useEffect나 useState, setState 등이 쓰이는 부분들이 hooks라고 보면 되나요...?3.그렇다면 컴포넌트가 re rendering 되는 시점에 seEffect나 useState, setState 등이 쓰이는 부분들이 모두 다시 실행된다고 보면 되나요...? 아니면 함수 컴포넌트 안의 모든 내용들이 다시 실행된다는 말씀이실까요...? 2-1.functional conponent 와 hooks의 개념이 조금 혼동이 됩니다. functional component 구현 시 안에 hooks가 쓰이는 건가요..????? 질문 읽어주셔서 감사합니다.
- 해결됨웹 게임을 만들며 배우는 React
Click Redo 에서 set State 실행 부분 (비동기 관련)
안녕하세요. 강사님.강사님의 높은 퀄리티의 강의를 듣고 열심히 공부중입니다. 감사합니다. 질문 사항은 다음과 같습니다.아래는 로또번호를 다시 추첨하는 '한번 더' 버튼을 누를 때의 함수인데요.보시면 winNumbers와 winBalls 의 setState가 같이 변경이 되고 있습니다.제가 생각할 때에는, winNumbers의 당첨 번호가 모두 다 만들어 진 후에 winBalls의 배열이 [] 으로 되어, runTimeouts() 가 실행되어야 할 것 같은데요.실제로 set State 가 비동기로 실헹되기 때문에, 만약 로직상 번호를 다 만들고 timeouts를 실행해야 한다면, 동기적으로 처리를 하는 것이 맞지 않을까 라는 생각이 들어서 입니다. 혹시 강사님의 생각은 어떠신가요..? 질문 읽어주셔서 감사합니다!
- 해결됨웹 게임을 만들며 배우는 React
2:04초 onClickTd 왜 useCallback사용하는지 모르겠어요
onClickTd를 useCallback으로 만드신 이유가 있을까요 ?영상내에서 따로설명이 없으신거같아서요. 다시한번 짚어주세요 !! p.s ) 제가아는 useCallback은 제작한 함수를 재사용하기 위한것이잖아요 ..? 근데 onClickTd 라는 함수를 다른컴포넌트에서 사용안하지 않나요 ...?
- 미해결웹 게임을 만들며 배우는 React
webpack설정 시 json 파일 에러
안녕하세요 제로초님,제가 웹팩을 이용해서 리액트를 사용하면서 json 파일을 로컬에서 사용하고 싶어서 import를 해봤는데 세미콜론 에러가 나서 json-loader를 추가해보니 또 다른 에러가 나서.. 혹시 이 부분에 대한 해결 방법이나 방향을 알고 계신가요? import data from "./info.json"; // 에러=> json loader 추가 후webpack.config.jsconst path = require("path"); const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name: "react-test-setting", mode: "development", devtool: "eval", resolve: { extensions: [".jsx", ".js"], }, entry: { app: ["./client"], }, // input module: { rules: [ { test: /\.jsx?/, loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], plugins: ["react-refresh/babel"], }, }, { test: /\.json$/, loader: "json-loader", }, ], }, plugins: [new RefreshWebpackPlugin()], output: { path: path.join(__dirname, "/dist"), filename: "app.js", }, // output devServer: { devMiddleware: { publicPath: "/dist" }, static: { directory: path.resolve(__dirname) }, hot: true, }, }; info.json{ "items": [ { "name": "kim", "age": 21, "address": "seoul" }, { "name": "lee", "age": 23, "address": "seoul" }, { "name": "park", "age": 31, "address": "seoul" } ] }