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

안녕하세요! 제가 강의를 보며 npx webpack 명령어를 실행하고 아래와 같은 에러를 만났습니다.아래는 제 webpack.config.js 파일입니다.npx webpack 명령어를 실행하면 /dist/app.js 파일이 생성되기는 하지만 깔끔하지 않은 모습입니다. 우선 17강까지 듣고 잠시 멈춰둔 상태입니다. 검색해도 원인을 좀처럼 찾기 힘들어서 문의글 남겨봅니다. 감사합니다!

class LikeButton extends React.Component { constructor(props) { super(props); this.state = {liked: false}; this.onClickButton = this.onClickButton.bind(this) // 이걸 안써주면 동작 안함 } onClickButton() { this.setState({liked: true}); } render() { if (this.state.liked) { return 'You liked this.'; } return ( <button onClick={this.onClickButton}> Like </button> ); } }이 코드에서 this가 button 태그를 가르키기 때문에 bind함수로 LikeButton 클래스 인스턴스로 바인딩 해주어야 화살표 함수가 아닌 일반 function 키워드 함수로 메서드를 정의했을때 동작하는게 맞는걸까요? 화살표 함수라면 button 태그를 가르키지 않고 바깥 this를 그대로 가져오기 때문에 LikeButton 클래스 인스턴스를 가져오는 것이 맞을까요?  

아래와 같이 바벨 패키지가 다운로드 되지 않습니다. 어떻게 진행해야 될지 모르겠네요. 도움을 구합니다.

소스와 코드 요소를 작성할 때 위치 잡는 방법 팁 같은게 있나요?

2-5. 웹팩으로 빌드하기 수강 중에npx webpack 실행 시 밑에 사진처럼 오류가 발생됍니다client.jsx 파일입니다index.html 파일입니다package.json 파일입니다("main": "index.js" 밑에 debug라고 생성됐습니다)webpack.config.js 파일입니다WordRelay.jsx 파일입니다

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/ ERROR in main Module not found: Error: Can't resolve './src' in 'C:\study\zerocho\lecture' resolve './src' in 'C:\study\zerocho\lecture' using description file: C:\study\zerocho\lecture\package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration using description file: C:\study\zerocho\lecture\package.json (relative path: ./src) no extension Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src is not a file .js Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src.json doesn't exist .wasm Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src.wasm doesn't exist as directory existing directory C:\study\zerocho\lecture\src using description file: C:\study\zerocho\lecture\package.json (relative path: ./src) using path: C:\study\zerocho\lecture\src\index using description file: C:\study\zerocho\lecture\package.json (relative path: ./src/index) no extension Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src\index doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src\index.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src\index.json doesn't exist .wasm Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src\index.wasm doesn't exist webpack 5.88.2 compiled with 1 error and 1 warning in 196 ms처음에 위와 같은 에러코드가 나와서 lecture안에 src폴더를 만들고 그안에 index.js, index.json, index.wasm 파일을 직접 생성해주었습니다.그 다음에는 아래와 같은 에러코드가 나오면서 main,js 파일이 생성됐는데 안에는 아무 내용도 없습니다.asset main.js 0 bytes [emitted] [minimized] (name: main) ./src/index.js 1 bytes [built] [code generated] WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/ webpack 5.88.2 compiled with 1 warning in 212 ms PS C:\study\zerocho\lecture> npx run Need to install the following packages: run@1.4.0 Ok to proceed? (y) y Found 0 argument(s). Expected one or more. Usage: runjs [SIGNAL] somecode.js [--args] Ex: runjs somecode.js --args runjs SIGUSR2 somecode.js --args그리고 webpack.config.js에 보면 강의에서 했던대로 mode: "development",라고 이미 적용되어있는 상태입니다.

2-9강 따라하는도중에 에러가 났는데요.에러가 난 이유는 제 코드에는 output란에 publicPath가 없어서인것 같은데, 정확한 이유를 모르겠습니다.제로초님코드에는 output에 publicPath가 자동으로 생성되어있고, devServer란에 그대로 따라치라 하셨는데 저는 애초에 publicPath가 없어서요. 그런데 궁금한건 2-8강 제로초님코드를 보니 저처럼 output에 publicPath가 없었는데, 2-9강에서 갑자기 생겨있더라고요.

제로초님 그대로 따라했고,성공적으로 빌드 되었단 메시지도 받았습니다만, WordRelay.htmld을 실행하면, 이런 메시지가 뜨면서 연결이 안되어, 구글링을 통해, 해결방법을 다 따라해봤습니다. 네트워크 옆에 화살표 제한없음으로 변경해보는 방법은 효과가 없었고, launch.json파일을 수정하면 된다는 글을 보고 따라해봤으나, 아까 나왔던 빨간 메시지와함께 이런 화면이 뜹니다... 어떻게 해야될까요 문제는 이게 세번째하는겁니다. lecture1에서 lecture3까지 완전 처음부터 다시 해봤으나 계속 똑같은 문제가 발생합니다. 이런걸로 리액트공부를 포기하고싶진 않은데, 아무리 해봐도 안되니 너무 답답하네요...

웹팩은 빌드가 된거같아요. 다만 제로초님처럼 plugin은 하지 않았어요. 오히려 그걸 쓰면 에러가 나더라고요. 그리고 이제 크롬을 열었는데, 처음에는 페이지는 뜨는데 'Hello, webpack'이 안떴고, 이후에 다시 크롬에 연결해보니 아래와같은 화면이 뜨네요. 처음부터 다시해야하는걸까요?

Git 에서 프로젝트를 받아서 진행 중입니다.위 사진 상의 오류가 소스 수정할 때마다 나와서 .. 하나하나 수동을 처리하는데 시간이 너무 오래 걸립니다Webstorm 사용 중이고요.. PC 는 Mac 입니다option + enter 키 등으로 자동 완성을 할 수 있었던 걸로 기억하는데..설정 방법을 잘 모르겠습니다.

useEffect(() => { interval.current = setInterval(changeHand, 100); console.log("다시 실행"); return () => { console.log("종료"); clearInterval(interval.current); }; }, []);위 코드는 '가위바위보' hooks에서 useEffect를 사용하는 코드 중 일부입니다. 제가 궁금한 것은 위 코드에서 왜 setInterval을 해주었는데도 '주먹'에서 '가위'로 바뀌고 멈추는가 입니다.  componentDidMount() { // 비동기 요청 많이 한다고 함. // 해제안해주면 메모리를 많이 먹음 this.interval = setInterval(this.changeHand, 100); }클래스로 만든 rsp 코드에서는 컴포넌트가 생성되고 setInterval을 하면 주먹-가위-보가 100ms 주기로 잘 바뀝니다.useEffect()에서 두 번째 인자로 아무것도 넣어주지 않으면 초기 렌더링 될 시에만 실행되는 것으로 알고 있는데요, 한 번 실행된 코드에 setInterval이 있기 때문에 가위로만 바뀌는 게 아닌 100ms마다 주먹-가위-보로 반복되어야 하는 거 아닌가요? 이와 별개로 어떤 유료 리액트 코스보다 좋은 강의 감사드립니다.

위 사진이 에러 내용입니다.제 생각에는 webpack.config,js파일에서 extensions에서 에러가 발생한 것 같은데 뭐가 잘못된지 모르겠습니다.

if ( state.data.row * state.data.cell - state.data.mine === state.opendCount + openedCount ) { halted = true; result = "승리하셨습니다"; } return { ...state, tableData, opendCount: state.opendCount + openedCount, halted, result, };위 코드는 제로초님이 작성하신 코드입니다여기서 halted와 result에 값을 갱신할때 state.halted 이렇게 한 것이 아니고 그냥 halted=true이렇게 갱신을 하셨습니다 if ( state.data.row * state.data.cell - state.data.mine === state.opendCount + openedCount ) { state.halted = true; state.result = "승리하셨습니다"; } return { ...state, tableData, opendCount: state.opendCount + openedCount, halted: state.halted, result: state.result, };왜 state를 안 붙이고 그냥 할 수 있을까 해서 state를 붙여서 해봤더니 return 구문에서 halted: state.halted 이거 처럼 따로 갱신하는 구문이 필요했습니다 state를 붙일 때와 안붙일때 어떤 차이가 있나요?

  case CLICK_CELL: { // table데이터를 얕은 복사를 한다 const tableData = [...state.tableData]; //이 부분 왜 필요한지 확인 console.log(tableData); tableData[action.row] = [...tableData[action.row]]; console.log(tableData); tableData[action.row][action.cell] = state.turn; console.log(tableData); return { ...state, tableData, recentCell: [action.row, action.cell], }; }tableData를 얕은 복사로 복사한다음에 row데이터를 갱신하고 cellData를 복사하는 갱신방법이 이해가 안되어서 하나씩 console.log를 찍으면서 확인해 봤습니다확인을 해보니 tableData는 tableData[action.row] = [...tableData[action.row]];이 코드가 실행되기 전부터 table에 갱신되 o값을 가지고 있었습니다 그래서 생각해볼때 tableData에 따로 추가적으로 갱신이 필요없어 보이는데 그렇다고 코드를 지워보니 제대로 동작은 안하는 것 같습니다 왜 추가적으로 갱신하는 코드를 넣어줘야하나요?

강의에서는 불변성을 지키기 위해 Shallow Copy(얕은 복사)를 하신다고 하셨는데,이는 많은 혼동을 야기하는 것 같습니다.https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copyhttps://developer.mozilla.org/en-US/docs/Glossary/Deep_copy에 따르면,Shallow Copy 는 원본 객체의 속성과 동일한 참조를 공유하는 복사본이고Deep Copy 는 원본 객체의 속성과 동일한 참조(동일한 기본 값을 가리킴)를 공유하지 않는 복사본이라 되어있습니다.강사 님이 생각하시는 참조가 Shallow Copy 고,불변성을 지키기 위해 사용하는 것이 Deep Copy 가 아닌지요?강사님의 강의는 앞으로 개발 능력 향상에 아주 도움이 되기에, 정확한 이해를 위해 질문드려봅니다.

timer 때문에 Table 전체가 리렌더링되는 문제를 해결하기위해강의에서는 Table과 하위컴포넌트 Tr, Td 모두에 memo를 씌우셨고하위컴포넌트가 다 memo가 돼있어야지 상위컴포넌트도 memo를 적용할 수 있게 된다고 말씀하셨는데요제가 Tr Td에 memo를 없애고Table에만 적용해봤더니그래도 리렌더링되지 않길래이렇게 해도 되는지 궁금해서 질문드립니다 import React, { useReducer, createContext, useMemo, useEffect } from 'react'; import Table from './Table'; import Form from './Form'; // 중략 const MineSearch = () => { const [state, dispatch] = useReducer(reducer, initalState); const { tableData, halted, timer, result } = state; const value = useMemo(() => ({ tableData: tableData, halted: halted, dispatch }) , [tableData, halted]); useEffect(() => { if (!halted) { const timer = setInterval(() => { dispatch({ type: INCREMENT_TIMER }); }, 1000); return () => { clearInterval(timer); } } }, [halted]); return ( <TableContext.Provider value={value}> <Form /> <div>{timer}</div> <Table /> <div>{result}</div> </TableContext.Provider> ); }; export default MineSearch;import React, { useContext, memo } from 'react'; import Tr from './Tr'; import { TableContext } from './MineSearch'; const Table = memo(() => { const { tableData } = useContext(TableContext); return ( <table> {Array(tableData.length).fill().map((tr, i) => <Tr key={i} rowIndex={i} />)} </table> ); }); export default Table;import React, { useContext, memo } from 'react'; import Td from './Td'; import { TableContext } from './MineSearch'; const Tr = ({ rowIndex }) => { const { tableData } = useContext(TableContext); return ( <tr> {tableData[0] && Array(tableData[0].length).fill().map((v, i) => <Td key={i} rowIndex={rowIndex} cellIndex={i} />)} </tr> ); }; export default Tr; import React, { useContext, useCallback, memo, useMemo } from 'react'; import { TableContext, CODE, OPEN_CELL, CLICK_MINE, FLAG_CELL, QUESTION_CELL, NORMALIZE_CELL } from './MineSearch'; // 중략 const Td = ({ rowIndex, cellIndex }) => { const { tableData, dispatch, halted } = useContext(TableContext); const onClickTd = useCallback(() => { if (halted) { return; } switch (tableData[rowIndex][cellIndex]) { case CODE.OPENED: case CODE.FLAG: case CODE.QUESTION: case CODE.FLAG_MINE: case CODE.QUESTION_MINE: return; case CODE.NORMAL: dispatch({ type: OPEN_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.MINE: dispatch({ type: CLICK_MINE, row: rowIndex, cell: cellIndex }); return; default: return; } }, [tableData[rowIndex][cellIndex], halted]); const onRightClickTd = useCallback((e) => { e.preventDefault(); if (halted) { return; } switch (tableData[rowIndex][cellIndex]) { case CODE.NORMAL: case CODE.MINE: dispatch({ type: FLAG_CELL, row: rowIndex, cell: cellIndex }); return case CODE.FLAG: case CODE.FLAG_MINE: dispatch({ type: QUESTION_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.QUESTION: case CODE.QUESTION_MINE: dispatch({ type: NORMALIZE_CELL, row: rowIndex, cell: cellIndex }); return; default: return; } }, [tableData[rowIndex][cellIndex], halted]); return ( <RealTd onClickTd={onClickTd} onRightClickTd={onRightClickTd} data={tableData[rowIndex][cellIndex]} /> ) }; const RealTd = memo(({ onClickTd, onRightClickTd, data }) => { console.log('RealTd rendered'); return ( <td onClick={onClickTd} onContextMenu={onRightClickTd} style={getTdStyle(data)} > {getTdText(data)}</td> ); }); export default Td;

리엑트를 새로고침하여 시작할 때 처음 시작할때 랜더링이 두번 되는 것 같습니다찾아보니다 StrictMode를 사용하면 두번 랜더링이 되는것 같은데 저는 StricMode를 사용하고 있지 않습니다import React from "react"; import ReactDOM from "react-dom/client"; import Lotto from "./Lotto"; const root = ReactDOM.createRoot(document.querySelector("#root")); root.render(<Lotto />);이게 저희 client.jsx코드인데 렌더링이 2번 일어나니 이 쪽 파일 문제인 것 같습니다제가 사용하는 리엑트버전은 "react": "^18.2.0", "react-dom": "^18.2.0"입니다 혹시 이 버전들은 자동으로 strictMode가 적용되는 건가요?

6-5 로또 강의에서 useMemo 가르치시기 전에 "hooks의 특성상 전체가 계속 다시 실행된다"라는 말씀을 하셨고, useState(초기값)도 불필요하게 계속 재실행되기에 함수 결과값으로 기억하기 위해 useMemo를 쓴다는 것인데그 말씀대로라면 강의 초반 구구단 챕터에서const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)) const [second, setSecond] = React.useState(Math.ceil(Math.random()*9)) const [value, setValue] = React.useState('') const [result, setResult] = React.useState('') const inputRef = React.useRef() const submit = (e) => { e.preventDefault() if(Number(value)===first * second) { setResult('정답') setValue('') setFirst(Math.ceil(Math.random()*9)) setSecond(Math.ceil(Math.random()*9)) } else { setResult('땡') setValue('') } inputRef.current.focus() }submit함수에 setFirst(Math.ceil(Math.random()*9)), setSecond(Math.ceil(Math.random()*9))를 안써도 되지 않나요?가장 위에 useState(Math.ceil(Math.random() * 9)) 으로 초기값을 지정해놨으니까 어차피 렌더링 될 때마다 useState가 재실행 되니까 setFirst와 setSecond는 필요 없는 것 아닌가요? 

interval componentDidMount() { this.interval = setInterval(this.changeHand, 100) } componentDidUpdate() { } componentWillUnmount() { clearInterval(this.interval) } onClickBtn = (choice) => { clearInterval(this.interval) const {imgCoord} = this.state const myScore = scores[choice] const cpuScore = scores[computerChoice(imgCoord)] const diff = myScore - cpuScore if (diff === 0) { this.setState({ result: '비겼습니다!' }) } else if ([-1, 2].includes(diff)) { this.setState((prevState) => { return { result:'이겼습니다!', score: prevState.score + 1, } }) } else { this.setState((prevState) => { return { result: '졌습니다.', score: prevState.score - 1 } }) } setTimeout(() => { this.interval = setInterval(this.changeHand, 100); }, 2000); } render() { const {result, score, imgCoord} = this.state; return ( <> <div id="computer" style={{ background: `url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ${imgCoord} 0px` }} /> <div> <button id="rock" className="btn" onClick={()=>this.onClickBtn('바위')}>바위</button> <button id="scissor" className="btn" onClick={()=>this.onClickBtn('가위')}>가위</button> <button id="paper" className="btn" onClick={()=>this.onClickBtn('보')}>보</button> </div> <div>{result}</div> <div>현재 {score}점</div> </>강의에서 제로초님이 가위바위보 컴포넌트는 제거를 안하기 때문에 componentWillUnmount()를 넣으나 안넣으나 상관이 없다는식으로 얘기를 했습니다.그러나 componentWillUnmount()에 clearInterval를 안넣게되면 componentDidMount()에서 생성된 this.interval라는 비동기작업이 onClickBtn 함수에서 clearInterval로 해제가 안됩니다.왜 그런지 이유가 궁금합니다.

 useRef() 훅을 쓰는 케이스는 값은 자주 바뀌지만 화면은 자동으로 렌더링 되지 않게 하고 싶을 때 사용해야된다고 하셨는데, useRef같은 훅을 쓰지 않고 let 같은 일반 변수를 사용하면 안되는건가요? 2. 함수 컴포넌트는 import React from 'react' 안써도 되나요?