웹 게임을 만들며 배우는 React대시보드

redux 구조 볼수있네용 ㅋㅋ

아마 최신 babel에서 문법이 바뀌었나봅니다. webpack.config.js 에서 presets: 이안에 browers 를 넣을텐데 options: { presets: [ '@babel/preset-env', '@babel/preset-react' ], plugins: [ '@babel/plugin-proposal-class-properties' ] } 위에처럼 browsers를 지우시고 package.json 에 "browserslist" : ['...'] 이렇게 추가해주세요 (아래) "browserslist": [ "> 1% in KR", "not dead", "ie 11" ]

options: { presets: ['@babel/env', '@babel/react'] } presets: ['@babel/preset-env' ...] 영상에서는 이렇게 나오는데요 "preset-" 얘들을 빼주시면 정상적으로 빌드 됩니다

dev서버에서 사용하는 가상경로 publicPath: '/dist/'가 기존에 output 있는데서 devServer에도 추가를 해주게 바뀐거 같은데요 마지막에 구버전 강의 설명 들어보니 devServer에서 이용하는거 같은데 output에도 남겨놓는 이유는 뭔지 알 수 있을까요?

강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/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)

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초)

리액트는 자바스크립트 담당이라고 하셨는데 css-Module 이나 styled-components는 사용안하시나요? 프론트에서 css쪽은 어떻게 작성하는게 제일 좋은 방법일까요 ㅠㅠ

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]의 값이 기존의 빈 배열의값 ('')이 나와야 할것같은데 왜 이렇게 뜨는건가요? 질문을 잘 작성한건지 모르겠네요 ㅠ

swich문 CLICK_CELL 안에서 return{    ...state,    tableData, }; 이건 기존에 state에서 tableData 값을 적용시킨후 객체로 반환한다는 말인가요? 햇갈리는게 로또에서 사용했던  setWinBalls((prevWinball) =>  [...prevWinball, winNumbers[i]]); 에서는 기존 winBall을 배열안에 넣고 그뒤에 winNumber[i]를  추가해 주는 것으로 이해헀는데 위에 리턴에는 같은 방식으로 적용되는것 같지가 않아서요.

다른 질문에서도 있었는데 this.onClickBtn('바위')가 왜 함수가 아닌지 이해가 안됩니다.이전에 했던 반응속도에서는 onClick에서 () => 없이 바로this.onClickScreen을 걸어주었는데 두개의 차이점을 모르겠습니다.조금 더 자세한 설명 부탁드려요~강의는 너무 잘 보고 있습니다 ^0^

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를 적용하면 렌더링 최적화가 됩니다.

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로 전달받은 데이터를 선언해서 사용해도 되는 것으로 알고 있는데 잘못된 방식인가요?

웹팩 설정을 위한 새로운 프로젝트를 만들어 구구단의 프로젝트와 단절시켰습니다. client.jsx index.html package.json webpack.config.js WordRealy.jsx 모두 생성하였고, 정상적으로 webpack 은 구동됩니다. localHost 를 어떻게 설정하신지 몰라서 화면으로 보지 못하고있는데 어떻게 하면 화면을 볼 수 있을까요?

자동으로 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은 다음과 같습니다. 빠뜨린 부분 알려주시면 감사하겠습니다 ㅜㅜ

제 코드에서 지우니까 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>

(사진)

Table.jsx에서, tableData.length를 props로 받아올때, Table함수를 화살표함수로 쓰지 않으면 에러가 나던데 왜 그럴까요? class 컴포넌트 때처럼 this의 의미가 달라지는 것도 아닌데 말이죵...

12분 30초쯤에 const 순서가 중요하다고 언급해주셨는데요, jsx파일 맨 윗쪽에 'use strict'를 쓰지 않는 한 순서에 상관없이 잘 작동할 것 같은데.. 제 생각이 맞는건가요?

삭제된 글입니다

(사진)