무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
☆ Cannot find module 'babel-preset-env' 오류 해결방법
options: { presets: ['@babel/env', '@babel/react'] } presets: ['@babel/preset-env' ...] 영상에서는 이렇게 나오는데요 "preset-" 얘들을 빼주시면 정상적으로 빌드 됩니다
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 강의 잘 듣고있습니다. 질문이요
dev서버에서 사용하는 가상경로 publicPath: '/dist/'가 기존에 output 있는데서 devServer에도 추가를 해주게 바뀐거 같은데요 마지막에 구버전 강의 설명 들어보니 devServer에서 이용하는거 같은데 output에도 남겨놓는 이유는 뭔지 알 수 있을까요?
- 미해결웹 게임을 만들며 배우는 React
webpack build 관련 질문 드립니다.
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. const path = require('path');const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');module.exports = { name: 'word-relay-setting', mode: 'development', devtool: 'eval', resolve:{ extensions: ['.js','.jsx','.css'], }, entry: { app:['./client'], }, module:{ rules:[{ test:/\.jsx?/, loader: 'babel-loader', options:{ presets:['@babel/preset-env','@babel/preset-react'], plugins:[ '@babel/plugin-proposal-class-properties', 'react-refresh/babel', ], }, }], }, plugins:[ new RefreshWebpackPlugin() ], output:{ path:path.join(__dirname,'dist'), filename: "app.js" }, devServer:{ publicPath: '/dist/', hot:true, }}; 위와 같은 webpack.cofig.js 을 가지고 npm run dev 를 하면 webpack serve --env development 가 잘 동작해서 핫로딩 까지 정상 작동을 합니다. 그런데 build 결과물인 app.js 파일을 얻고자 npx webpack을 실행하면 아래와 같은 오류가 떠서 검색을 해봤는데 쉽게 찾아지지 않아서 여쭤보게 됐습니다. 어떤 문제인지 알수있을까요? internal/crypto/hash.js:58 throw new ERR_INVALID_ARG_TYPE('data', ^ TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, TypedArray, or DataView. Received type undefined at Hash.update (internal/crypto/hash.js:58:11) at BulkUpdateDecorator.update (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\util\createHash.js:49:14) at NormalModule.updateHash (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\NormalModule.js:1048:8) at Compilation.createModuleHashes (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\Compilation.js:2619:12) at hooks.optimizeChunkModules.callAsync.err (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\Compilation.js:1957:11) at Hook.eval [as callAsync] (eval at create (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous> :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\tapable\lib\Hook.js:18:14) at hooks.optimizeTree.callAsync.err (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\Compilation.js:1917:36) at Hook.eval [as callAsync] (eval at create (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous> :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\tapable\lib\Hook.js:18:14)
- 미해결웹 게임을 만들며 배우는 React
componentDidUpdate
componentDidUpdate(prevProps, prevState) { if (this.state.redo === false) { this.runtimeouts(); } //오류납니다 } //if(this.state.bonus === null) 이어도오류가납니다 ㅠㅠ 반면에 강의처럼 if(this.state.winBalls.length === 0)을 했을경우엔 잘 동작하네요 왜그럴까요..(6-3 6분 20초)
- 미해결웹 게임을 만들며 배우는 React
리액트 css 질문드립니다!!
리액트는 자바스크립트 담당이라고 하셨는데 css-Module 이나 styled-components는 사용안하시나요? 프론트에서 css쪽은 어떻게 작성하는게 제일 좋은 방법일까요 ㅠㅠ
- 해결됨웹 게임을 만들며 배우는 React
useEffect 최적화 확인 해서 질문입니다.
1. useEffect와 useRef를 사용하여 최적화 확인을 하는 부분이 있는데 useRef를 사용하는 이유가 뭔가요? useRef는 dom을 직접선택할때와변하지만 렌더링 시키고 싶지 않은 데이터를 저장하는 용도로 쓴다고 앞에서 언급하셨는데.최적화때 useRef를 사용하는 이유가 궁금합니다.2. 또 useRef에 담긴 값들 ref.current = [rowIndex, cellIndex, dispatch, cellData]; 이 비교를 하는 console.log(cellData === ref.current[3],) 여기선 false가 뜨는데 console.log(cellData); 이렇게만 찍어보면 ref.current[3]의 값과 똑같은O 또는 X가 뜹니다. 예상컨데 ref.current[3]의 값이 기존의 빈 배열의값 ('')이 나와야 할것같은데 왜 이렇게 뜨는건가요? 질문을 잘 작성한건지 모르겠네요 ㅠ
- 해결됨웹 게임을 만들며 배우는 React
갓초님 질문이있습니다
swich문 CLICK_CELL 안에서 return{ ...state, tableData, }; 이건 기존에 state에서 tableData 값을 적용시킨후 객체로 반환한다는 말인가요? 햇갈리는게 로또에서 사용했던 setWinBalls((prevWinball) => [...prevWinball, winNumbers[i]]); 에서는 기존 winBall을 배열안에 넣고 그뒤에 winNumber[i]를 추가해 주는 것으로 이해헀는데 위에 리턴에는 같은 방식으로 적용되는것 같지가 않아서요.
- 해결됨웹 게임을 만들며 배우는 React
onClick = {() => 함수}가 잘 이해되지 않습니다.
다른 질문에서도 있었는데 this.onClickBtn('바위')가 왜 함수가 아닌지 이해가 안됩니다.이전에 했던 반응속도에서는 onClick에서 () => 없이 바로this.onClickScreen을 걸어주었는데 두개의 차이점을 모르겠습니다.조금 더 자세한 설명 부탁드려요~강의는 너무 잘 보고 있습니다 ^0^
- 미해결웹 게임을 만들며 배우는 React
Hooks memo가 적용이 안되네요.
const React = require('react') const { memo } = React const Try = memo(({tryInfo}) => { return ( <li> <div>{tryInfo.try}</div> <div>{tryInfo.result}</div> </li> ) }) module.exports = Try memo를 적용하였지만 전체에서 렌더링이 일어나고 있습니다. 이 상황에서 부모 컴포넌트에 memo를 적용하면 렌더링 최적화가 됩니다.
- 미해결웹 게임을 만들며 배우는 React
Props 전달과정에서 발생한 에러입니다.
Error Objects are not valid as a React child (found: object with keys {fruit, beverage}). If you meant to render a collection of children, use an array instead. 이란 에러가 발생했습니다. const fruits = [ { fruit: '사과', beverage: '사과쥬스' }, { fruit: '딸기', beverage: '딸기우유' }, { fruit: '오렌지', beverage: '오렌지쥬스' } ] return ( <> <h1>숫자야구</h1> <input maxLength={4} ref={input} type="number" onChange={onChangeHandler} value={myNumber} onKeyPress={onPressEnter}/> <button onClick={onClickHandler}>제출</button> <ul> {fruits.map((fruit, index)=>{ return ( <Try fruit={fruit} index={index} /> ) })} const React = require('react') const Try = (fruit, index) => { return ( <li> <div>{fruit.fruit}</div> <div>컨텐츠</div> <div>컨텐츠</div> <div>컨텐츠</div> <div>컨텐츠</div> <div>컨텐츠</div> </li> ) } module.exports = Try 제가 생각한 시나리오는 1. fruits의 배열을 map 반복문으로 돌린다. 2. 객체의 데이터를 Try 데이터로 fruit로 보낸다. 3. Try 컴포넌트가 fruit을 받아 그 안의 fruit 만 출력한다. 4. 예상 결과는 사과, 딸기 오렌지 가 출력되는 것 자식 컴포넌트에 Props로 받아 props.fruit.fruit 하면 정상적으로 출력됩니다. 자식 컴포넌트의 Props로 전달받은 데이터를 선언해서 사용해도 되는 것으로 알고 있는데 잘못된 방식인가요?
- 미해결웹 게임을 만들며 배우는 React
웹팩 설정후 정상적으로 webpack 구동은 되는데 localhost에서 확인하는 방법을 모르겠습니다.
웹팩 설정을 위한 새로운 프로젝트를 만들어 구구단의 프로젝트와 단절시켰습니다. client.jsx index.html package.json webpack.config.js WordRealy.jsx 모두 생성하였고, 정상적으로 webpack 은 구동됩니다. localHost 를 어떻게 설정하신지 몰라서 화면으로 보지 못하고있는데 어떻게 하면 화면을 볼 수 있을까요?
- 미해결웹 게임을 만들며 배우는 React
hot-loader 실행 안됨 질문
자동으로 build하는 hot-loader 사용 부분 강의를 들으면서 따라하다가 안되는 부분이 있어서 질문 드립니다. 강의에서 알려주신대로 차근차근했는데 제가 어느 부분을 빠뜨렸는지 npm run dev하면 error가 뜨더라구요. 우선 제가 정리한 자동 build hot-loader 적용 방법은 다음과 같습니다. 1. 관련 플러그인 설치 > npm i -D react-hot-loader > npm i -D webpack-dev-server 2. package.json script 변경 "scripts": { "dev": "webpack-dev-server --hot" }, 3. client.jsx 내용 변경 및 추가 const { hot } = require('react-hot-loader/root'); // 추가 const Hot = hot(WordRelay); // 추가 ReactDom.render(<Hot />, document.querySelector('#root')); // 변경 4. webpack.config.js 내용 추가 module > rules > options > plugins에 'react-hot-loader/babel' 추가 그리고 npm run dev 명령어 실행시 에러는 다음과 같습니다. 에러 내용 중간에 Error: Cannot find module 'webpack-cli/bin/config-yargs' 구글링을 해보니 webpack webpack-cli가 최신버전이 아니라서 오류가 뜬다길래 제 버전을 확인해보니 가장 최근이라서요.. 제 package.json은 다음과 같습니다. 빠뜨린 부분 알려주시면 감사하겠습니다 ㅜㅜ
- 미해결웹 게임을 만들며 배우는 React
constructor 안써도 된다고 하셧는데
제 코드에서 지우니까 render에서 오류가 나서요 ㅠㅠ 왜일까용,, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <title>gugudan</title> </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:'', answer:'', }; } //직접만든 함수는 화살표함수만 써야함! onSubmit=(e)=>{ e.preventDefault(); if(parseInt(this.state.value)===this.state.first*this.state.second){ this.setState({ result:'correct', first:Math.ceil(Math.random()*9), second:Math.ceil(Math.random()*9), value:'', answer:this.state.first*this.state.second+' ', }) }else{ this.setState({ result:'wrong', value:'', answer:'틀렷음 ', }) } } onChange=(e)=>{ this.setState({value:e.target.value}) } render(){ return ( <> <div>{this.state.first}곱하기 {this.state.second}는?</div> <form onSubmit={this.onSubmit}> <input type="number" value={this.state.value} onChange={this.onChange}/> <button onClick={this.onSubmit}>입력!</button> </form> <div>{this.state.answer} {this.state.result}</div> </> ); } } //<></>이거 안되면 <React.Fragment>이걸로 쓰면 됨다 </script> <script type="text/babel"> ReactDOM.render(<Gugudan/>,document.querySelector('#root')) </script> </body> </html>
- 미해결웹 게임을 만들며 배우는 React
dispatch가 자식컴포넌트로 넘어가질 않습니다.
(사진)
- 미해결웹 게임을 만들며 배우는 React
tableData.length를 props로 받아올때
Table.jsx에서, tableData.length를 props로 받아올때, Table함수를 화살표함수로 쓰지 않으면 에러가 나던데 왜 그럴까요? class 컴포넌트 때처럼 this의 의미가 달라지는 것도 아닌데 말이죵...
- 미해결웹 게임을 만들며 배우는 React
12분 30초
12분 30초쯤에 const 순서가 중요하다고 언급해주셨는데요, jsx파일 맨 윗쪽에 'use strict'를 쓰지 않는 한 순서에 상관없이 잘 작동할 것 같은데.. 제 생각이 맞는건가요?
- 웹 게임을 만들며 배우는 React
가위바위보 사진이 안보입니다..
삭제된 글입니다
- 미해결웹 게임을 만들며 배우는 React
this.timeout
(사진)
- 미해결웹 게임을 만들며 배우는 React
제로초님 강의 감사합니다. 근데 useMemo에서요!!
const getWinNumbersMemo = useMemo(() => getWinNumbers(), []); const [winNumbers, setWinNumbers] = useState(getWinNumbersMemo); state에서 초기에 memo함수로 받아서 getWinNumbers함수가 렌더링이 처음 한번만 되 자나요 const onClickRedo = useCallback(() => { setWinBalls([]); setWinNumbers(getWinNumbers()); 근데 여기서는 memo가 안된 getWinNumbers()를 썻는데 getWinNumbers가 한번만 렌더링 되는건 잘 이해가 안가네요 처음 useState에서 메모가 안된 초기함수를 받았을땐 getWinNumbers가 계속 호출되다가 초기함수를 memo된 함수로 받았을때는 왜 여기 부분도 같이 렌더링이 한번만 되나요??? 여기는 메모함수를 받지 않앗는데요 setBonus(null); setRedo(false); timeouts.current = []; }, [winNumbers]); 강의는 정말 너무 좋아요~
- 미해결웹 게임을 만들며 배우는 React
babel 미설치
안녕하세요 제로초님 강의 도움 많이 되고 있습니다. 영상에선 babel설치 안하시고 웹팩 실행하시니 에러가 나셔서 바벨 설치 하셨는데요 저는 에러가 안나고 잘 되었습니다. 혹시 바벨 설치 안해도 되게 바뀐 건가요?? node v12.17.3 npm v6.14.6 react v16.13.1 vscode v 1.49.1 입니다.