무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
SocketClient is not a constructor 오류
아랫분과 동일하게 Cannot get / 메세지가 계속 떠서 제로초님 공지글에 있는 4버전 깃허브 소스로 다 바꿨는데 SocketClient is not a constructor 에러 뜨면서 화면 로딩이 안됩니다. "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.1", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.5", "babel-loader": "^8.1.0", "react-refresh": "^0.10.0", "webpack": "^5.3.2", "webpack-cli": "^4.1.0", "webpack-dev-server": "^4.0.0" } const path = require("path"); const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name: "wordrelay-setting", mode: "development", // 실서비스: production devtool: "eval", 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: ["react-refresh/babel"], }, }, ], }, plugins: [new RefreshWebpackPlugin()], output: { path: path.join(__dirname, "dist"), filename: "app.js", publicPath: "/dist", }, // 출력 devServer: { devMiddleware: { publicPath: "/dist" }, static: { directory: path.resolve(__dirname) }, hot: true, }, };
- 미해결웹 게임을 만들며 배우는 React
useEffect부분에서 질문이 있습니다.
react 공식홈페이지를 살펴보니 useEffect의 두번째 인수는 그 인수값과의 변화가 발생했을 때 useEffect를 다시 렌더링한다고 되어 있습니다. 그래서 timeouts.current를 두번째 인수로 넣으면 잘 실행되는 것은 이해가 됩니다. 그런데 winBalls.length를 넣었을 때 차이가 있는 지 살펴보기 위해 반복문에서 console을 입력해보았더니 winBalls.length는 항상 0 이고 winBalls는 그 값이 바뀌지 않았습니다. for (let i = 0; i < winNumbers.length - 1; i++) { //let을 쓰면 closure 문제가 발생하지 않는다. timeouts.current[i] = setTimeout(() => { setWinBalls((prevBalls) => [...prevBalls, winNumbers[i]]); console.log(winBalls, "얘가 winBalls"); console.log(winBalls.length, "이것이 배열의길이"); }, (i + 1) * 1000); } 이런식으로 말이죠. 그래서 다시 timeout.current로 두번째인수로 변경해서도 콘솔 값을 확인했더니 여전히 winBalls는 계속해서 바뀌지 않았습니다. 이런식으로 말이죠. 계속해서 0으로만 winBalls가 출력되는데 왜 업데이트가 발생하지 않는지 그 이유가 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
memo나 pureComponent
memo나 pureComponent를 감싸줘도 반짝임이 변함없는데 혹시 어떤 문제가 있을 때 이런 건가요..?
- 미해결웹 게임을 만들며 배우는 React
React.createRef()와는 무슨차이인가요?
안녕하세요 선생님 강의 정말 잘 듣고 있습니다. 리액트의 ref를 만들때 input = React.createRef(); <input ref={input} /> 이것도 같은 코드인가요?
- 미해결웹 게임을 만들며 배우는 React
webpack server(localhost:8080)에서 Cannot Get / 만 나옵니다.
안녕하세요 제로초님, 이 문제를 해결하기 위해서 공식 문서도 찾아보고 하루종일 고민했지만 , 도저히 해결하기 어려워 문의 남깁니다. 2강 '웹팩 데브 서버와 핫 리로딩' 부분을 보고 따라하면서 서버를 켰지만, 화면에 Cannot Get /이라는 메세지만 띄워진 채, 다른 내용이 출력되지 않았습니다. 아마 제 생각으로는 위의 사진에서 Project is running at이 비워진 탓인것 같은데, 어떻게 고쳐야할지 모르겠습니다.혹시 해결 방법을 알고 계신다면 알려주세요! 아 그리고, 코드는 아래의 해당 부분을 빼고 모두 동일합니다. devServer: { static: { publicPath: "/dist" },
- 미해결웹 게임을 만들며 배우는 React
npx webpack시 에러가 발생합니다
npx webpack 입력 시 다음과 같은 에러가 발생합니다. 경로문제인거 같은데 해결이 잘 되지 않아서 이렇게 질문 남깁니다
- 미해결웹 게임을 만들며 배우는 React
cant' resolve object-assign
2-5를 따라 구현하다가 npx webpack을 실행하면 다음과 같은 에러가 발생합니다. ERROR in ./node_modules/react-dom/cjs/react-dom.development.js Module not found: Error: Can't resolve 'object-assign' in 'S:\study\react-webgame\lecture\node_modules\react-dom\cjs' @ ./node_modules/react-dom/cjs/react-dom.development.js 17:14-38 @ ./node_modules/react-dom/index.js @ ./client.jsx @ multi ./client ERROR in ./node_modules/react/cjs/react.development.js Module not found: Error: Can't resolve 'object-assign' in 'S:\study\react-webgame\lecture\node_modules\react\cjs' @ ./node_modules/react/cjs/react.development.js 16:14-38 @ ./node_modules/react/index.js @ ./client.jsx @ multi ./client ERROR in ./node_modules/react-dom/cjs/react-dom.development.js Module not found: Error: Can't resolve 'scheduler/tracing' in 'S:\study\react-webgame\lecture\node_modules\react-dom\cjs' @ ./node_modules/react-dom/cjs/react-dom.development.js 19:14-42 @ ./node_modules/react-dom/index.js @ ./client.jsx @ multi ./client 그래서 object-assign을 설치해봐도 에러는 같습니다.
- 미해결웹 게임을 만들며 배우는 React
계속 다음과 같은 사진이뜹니다....
codeqtech@gimgichang-ui-MacBookAir wordplay % npm run dev > wordplay@1.0.0 dev > webpack serve --env development <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8081/ <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.219.103:8081/ <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8081/ <i> [webpack-dev-server] Content not from webpack is served from '/Users/codeqtech/Documents/GitHub/react-study/wordplay/public' directory @babel/preset-env: `DEBUG` option 콘솔에서는 8081로뜬다고 하는데 다음과 같은 사진이 오면서 restful api 를 받지를 못합니다...뭐가 문제일가요?ㅜㅜ
- 미해결웹 게임을 만들며 배우는 React
webpack.config.js에서 devServer 프로퍼티 질문이 있습니다.
output: { path: path.join(__dirname, "dist"), filename: "app.js", publicPath: "/dist/", }, devServer: { publicPath: "/dist/", hot: true, }, 이렇게 하고 패키지도 전부 정상적으로 설치했는데 자꾸 다음과 같은 에러가 뜹니다 혹시 무엇이 문제일가요?ㅠㅠ [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'publicPath'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
- 미해결웹 게임을 만들며 배우는 React
babel 세팅에 에러가 발생합니다.
npx webpack 으로 설치하는데 Module build failed (from ./node_modules/babel-loader/lib/index.js): 라는 에러가 발생합니다. asset app.js 2.29 KiB [emitted] (name: app) ./client.jsx 39 bytes [built] [code generated] [1 error] ERROR in ./client.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Unknown option: .pluguns. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options. at throwUnknownError (/Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/validation/options.js:133:27) at /Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/validation/options.js:118:5 at Array.forEach (<anonymous>) at validateNested (/Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/validation/options.js:94:21) at validate (/Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/validation/options.js:85:10) at loadPrivatePartialConfig (/Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/partial.js:80:50) at loadPrivatePartialConfig.next (<anonymous>) at /Users/mac/Desktop/React/minigame/node_modules/@babel/core/lib/config/partial.js:149:25 at Generator.next (<anonymous>) at step (/Users/mac/Desktop/React/minigame/node_modules/gensync/index.js:261:32) word-relay-setting (webpack 5.51.1) compiled with 1 error in 226 ms 도와주세요 ㅠㅠ
- 해결됨웹 게임을 만들며 배우는 React
webpack dev server option 이 invalid 하답니다.
package.json { "name": "webpackbasic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack serve --env development" }, "author": "", "license": "ISC", "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "@babel/core": "^7.15.0", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "babel-loader": "^8.2.2", "react-refresh": "^0.10.0", "webpack": "^5.50.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.0.0" } } webpack.config.js const path = require("path"); const refreshWebpack = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name:"word-relay-setting", mode:"development", devtool:"eval", resolve:{ extensions:['.js','.jsx'] }, entry:{ app:['./client'] }, module: { rules:[{ test: /\.jsx?/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env',{ targets:{ browsers:['> 1% in KR'] }, debug:true }], '@babel/preset-react' ], plugins: [ '@babel/plugin-proposal-class-properties', 'react-refresh/babel' ], } }], }, plugins:[ new refreshWebpack() ], output:{ path:path.join(__dirname,"dist"), filename:'app.js', publicPath:'/dist/', }, devServer:{ hot:true } } 오류 내용 어디가 문제인걸까요? 그리고 항상 질문한거 답변해주셔서 감사합니다.
- 미해결웹 게임을 만들며 배우는 React
누드형식 모듈화는 더이상 쓸 수 없는 건가요?
모듈화를 하려고 하니 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 이런 에러가 계속 발생했습니다. 리액트 형식 모듈화(import, export default)랑 누드 형식 모듈화(require, module.exports)를 같이 쓰면 에러가 발생한 게 아닐까 추정했지만 근데 그 전에는 잘만 섞어 썼는데다가 이미 clint.jsx와 Baseball.jsx로 이미 나뉘어져 있는 점이 의문이었습니다. 누드 형식으로 모듈화를 통일하니 또 에러가 발생했습니다. ES Modules may not assign module.exports or exports 리액트 형식으로 바꾸니 해결했는데, 누드 형식으로 모듈화를 시도해서 발생한 문제가 맞는 건가요? 그럼 앞으로도 모듈화할 때는 import, export default 형식으로만 해줘야 하는 건가요?
- 미해결웹 게임을 만들며 배우는 React
Hooks 관련 질문
안녕하세요 제로초님! 이번 강의에서 hooks의 특성상 항상 함수 컴포넌트가 재실행되어 그 안에 코드가 모두 다시 실행된다고 하셨는데 여기서 궁금증이 생겨 질문 드립니다. lottoNumbers는 useMemo로 인해 한번 실행되고 계속 기억하고 있어서 winNumbers가 변함이 없다는 것은 이해가 됐습니다. 여기서 그럼 다른 winballs, bonus, redo는 매번 실행이 되는거면 계속 새롭게 다시 선언이 되어서 초기화가 되는게 아닌가요? 이상한 질문인 것 같지만.. 헷갈려서요ㅜㅜ
- 미해결웹 게임을 만들며 배우는 React
this.setState((prevState) => { ... 구문이 잘 이해가 안 되네요.
setState를 할 때 변경될 요소들을 화살표 함수의 리턴으로 보내준다는 건 알겠는데, 저 함수의 prevState는 대체 어디서 온 건가요? 콘솔 로그로 찍어보니까 {num1: 3, num2: 4, value: "12", result: "", win: 0} 가 찍히는 것으로 보아 state가 출력된 것은 알겠는데, 대체 어떻게 해서 state가 오게 된 건가요?
- 미해결웹 게임을 만들며 배우는 React
npm을 사용하는 것과 무엇이 다른가요?
다른 강의에서는 npm을 설치하고 App.js 파일에서 모든 컴포넌트를 만들던데 방법이 무척이나 다르네요. npm을 설치했을 때는 코드를 수정하면 즉시 웹페이지도 변경되는 등 서버도 자동으로 설치된다고 알고 있는데 이 방식으로는 웹페이지를 새로 고침해야 변경되더라고요. 이 방식에서는 서버가 존재하지 않고 단순히 웹페이지만 존재하는 건가요? 이 방식도 현업에서 많이 쓰이는 방식인가요?
- 미해결웹 게임을 만들며 배우는 React
dist 폴더가 생기지 않습니다.
안녕하세요 제로초님! 숫자 야구 강의 듣다가 질문드립니다. 이전 수업에서 나온 내용대로 webpack과 babel 설치 및 설정을 했는데 dist 폴더가 생기지 않습니다. 따로 에러가 뜨진 않았고, 화면도 잘 구동됩니다. 다만, dist 폴더 내에 app.js 파일이 생성되고 그 파일이 html에서 불러와져서 렌더링이 되는 걸로 아는데 dist 폴더가 생기지 않고도 렌더링에 문제가 없는게 맞는건지 여쭙고 싶습니다. 아래는 webpack.config.js 파일입니다. const path = require("path"); const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name: "wordrelay-setting", mode: "development", devtool: "eval", resolve: { extensions: [".js", ".jsx"], }, entry: { app: "./client", }, module: { rules: [ { test: /\.jsx?$/, loader: "babel-loader", options: { presets: [ [ "@babel/preset-env", { targets: { browsers: ["> 1% in KR"], }, debug: true, }, ], "@babel/preset-react", ], plugins: ["react-refresh/babel"], }, exclude: path.join(__dirname, "node_modules"), }, ], }, plugins: [new RefreshWebpackPlugin()], output: { path: path.join(__dirname, "dist"), filename: "app.js", publicPath: "/dist", }, devServer: { publicPath: "/dist", hot: true, }, };
- 미해결웹 게임을 만들며 배우는 React
웹스톰에서 ctrl + b 했을 때 부모 컴포넌트 보게 하는 방법은 어떻게 하는건가요?
맥북 사용하고 있어서 cmd+ b 로 해봤는데 전 안 알려주네요 ㅋㅋㅋ ㅠ ctrl + b 해봐도 안 되고 ㅠㅠ 혹시 다른 설정 같은걸 건드려야 하는건가요?
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 제로초님
안녕하세요 제로초님 이번에 판교에 있는 10인 스타트업 회사에 신입으로 취업하게된 학생입니다. 다름이 아니라 회사 출근일인 9월 1일까지 시간이 있어서 회사가기전에 회사에서 사용하는 기술스택 공부를 하고자 합니다. 회사에서 사용하는 기술 스택이 Javascript와 React 그리고 Ant Design Pattern을 쓴다고 하는데.. 제로초님 React 웹게임 강의만 들으면서 복습해도 회사에 가기전까지 충분히 연습이 될까요? 어떤 연습을 하는게 좋을지 모르겠습니다. 그리고 회사가기전에 환경셋팅하는 법도 충분히 알아두어야 할것 같아서요.. 제가 여쭈어보고 싶은 것의 결론은 최대한 실무에 가깝게 공부하고 연습하려면 제로초님 강의중 어떤 강의를 위주로 공부하는게 좋을지 여쭈어보고 싶습니다.
- 미해결웹 게임을 만들며 배우는 React
얕은복사 깊은 복사에 관한 얘기
강의를 듣다가 궁금증이 생겨 여쭤봅니다. 제가 알기론 불변성을 해치지 않기 위해서는 "깊은복사" 를 해야한다고 알고 있습니다. 복사한 객체가 변하더라도 원본객체는 변하지 않아야 하니까요. 따라서 보여주신 예시( 전개구문을 활용; a === b ; false ) 등을 보여주신 것 또한 깊은복사의 예시였습니다. 다만 말씀하실 때 얕은 복사를 해야 불변성을 해치지 않는다고 하셔서, 제가 느끼기엔 의아해서 질문을 남깁니다. 혹여 제가 잘못 알고 있으면 알려주시면 감사하겠습니다. 좋은 강의 잘 듣고 있습니다. 감사합니다.
- 미해결웹 게임을 만들며 배우는 React
스프레드 연산자 질문 있습니다
for(let i=0; i<winNumbers.length-1;i++){ timeouts.current[i]=setTimeout(()=>{ console.log(winBalls) setWinBalls([...winBalls,winNumbers[i]]) },(i+1)*1000) } useEffect 안에 코드를 이렇게 넣고 짰습니다. 여기서 winNumbers가 [ 8, 16, 29, 36, 39, 41 ]라고 하면 winBalls라는 배열 안에 이전 winBalls를 복사한 후 winNumbers의 숫자를 한개씩 넣는걸로 이해했어요. setWinBalls로 winBalls를 바꿔주니까 굳이 prevBalls를 넣지 않아도 된다고 생각했거든요. winBalls배열은 바깥에 선언되어있고 for문을 돌면서 이전 배열을 복사해서 넣는거니까 winBalls가 [ 8 ] [ 8, 16 ] [ 8, 16, 29 ] [ 8, 16, 29, 36 ] [ 8, 16, 29, 36, 39 ] [ 8, 16, 29, 36, 39, 41 ] 이렇게 출력이 될거라고 예상했는데 계속 []만 출력되더라구요 이유를 잘 모르겠어서 질문드립니다!