무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨웹 게임을 만들며 배우는 React
마지막 강의 링크 질문
안녕하세요. 유튜브에서 제공된다 제목에 나와 있는데, 첨부파일이나 링크 없이, 그저 검정화면만 뜨는데, 링크 알 수 있을까요?
- 미해결웹 게임을 만들며 배우는 React
dist 폴더 생성 문의
이 설정의 경우도 dist 폴더가 생성되어야 하는게 맞는건가요? const path = require('path');const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')module.exports = { name: 'numberbaseball-setting', mode: 'development', // 실서비스: production devtool: 'eval', // 실서비스: hidden-source-map resolve: { extensions: ['.js', '.jsx'] }, entry: { // 입력 app: ['./client'], }, module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: { browsers: ['> 5% in KR'], // browserslist }, debug: true, }], '@babel/preset-react', ], plugins: [ '@babel/plugin-proposal-class-properties', 'react-refresh/babel', ], }, }], }, plugins: [ new RefreshWebpackPlugin() ], // 출력 output: { // 실제 경로 path: path.join(__dirname, 'dist'), filename: 'app.js', publicPath: '/dist/', // app.use('/dist', express.static(__dirname, 'dist') }, devServer: { publicPath: '/dist/', hot: true, },}; { "name": "numberbaseball", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development" }, "author": "", "license": "MIT", "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/plugin-proposal-class-properties": "^7.12.13", "@babel/preset-env": "^7.12.16", "@babel/preset-react": "^7.12.13", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "babel-loader": "^8.2.2", "react-refresh": "^0.9.0", "webpack": "^5.22.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" }} 제 경우는 위와 같은 설정에서 dist 폴더가 생성이 안되어서 아래와 같이 조치를 했지만 다음과 같은 에러가 발생합니다. webpack.config.js 상단에 const webpack = require('webpack'); 를 추가해주고 plugins: [ new RefreshWebpackPlugin(), new webpack.LoaderOptionsPlugin({ debug: true }),], package.json에 "scripts": { "dev": "webpack serve --env development", "webpack": "webpack"}, 를 추가해줘서 npm run webpack을 실행해보았는데요. 다음과 같은 에러가 발생해서 문의 남겨봅니다. (npm run dev에는 문제가 없습니다.) [Browserslist] Could not parse C:\Users\프로젝트\react-webgame\package.json. Ignoring it. 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\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\util\createHash.js:51:14) at NormalModule.updateHash (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\NormalModule.js:1129:8) at Compilation._createModuleHash (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\Compilation.js:3085:10) at Compilation.createModuleHashes (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\Compilation.js:3057:10) at hooks.optimizeChunkModules.callAsync.err (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\Compilation.js:2334:11) at Hook.eval [as callAsync] (eval at create (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\tapable\lib\Hook.js:18:14) at hooks.optimizeTree.callAsync.err (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\webpack\lib\Compilation.js:2294:36) at Hook.eval [as callAsync] (eval at create (C:\Users\프로젝트\react-webgame\숫자야구\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) npm ERR! code 1 npm ERR! path C:\Users\프로젝트\react-webgame\숫자야구 npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c webpack npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\rlawj\AppData\Local\npm-cache\_logs\2021-02-21T06_35_11_452Z-debug.log [Browserslist] Could not parse ~~ 부분은 신경 안써줘도 되는지도 궁금합니다. presets: [ ['@babel/preset-env', { targets: { browsers: ['> 1% in KR'], // browserslist }, debug: true, }], '@babel/preset-react', ],
- 미해결웹 게임을 만들며 배우는 React
recentCell 이해가 안가서 질문드립니다
recentCell 의 값을 action.row와 cell 값으로 기억 한다고 하셨는데, 그렇다면 recentCell 라는 [-1,-1]인 배열 스테이트가 [action.row, actino.cell] 로 변경되는거 아닌가요? 그렇다면 여기서 spread 하지않은 이유가 위에서 이미 tableData[action.row]를 복사해서 그런걸까요? 2.. switch문 쓸때 액션이름옆에 SET_WINNER에서는 중괄호 안하고 나머지 에서는 하셨는데 무슨 차이 일까요?
- 미해결웹 게임을 만들며 배우는 React
미래에서 온 제로초라...
잘 보고갑니다 ㅋㅋㅋ
- 해결됨웹 게임을 만들며 배우는 React
value is not a function
'땡' 일 경우는 문제가 없는데 딩동댕일 경우 아래와 같은 오류가 발생합니다ㅠ 도와주세요~! const path = require('path');const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')module.exports = { name: 'wordrelay', mode: 'development', // 실서비스: production devtool: 'eval', // 실서비스: hidden-source-map resolve: { extensions: ['.js', '.jsx'] }, entry: { // 입력 app: ['./client'], }, module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: { browsers: ['> 5% in KR', 'last 2 chrome versions'], // browserslist }, debug: true, }], '@babel/preset-react', ], plugins: [ '@babel/plugin-proposal-class-properties', 'react-refresh/babel', ], }, }], }, plugins: [ new RefreshWebpackPlugin() ], // 출력 output: { // 실제 경로 path: path.join(__dirname, 'dist'), filename: 'app.js', publicPath: '/dist/', // app.use('/dist', express.static(__dirname, 'dist') }, devServer: { publicPath: '/dist/', hot: true, },}; const React = require('react');const {useState, useRef} = React;const WordRelay = () => { const [word, setWord] = useState('Yohan-K'); const [value, setValue] = useState(''); const [result, setResult] = useState(''); const inputRef = useRef(null); const onSubmitForm = (e) => { e.preventDefault(); if (word[word.length - 1] === value[0]) { setResult('딩동댕'); setWord(value); value(''); inputRef.current.focus(); } else { setResult('땡'); setValue(''); inputRef.current.focus(); } } const onChangeInput = (e) => { setValue(e.target.value); } return ( <> <div>{word}</div> <form onSubmit={onSubmitForm}> <input ref={inputRef} value={value} onChange={onChangeInput} /> <button>입력!</button> </form> <div>{result}</div> </> );}module.exports = WordRelay;
- 미해결웹 게임을 만들며 배우는 React
npm -i @pmmmwh/react-refresh-webpack-plugin 에러납니다ㅠ
아위 그림과 같이 에러나는데 대체할 수 있는 방법이 있을까요?
- 미해결웹 게임을 만들며 배우는 React
이미지 div 부분의 style 템플릿 리터럴 부분이 적용이 되지 않습니다.
render() { const {result, score, imgCoord} = this.state; return ( <> {imgCoord} <div id="computer" style={{ background : `url('https://en.pimg.jp/023/182/267/1/23182267.jpg') ${imgCoord} 0` }}/> <div> <button id="rock" className="btn" onClick={() => this.onClick('바위')}>바위</button> <button id="scissor" className="btn" onClick={() => this.onClick('가위')}>가위</button> <button id="paper" className="btn" onClick={() => this.onClick('보')}>보</button> </div> <div>결과 {result}</div> <div>현재 {score}</div> </> ); } 1. 선생님 방식대로 따라했으나 이미지가 변경되지 않습니다. {imgCoord}를 별도로 꺼내서 찍어보면 변경이 되는데 <div id ="computer" 의 `${imgCoord}`여기에 넣을 경 해당 태그의 속성에서는 값이 변경이 되지 않습니다 .왜그럴까요 ?
- 해결됨웹 게임을 만들며 배우는 React
onSubmit 메소드 질문이요!
화살표 함수 문법이 잘 이해가 안가서 그런데 중괄호를 쓰면 값을 리턴해줘야 하는걸로 알고있는데 클래스(객체지향?)에서는 리턴을 안해줘도 되나요?
- 미해결웹 게임을 만들며 배우는 React
안녕하세요~ 질문이 있습니다!
안녕하세요~ 강의 잘 듣고 있습니다^^ 실습 따라하던중에 질문이 있습니다. react-refresh와 webpack-dev-server 적용 후 소스코드 수정을 하게되면 정상적으로 자동으로 반영이 됩니다. 그런데 http://localhost:8080 로 접속했을때만 변경사항이 적용되더군요.. 기존처럼 2.끝말잇기 경로 내의 index.html 을 브라우저로 직접 실행했을때는 변경사항이 적용되지 않아요.. 수동으로라도 적용할 수 있는 방법이 있을까요? (소스코드 변경 후 webpack 적용을 아예 못하겠어요ㅠㅠ) 로컬호스트 서버로 접속하는것 말고 기존처럼 정적 html파일을 브라우저로 직접 실행할때에도 webpack을 적용할 수 있는 방법이 궁금합니다!
- 미해결웹 게임을 만들며 배우는 React
TicTacToe에서 onClickTable에 역할을 알고싶습니다.
import React, {useEffect, useReducer, useCallback} from 'react'; import Table from './Table'; const initialState = { winner: '', turn: 'O', tableData: [['','',''],['','',''],['','','']], recentCell: [-1, -1], }; export const SET_WINNER = 'SET_WINNER'; export const CLICK_CELL = 'CLICK_CELL'; export const CHANGE_TURN = 'CHANGE_TURN'; export const RESET_GAME = 'RESET_GAME'; const reducer = (state, action) =>{ switch(action.type){ case SET_WINNER: return { ...state, winner: action.winner, }; case CLICK_CELL:{ const tableData2 = [...state.tableData]; tableData2[action.row] = [...tableData2[action.row]]; tableData2[action.row][action.cell] = state.turn; return{ ...state, tableData: tableData2, recentCell: [action.row, action.cell], } } case CHANGE_TURN:{ return{ ...state, turn: state.turn === 'O' ? 'X' : 'O', } } case RESET_GAME:{ return{ ...state, turn: 'O', tableData: [['','',''],['','',''],['','','']], recentCell: [-1, -1], } } default: return state; } }; const TicTacToe=()=>{ const [state, dispatch] = useReducer(reducer, initialState); const {tableData, turn, winner, recentCell} = state; const onClickTable = useCallback(()=>{ console.log("onClickTable") dispatch({type: SET_WINNER, winner: 'O'}); }, []) useEffect(()=>{ const [row, cell] = recentCell; if(row < 0){ return; } let win = false; if(tableData[row][0] === turn && tableData[row][1] === turn && tableData[row][2] === turn){ win = true; } if(tableData[0][cell] === turn && tableData[1][cell] === turn && tableData[2][cell] === turn){ win = true; } if(tableData[0][0] === turn && tableData[1][1] === turn && tableData[2][2] === turn){ win = true; } if(tableData[0][2] === turn && tableData[1][1] === turn && tableData[2][0] === turn){ win = true; } if(win){ dispatch({type: SET_WINNER, winner: turn}); dispatch({type: RESET_GAME}); } else{ let all = true; tableData.forEach((row)=>{ row.forEach((cell)=>{ if(!cell){ all = false; } }) }) if(all){ dispatch({type: RESET_GAME}); }else{ dispatch({type: CHANGE_TURN}); } } }, [recentCell]) return( <> <Table onClick = {onClickTable} tableData={tableData} dispatch={dispatch}/> {winner && <div>{winner}님의 승리</div>} </> ); } export default TicTacToe; 위에 코드에서 onClickTable이 어떤역할을 하는지 정확히 알고싶습니다. 함수 안에 console.log을 넣어봐도 실행중에 console창에 찍히지 않고, Table component에 props로 전달되어도 해당 component에서 쓰이는거 같지도 않고, Table에 자식component에 전달도 안되는것을 보니 어떤 역할을 하는것인지 아무리 생각해봐도 모르겠습니다. 긴 질문 읽어주셔서 감사합니다.
- 해결됨웹 게임을 만들며 배우는 React
웹스톰
리액트 강의는 웹스톰, 노드 강의때는 VS Code 이던데 제로초님이 웹스톰에서 VS Code로 갈아타게 된 계기가 궁금합니다. 현재는 어떤걸 사용하시나요?
- 미해결웹 게임을 만들며 배우는 React
동일하게 했는데 왜 저는 불필요한 렌더링이 발생할까요 ㅠㅠ?
안녕하세요. 강의 재미있게 보고있습니다.제가 강사님 코드랑 똑같이 따라서 해보고 있는데, 왜 성능 확인을 위한 highlight를 켰을 때 아래 이미지와 같이 불필요한 리렌더링이 발생하는 걸까요 ㅠㅠ? PureComponent를 적용해도 동일한데, 어떤 문제인지 궁금합니다.
- 해결됨웹 게임을 만들며 배우는 React
useEffect안에서의 배열 질문 있습니다
안녕하세요. 강의보다가 궁금한 점이 생겨서 질문드립니다. 배열에 감지할 state를 여러개 넣을 수 있다고 배웠는데 강의에서처럼 [imgCoord, score] 로 작성하면 둘 다(&&) 바뀌었을 때 실행되는 건가요, 아니면 둘 중 하나만(||) 바뀌어도 실행되는 건가요??
- 미해결웹 게임을 만들며 배우는 React
안녕하세요! 에러발생위치에 대해 궁금한게 있습니다.
안녕하세요! 제로초님 강의 덕분에 리엑트 열심히 공부하고있습니다 ㅎㅎ 한가지 궁금한게 있어서 질문 올려요. 에러가 발생했는데요, 에러 발생위치 보면 TicTacToc.jsx:98:22 에 에러가 발생했다고 뜨는데 해당 TicTacToc.jsx에는 98번째 줄이 없습니다 ㅠㅠ 그래서 저 콘솔창의 at TicTacToc (VM2667 TicTacToc.jsx:98) 를 클릭했더니 여기서 에러가 발생했다고 나오네요...... 이렇게 되면 첫번째 사진의 TicTacToc.jsx에서는 실제 어느 위치가 잘못되었는지 알 수 없는데........ 이거 알 수 있는 방법 있을까요? ㅠㅠㅠㅠ 저 콘솔창의 에러메세지만 보면 도대체 어디에 있는 tableData가 정의가 안되어있다는건지 모르겠습니다.. 감사합니다!!
- 미해결웹 게임을 만들며 배우는 React
함수도 분리 가능한지 궁금합니다.
안녕하세요 제로초님 강의 잘 듣고 있습니다. 이번 강의에서 컴포넌트 분리하는 방법을 배웠는데요. 혹시 함수 부분도 기능별로 분리할 수 있는지 궁금합니다. 또 리액트에서 스타일 작업을 할때는 기존에 html에 css를 link 걸었던 방식대로 하면 될까요? 너무 초보적인 질문인가 싶긴 하지만 궁금해서 질문 남겨봅니다ㅎㅎ
- 미해결웹 게임을 만들며 배우는 React
const에 대해 질문이 있습니다!
멋진 강의 정말 감사합니다!!! 리엑트에 대해 알아가는 즐거움이 있어요 ㅎㅎ 강의 중에 에러가 발생했는데 아무리 생각해봐도 도대체 왜 에러가 발생하는지 모르겠고 해결이 안되서 질문올려요 ㅠㅠ 그냥 첫번째 줄에서 const React, {useState} = require('react')를 통해 리엑트를 불러왔을뿐인데 에러가 발생합니다... 그래서 밑에 사진처럼 import Raect, {useState} from 'react'로 수정했더니 이번에는 이런 에러가 발생합니다... 구글이랑 스탭오버플로에 검색해서 찾아봤는데 에러와 관련없는 질문만 있는거같아요... 두 에러가 어떤 이유인지 알 수 있을까요 ㅠㅠㅠㅠㅠ 감사합니다!!
- 미해결웹 게임을 만들며 배우는 React
좋은 강의 너무 감사합니다 궁금한점이 있습니다.
hot reloading 으로 바꾼뒤로는 internal/crypto/hash.js:84 throw new ERR_INVALID_ARG_TYPE( 로 시작하는 에러로 더이상 npx webpack 이 되지 않았습니다. 그리고 값이 바뀌어도 [WDS] not changed 라고 뜨면서 값이 바뀌지 않았습니다 이유가 궁금합니다!!
- 미해결웹 게임을 만들며 배우는 React
웹팩관련 에러인거같은데.. 해결이 안됩니다 ㅠㅠ
안녕하세요 ㅎㅎ 강의 감사하게 잘 보고 있습니다. 숫자야구 만드는 챕터에서 웹팩을 구성하는 내용이 없어서 제가 끝말잇기에 나오는 webpack.config.js의 내용 복사해서 만들고 package.json도 복사해서 필요한 패키지를 다 설치했는데... 일이렇게 에러가 뜹니다 ㅠㅠ 구글에 검색해보면 대부분 나오는 답이 import를 잘못했다고 하는데 아무리 봐도 잘못된게 없는거같은데.. 전부 require로 불러왔거든요.. 어떤 이유인지 알 수 있을까요? 미리 감사합니다!!!
- 미해결웹 게임을 만들며 배우는 React
input;
ref 구현하실 때 onRefInput = (c) => { ... } 상단에 input; 을 별도로 선언하셨는데, 반드시 적어야할까요? onRefInput이 동작하면서 this.input을 선언하지 않나 싶어서 문의드립니다. 해당 부분을 없애도 실제 코드 동작에 오류가 없기도 해서요 :)
- 미해결웹 게임을 만들며 배우는 React
로또 추첨 timeouts
안녕하세요 제로초님 강의잘 듣고 있는 수강생입니다. 로또추첨에서 useEffect 크롬 개발도구 창에서 콘솔을 보면 Lotto.jsx:25 (7) [9, 10, 11, 12, 13, 14, 15] , (7) [148, 149, 150, 151, 152, 153, 154] 이런식으로 배열안에 값이 나오는데 저 값이 어떻게 나오고 뭔지를 잘모르겠습니다 ...