무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 핫로더 관련 질문입니다!
react-refresh @pmmmwh/react-refresh-webpack-plugin 이 두개 패키지가 데이터 유지를 위해 사용된다고 하셨는데 그럼 끝말잇기 진행 중에 딩동댕 -> 딩동딩 으로 변경하고 저장하게 되면 진행중인 단어는 유지 된다는 뜻인가요?? 현재는 유지가 안되고 그대로 새로고침이 되는데 문제가 뭘까요 ㅠ? const path = require('path'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); module.exports = { name: 'word-relay-dev', mode: 'development', devtool: 'inline-source-map', resolve: { extensions: ['.js', '.jsx'], }, entry: { app: './client', }, module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: {browsers: ['last 2 chrome versions']}, debug: true, }], '@babel/preset-react', ], plugins: ['react-refresh/babel'], }, exclude: path.join(__dirname, 'node_modules'), }], }, plugins: [ new ReactRefreshWebpackPlugin(), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist', }, devServer: { devMiddleware: { publicPath: '/dist' }, static: { directory: path.resolve(__dirname) }, hot: true } };
- 미해결웹 게임을 만들며 배우는 React
안녕하세요
지금 현재 VSCode를 사용중인데 실행을 하면 localhost:????로 실행이되지않고 그냥 제 pc경로의 html이 브라우저에 열려서 버튼이든 뭐든 나오지 않는것같습니다. ex) file:///Users/kim/Desktop/study/react-webgame/lecture/index.html 혹시 어떻게 실행을 해야하는지 아시나요???
- 미해결웹 게임을 만들며 배우는 React
common js 방식으로 내보내기를 하던 도중 문제가 생겨 질문 드립니다!
강의에서는 es6 방식을 사용하지만, common js도 알아두어야 할 것 같아서, 혼자 common js를 사용해보던 도중 문제가 발생하여 질문 드립니다! 문제 요약: common js 방식으로 내보내기 한 후, 같은 경로 상의 다른 파일에서 require를 했을 때, 빈객체가 required됩니다. 세부사항 1. 상황 TicTacToe.jsx에서 CLICK_CELL이라는 상수를 내보내어, Td.jsx라는 동일 경로의 다른 파일에서 그 상수를 받아 오려 하는데, 빈 객체가 required 되어 CLICK_CELL의 값이 undefined로 나타납니다. 해당 상수는 Td.jsx가 아닌 다른 경로에 있는 파일에서는 정상적으로 required됩니다! 2. 코드 # 파일 구조 # TicTacToe.jsx # Td.jsx console.log 결과 3. 추측 common js를 통해 같은 경로 상의 파일에서 모듈을 받아오는 경우에 문제가 생기는 것 같습니다. 다만 정확히 어떤 문제인지, 또 어떻게 해결할 수 있는지 해결 방법을 끝내 찾지 못해 질문 드립니다. *깃헙 주소: https://github.com/Parkhanyoung/React-zerocho-basic 항상 좋은 강의 감사드립니다! 덕분에 정말 즐겁게 공부하고 있습니다 ㅎㅎ
- 미해결웹 게임을 만들며 배우는 React
이 오류는 어떻게 해결이 가능할까요???
이 오류는 왜 그러는걸까요?? 오류가 계속 있어서 하나씩 오타 찾아가면서 해결해왔는데 여기서 막혔습니당...ㅠㅠ
- 미해결웹 게임을 만들며 배우는 React
안녕하세요! 몇번씩 확인을 했는데도 hello webpack 이 출력이안되는데 어떻게해결을해야할까요ㅠㅠ 유튜브에서 메일을 찾아서 보냈었는데 없는 메일이라더라구요 흑흑
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
- 미해결웹 게임을 만들며 배우는 React
똑같이 입력했는데 화면에 아무것도 뜨지 않아요.. 제가 어떤 부분을 실수 했을까요?? ㅠㅠ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>구구단</title> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> class GuGuDan extends React.component { constructor(props) { super(props); this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '', }; } render() { return ( <div> <div>{this.state.first}곱하기{this.state.second}는?</div> <form onSubmit = {(e) => { e.preventDefault(); if (parseInt(value)=== this.state.first * this.state.second) { this.setState({ result: "정답", first: Math.ceil(Math.random()*9), second: Math.ceil(Math.random()*9), value: '', }); } else{ this.setState({ result: '땡', value: '', }); } }}> <input type="number" value={this.state.value} onChang= {(e) => this.setState({value: e.target.value})}/> <button>입력!</button> </form> <div>{this.state.result}</div> </div> ); } } </script> <script type="text/babel"> ReactDOM.render(<GuGuDan />, document.querySelector('#root')); </script> </body> </html>
- 미해결웹 게임을 만들며 배우는 React
무료 강의는 수료증이 발급되지 않는지요?
안녕하세요? 회사의 강의도 듣고 인프런의 무료 강의도 두 과정 수강했습니다. 그런데 무료 강의는 수료증이 발급되지 않는지 궁금합니다. 답변 부탁드립니다. 감사합니다.
- 미해결웹 게임을 만들며 배우는 React
getWinNumbers가 여러번 실행되지 않는데 업데이트된건가요?
콘솔로 getWinNumbers를 찍어보았는데 componentDidMount때 딱 한 번 실행되고 재실행되지 않는 것 같습니다. 제가 코드를 강의와 똑같이 작성한다고 한건데, 혹시 잘못 작성해서 의도와 다르게 작성된 부분이 있어서 그런 것인지 아니면 버전이 업데이트된 것인지 궁금해서 질문 남깁니다! const React = require('react'); const { useState, useRef, useEffect } = React; const Ball = require('./Ball'); function getWinNumbers() { console.log('getWinNumbers'); const candidate = Array(45).fill().map((v, i) => i + 1); const shuffle = []; while (candidate.length > 0) { shuffle.push(candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]); } const bonusNumber = shuffle[shuffle.length - 1]; const winNumbers = shuffle.slice(0, 6).sort((p, c) => p - c); return [...winNumbers, bonusNumber]; } const LottoHooks = () => { const [winNumbers, setWinNumbers] = useState(getWinNumbers); const [winBalls, setWinBalls] = useState([]); const [bonus, setBonus] = useState(null); const [redo, setRedo] = useState(false); const timeouts = useRef([]); useEffect(() => { for (let i = 0; i < winNumbers.length - 1; i++) { timeouts.current[i] = setTimeout(() => { setWinBalls((prevWinBalls) => [...prevWinBalls, winNumbers[i]]); }, (i + 1) * 1000); } timeouts.current[6] = setTimeout(() => { setBonus(winNumbers[6]); setRedo(true); }, 7000); return () => { // componentWillUnmount timeouts.current.forEach((v) => { clearTimeout(v); }); }; }, [timeouts.current]); const onClickRedo = () => { setWinNumbers(getWinNumbers()); setWinBalls([]); setBonus(null); setRedo(false); timeouts.current = []; }; return( <> <div>당첨 숫자</div> <div id="결과창"> {winBalls.map((v) => <Ball key={v} number={v}/>)} </div> <div>보너스!</div> {bonus && <Ball number={bonus}/>} {redo && <button onClick = {onClickRedo}>한 번 더!</button>} </> ); } module.exports = LottoHooks;
- 해결됨웹 게임을 만들며 배우는 React
React devtools 확장프로그램 적용이 안 됩니다.
index.html을 열었을 때 뿐만 아니라 어떤 페이지에 있어도 이렇게 비활성화 상태입니다. 개발자 도구 탭에 Component, Profiler도 뜨지 않구요. 파일 URL에 대한 액세스는 허용해두었는데 파일이 아니어도 모든 페이지에서 작동이 안 되는 것으로 보아 이 문제가 아닌 것 같아 질문드립니다. 무엇이 잘못된 것인지 모르겠습니다.
- 미해결웹 게임을 만들며 배우는 React
제로초님 강의를보면서 복습하려면 어떤 방식으로 공부하는게 좋을까요?
안녕하세요 제로초님 이전에 리액트 강의 들었던 부분까지 복습하려고 강의를 2장부터 보고 있는데요 어떤 방식으로 공부하면 좋을지 모르겠어서 여쭈어보고 싶습니다. 그냥 단순히 강의보면서 이해하는 방향으로 공부해도 되는건지.. 아니면 똑같이 따라하면서 공부하는게 나을지 모르겠습니다. 따라치다보면 타이핑 연습만 하는거 같아서요.. 효율적인 복습방법을 여쭙고 싶습니다.
- 미해결웹 게임을 만들며 배우는 React
Router 작성시 오류가 나오고 있습니다..
어떤 링크를 클릭해도 아래와 같은 에러가 나오고 있습니다. 어떤 이유인지 알 수 있을까요?
- 해결됨웹 게임을 만들며 배우는 React
6-4강 useEffect 배열 입력값에 따른 로또 중복공 발생 질문
안녕하세요 제로초님 항상 좋은 강의 감사드립니다 :) 유튜브로 강의를 수강하다가, 인프런/유튜브 댓글에 같은 질문이 없어 질문을 남깁니다. (사실 하나 있긴 했는데 이해가 잘 안되더군요 ㅜㅜ) 강의에서 아래와 같이 useEffect의 배열에 winBalls.length===0을 넣으면 첫번째 공과 두번째 공이 중복으로 나오고, timeouts.current로 넣으면 의도한대로 제대로 공이 중복되지 않게 나오는 것을 확인할 수 있었습니다. useEffect(()=>{ for(let i=0;i<6;i++){ timeouts.current[i]=setTimeout(()=>{ setWinBalls((prevState)=>[...prevState, winNumbers[i]]); }, (i+1)*1000); } timeouts.current[6]=setTimeout(()=>{ setBonus(winNumbers[6]); setRedo(true); }, 7000); return ()=>{ timeouts.current.forEach((v)=>{ clearTimeout(v); }) } },[winBalls.length===0]); class형에서는 winBalls.length===0으로 해도 문제없지만 hooks에서는 문제가 발생한 이유를 저는 componentDidMount와 componentDidUpdate 역할을 useEffect가 한번에 해주기 때문에 중복발생하는 것으로 이해했습니다. (useEffect에서 winBalls.length===0이라는 조건문에 mount,update할 때 각각 부합해서 중복발생하는 것으로 이해하였습니다.) 1. 그런데, timeouts.current을 배열에 넣을 때는 처음 mount될 때나 update될 때나 똑같이 빈 배열일텐데 왜 같은 공이 중복발생하지 않고 의도대로 제대로 작동하는지 궁금합니다. 2. winBalls.length===0과 같이 조건문을 useEffect 배열에 넣어도 되는건가요? 만약 가능하다면, winBalls.length===0을 배열에 넣을 경우, 위 중복 공 발생버그를 해결할 수 있는 방안도 있을까요? 항상 감사드립니다!
- 미해결웹 게임을 만들며 배우는 React
자식 컴포넌트에서 부모 컴포넌트로 데이터를 보낼 때 질문입니다.
공식 홈페이지에서는 리액트는 단방향으로 데이터를 흘러가게 하는게 좋다고 본 기억이 있습니다. 만약, 그런 상황을 막는게 좋겠지만 자식 컴포넌트에서 부모컴포넌트로 데이터를 보내야 하는 상황이 온다면 useReducer와 contextAPI로 보내야 하는건가요? 아니면 다른 방법이 있나요?
- 미해결웹 게임을 만들며 배우는 React
props 관련 질문이 있습니다.
자식이 부모로부터 props를 받는데 이를 변경하고 싶은 경우, 자식 state에 부모 props를 넣어야한다고 하셨는데, 이렇게 할 경우에 자식 state가 derived state가 되는 건가요? 이렇게 할 경우에 생기는 문제점은 없는지가 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
리액트에서의 불변성 관련 질문입니다.
리액트에서 불변성이 정확히 어떤 부분에 대하여 불변성을 지키는 건가요? 메모리 불변성인가요?
- 해결됨웹 게임을 만들며 배우는 React
setTries를 하면 Cannot read properties of undefined (reading 'length') 에러가 뜹니다.
안녕하세요 제로초님. 항상 좋은 강의 감사드립니다. 유튜브로 강의 듣다가 3-8강에서 질문을 하기 위해 인프런 수강신청하여 질문 남깁니다. (유튜브는 질문댓글이 삭제되더라구요) 코드를 아래와 같이 작성하였는데, 리액트가 tries.length를 인식하지 못하는 현상이 발생합니다. tries 자체는 useState로 초기화해주었는데 tries.length의 length를 인식하지 못하는 이유가 무엇인가요? 문제 원인을 찾기 위해 setTries를 onChangeInput에 넣었을 때, 타이핑하자마자 바로 에러가 뜨는 걸로 봐선 tries를 setState할 때 에러가 발생하는 것 같은데 명확한 에러원인을 잘 모르겠습니다. 코드는 아래와 같습니다. https://github.com/kth990303/TH-s-Web/issues/1 https://github.com/kth990303/TH-s-Web/tree/master/react-webgame/baseball import React,{useState} from 'react'; import Try from './Try' const getNumbers=()=>{ const candidate=[1,2,3,4,5,6,7,8,9], ans=[]; for(let i=0;i<4;i++){ const chosen=candidate.splice(Math.floor(Math.random()*(9-i)), 1)[0]; ans.push(chosen); } return ans; } const NumberBaseball=()=>{ const [result, setResult]=useState(''); const [value, setValue]=useState(''); const [answer, setAnswer]=useState(getNumbers()); const [tries, setTries]=useState([]); const onSubmitForm=(e)=>{ e.preventDefault(); if(value===answer.join('')){ setResult('홈런!'); setTries((prevTries)=>{ [...prevTries, {try:value, result:'홈런!'}] }) } else{ const answerArray=value.split('').map((v)=>parseInt(v)); let strike=0, ball=0; if(tries.length>=9){ setResult(`10번 넘게 틀려서 실패! 답은 ${answer.join(',')}였습니다!`); alert('게임을 다시 시작합니다.'); setValue(''); setAnswer(getNumbers()); setTries([]); } else{ for(let i=0;i<4;i++){ if(answerArray[i]===answer[i]){ strike++; } else if(answer.includes(answerArray[i])){ ball++; } } setTries((prevTries)=>{ [...prevTries, {try: value, result:`${strike}스트라이크 ${ball}볼입니다.`}] }) setValue(''); } } } const onChangeInput=(e)=>{ console.log(tries.length); setValue(e.target.value); } return( <> <h1>{result}</h1> <form onSubmit={onSubmitForm}> <input maxLength={4} value={value} onChange={onChangeInput} /> <button>입력!</button> </form> <div>시도: {tries.length}</div> <ul> {tries.map((v,i)=>{ return( <Try key={`${i+1}차 시도: ${v.try}`} tryInfo={v} /> ); })} </ul> </> ) } export default NumberBaseball; 감사합니다!
- 미해결웹 게임을 만들며 배우는 React
cannot read properties of undefined (reading 'length') 오류
안녕하세요, 제로초님! 리액트 강의 정말 감사하게 수강하고 있습니다. 다름이 아니라 cannot read properties of undefined (reading 'length') 오류가 발생했는데 해결이 안되어서 그러는데요. 이게 Table.jsx의 tableData.length 에서 발생하는 오류인 것 같은데 아무리 구글링을 해보고 제로초님 깃허브에 있는 파일을 그대로 옮겨봐도 해결이 안되어서 질문드립니다. 어느 부분에서 발생한 오류일까요? import React from 'react'; import Tr from './Tr'; const Table = ({ tableData, dispatch }) => { return ( <table> <tbody> {Array(tableData.length).fill().map((tr, i) => ( <Tr key={i} dispatch={dispatch} rowIndex={i} rowData={tableData[i]} /> ))} </tbody> </table> ); }; export default Table;
- 미해결웹 게임을 만들며 배우는 React
비동기 함수 관련 질문이 있습니다.
setInterval과 외부 변수와의 관계를 정확히 이해하지 못했습니다. 참조하는 변수가 객체나 배열일 때만 이 문제가 발생하는건지요? let a = 0; this.interval = setInterval(() => { console.log(a); if(a === 0 ){ a = -1; }else if( a=== -1){ a = 1; }else if( a === 1){ a = 0; } },1000) 이 부분의 경우는 이상없이 잘 동작하는 걸 확인했습니다. 그런데 객체나 배열의 경우에만 비동기 참조관계가 어그러지는건지와 말씀하신 것 처럼 왜 imgCoords 변수가 고정되는지가 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
객체의 불변성에 대해서 질문드립니다.
state가 객체의 경우에는 복사를 활용해서 참조관계를 끊으면 되는 건가요? 그렇다면 자바스크립트 수업때 알려주셨던 JSON.parse(JSON.stringify())를 사용하면 되는 걸까요?
- 미해결웹 게임을 만들며 배우는 React
질문있습니다.
기존까지 빌드를 했을 때는 dist 폴더에 app.js 를 생성해서 빌드가 되었음을 눈으로 확인할 수 있었는데, 핫 리로딩을 하고 개발용서버를 통해 빌드를 한 시점부터 app.js 를 눈으로 확인할 수 없는데도 잘 작동이 되고 있어서 확인해본 결과 메모리 상에서 실행된다고 하는데 제가 해석한 내용이 맞는지 궁금해서 질문을 드립니다ㅠㅠ 그렇다면 왜 그렇게 되는지 궁금합니다!