웹 게임을 만들며 배우는 React
웹 게임을 만들며 배우는 React
수강정보
(44개의 수강평)
2720명의 수강생
무료
지식공유자 : 조현영
64회 수업 · 총 12시간 44분 수업
기간 : 평생 무제한 시청
수료증 : 미발급 강의
수강 난이도 : 초급
정성훈 프로필

babel 미설치 정성훈 2일 전
안녕하세요 제로초님 강의 도움 많이 되고 있습니다. 영상에선 babel설치 안하시고 웹팩 실행하시니 에러가 나셔서 바벨 설치 하셨는데요 저는 에러가 안나고 잘 되었습니다. 혹시 바벨 설치 안해도 되게 바뀐 건가요?? node v12.17.3 npm v6.14.6 react v16.13.1 vscode v 1.49.1 입니다.

4
Brunch 프로필

const { Component } = React; Brunch 7일 전
const React = require('react'); const {Component} = React; class WordRelay extends Component{ render() } 여기 코드 질문이요. 맨 윗줄은  React 모듈이 필요해서 require한건 알겠는데,  그 밑 코드에서 const { Component} = React; 이 부분이 이해가 안가요. 이후에 나올 컴포넌트 작성에서 React.Component를안쓰기 위해 쓰인 코드라는건 알겠는데 어떤 문법인지(?) 그게 궁금해요. 이 코드를 쓰면 어떤 원리로 아래 컴포넌트에서 React.Component를 안써도 되는지.. 강의 정말 잘 듣고 있습니다!!

1
jeehea99 프로필

babel 설치 시 오류 (ssh 연결오류?) jeehea99 7일 전
안녕하세요 제로초님, 영상 7분쯤에 바벨 설치 따라가다가 설치 오류가 나서 질문 드립니다. npm i -D @babel/core @babel/preset-env @babel/preset-react babel/loader 이 명령어를 입력했더니 사진과 같은 오류가 나네요. Host key verification failed. 를 구글링해봤더니 이해는 못했지만 ssh접속 시 ip주소가 달라서..?라고하면서  ssh-keygen -R [host name] 이 명령어를 그대로 입력해 해시값 초기화를 하면 된다는데 맞나요? 아니면 다른 방법이 있을지 궁금합니다

2
godot4027 프로필

아..뭔가 class쓰다가 hooks 쓰니깐 .. godot4027 8일 전
아..뭔가 class쓰다가 hooks 쓰니깐 .. 좀더어려운느낌이면서 간편하네요 .. 하 ..

0
godot4027 프로필

이오류는 왜나오는걸까요 .. godot4027 8일 전
태그가소문자로나와요 .. 모든파일 GuGuDan 이렇게 카멜표기법으로했습니다 ...ㅜㅜㅜ.. 아무리구글링해도 답을못찾겠습니다 ..

1
jeehea99 프로필

처음 실행할 때에 아무 설치없이도 실행되어야 하는 게 맞나요? jeehea99 11일 전
1-2강 들은 후 저도 처음 실행해보려는데 index.html 경로 찾아 들어가서 열면 되는 건가요? 그렇게 했는데 안되더라고요. 실행하는 모습은 안 보여주셔서 어떻게 해야 하는지 잘 모르겠습니다. 위쪽에 추가했던 <script crossorigin ~으로 시작하는 코드 두줄이 설치하는 대신 그 역할을 해주는 것인 줄 알았는데 그게 아니라 제가 따로 react랑 react dom 도 모두 설치해야 하는건가요?

5
godot4027 프로필

세팅방법설명해주셔서..감사합니다 .. godot4027 12일 전
다른강의는 ..create-react-app 만써대서 저걸왜하는지 이해가안갔는데 고맙습니당!

1
godot4027 프로필

호우 ..숙제간단히풀렸네요 .. godot4027 13일 전
호우 ..숙제간단히풀렸네요 .. 저는 state에 first랑 second 곱해서 그값으로했는데 허탈합니다 ..

0
jinmin2216 프로필

리액트 새로고침 (구구단) jinmin2216 18일 전
선생님의 구구단 코드를 리액트 컴포넌트에 넣어보고 있습니다! 자꾸 구구단을 submit하면 새로고침돼서 state 값이 사라집니다! 새로 고침이 안되게 바꿀 수 있는 방법이 있을까요ㅜㅜ? import React, { Fragment, useState } from 'react'; import { Link } from 'react-router-dom'; const Multiplication = () => {   const [gugudanState, setGugudanState] = useState({     first: Math.ceil(Math.random() * 9),     second: Math.ceil(Math.random() * 9),     value: '',     result: ''   });   const onChange = (e) => {     setGugudanState({       ...gugudanState,       value: e.target.value     })   }   const onSubmit = (e) => {     //e.preventdefault();     if (gugudanState.first * gugudanState.second === parseInt(gugudanState.value)) {       setGugudanState({         first: Math.ceil(Math.random() * 9),         second: Math.ceil(Math.random() * 9),         value: '',         result: "정답입니다!"       })     } else {       setGugudanState({         ...gugudanState,         value: "",         result: "땡"       })     }   }   return (     <Fragment>       <h2>이곳은 구구단 게임장입니다.</h2>       <div>{gugudanState.first} 곱하기 {gugudanState.second}는?</div>       <form onSubmit={(e) => onSubmit(e)}>         <input type="number" value={gugudanState.value} onChange={(e) => onChange(e)} />         <button>입력!</button>       </form>       <div>{gugudanState.result}</div>       <Link to="/Game" className="btn btn-light">         이전으로       </Link>     </Fragment >   ); }; export default Multiplication;

1
ambacc244 프로필

$문법 질문 ambacc244 1달 전
' 답은 ${this.state.answer}' 이런식으로 적으니 '...'안에 적은 문구가 그대로 출력이되서 ' 답은 ' + this.state.answer 이런식으로 작성하니 프로그램이 돌아가네요. $문법이  jquery 를 사용한건가요?

1
dlgydlf12345 프로필

map함수 key질문입니다. dlgydlf12345 1달 전
render() {     const { title, color, className, trys } = this.state;     return (       <>         <div           ref={this.divRef}           id="screen"           className={className}           style={{ background: color }}           onClick={this.onClick}         >           {title}         </div>         <ResultTable trys={trys} />       </>     );  } class ResultTable extends Component {   averageResult = (trys) => {     let sum = 0;     trys.forEach((v) => {       sum = sum + v.record;     });     return sum / trys.length;   };   printResult = () => {     const { trys } = this.props;     if (trys.length === 0) {       return;     } else {       return (         <>           <ul>             <div style={{ fontSize: "30px" }}>Result</div>             {trys.map((v, i) => {               return (                 <>                   <li key={v.id}>{`${i + 1}차 결과 : ${v.record}ms`}</li>                 </>               );             })}             <div>{`평균 : ${this.averageResult(trys)}ms`}</div>           </ul>         </>       );     }   };   render() {     return <>{this.printResult()}</>;   } } 부모 컴포넌트에서 자식 컴포넌트 (ResultTable)을 불러와서 map으로 그려주는 함수입니다. 분명히 key값을 넣어줬데 계속해서 key에러가 뜨는데 왜 그런지 알 수 있을까요? trys= [     {id: trys.length + 1, record: time} ] 이런식으로 trys는 구성되어있습니다.

1
tkdals9048 프로필

TicTacToe.jsx reducer 부분 질문입니다 tkdals9048 1달 전
case CLICK_CELL:             const tableData = [...state.tableData];             tableData[action.row] = [...tableData[action.row]]; // immer라는 라이브러리로 가독성 해결             tableData[action.row][action.cell] = state.turn;             // console.log(tableData[action.row]);             return {                 ...state,                 tableData,                 recentCell: [action.row, action.cell],            } 위 코드에서 tableData[action.row], [...tableData[action.row]] 두 값이 동일한데 [...tableData[action.row]] <-- 이 배열을 대입해주는 이유가 있을까요? 콘솔로 찍어봐도 동일한값으로 나오길래 주석처리하고 진행해보니 정상작동은 하는데 최적화 부분에서 memo를 적용했을 때 렌더링이 정상적으로 되지 않더라구요 어떤 이유 때문에 위와 같은 현상이 생기는지 알 수 있을까요?

2
dlgydlf12345 프로필

hooks timer, startTime, endTimer 질문입니다. dlgydlf12345 1달 전
let timer = 0; let startTime = 0; let endTIme = 0; const ResponseCheck = () => {   const [state, setState] = useState("waiting");   const [message, setMessage] = useState("클릭해서 시작하세요");   const [result, setResult] = useState([]); class -> hooks로 변환시 저 스스로 먼저 해보고 현영님 강의를 봤는데요, class처럼 내부에 선언되면 hooks는 컴포넌트 자체가 재실행되니까 내부에 선언하면 안되는구나 라고 생각하고 위의 코드처럼 컴포넌트 바깥으로 선언을 해줬는데요. 결과는 잘 돌아가더라구요. useRef로 하는 것과 저렇게 바깥에 선언하는 차이가 있나요? 결과의 차이라던지, 성능의 차이라던지...

1
이주호 프로필

webpack nodejs 질문 이주호 1달 전
안녕하세여 다름이 아니라 제가 react는 webpack 그리고 백엔드는 noejs epxress를 하는데 작업을하다가 갑자기 프론트 터미널에 에러가 뜨는데 보니깐 node 모듈이랑 꼬여서 그런거같더라고요. 이런 경우에는 webpack에 target을 target:node해야되나요?? target:node하니깐 require is notdefind에 react is notdefind 이렇게 뜨더라고요... 대체 원인이 먼지 모르겠습니다. const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const nodeExternals = require('webpack-node-externals');  const webpack = require('webpack'); module.exports = {   name: "wehago",   mode: "development",   devtool: "eval",   target: 'node',   resolve: {     extensions: [".js", ".jsx", "css", "scss"],   },   entry: {     app: ["babel-polyfill","./client"],    },   externals: [nodeExternals()],   externals: {     "React": "react",   },   module: {     rules: [       {         test: /\.jsx?$/,         loader: "babel-loader",         options: {           presets: [             [               "@babel/preset-env",               {                 debug: true,               },             ],             "@babel/preset-react",           ],           plugins: ["react-hot-loader/babel"],         },         exclude: path.join(__dirname, "node_modules"),       },       {         test: /\.css$/,         use: [MiniCssExtractPlugin.loader, "css-loader"],       },       {         test: /\.scss$/,         loaders: [           require.resolve("style-loader"),           require.resolve("css-loader"),           require.resolve("sass-loader"),         ],       },       {         test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,         loader: "url-loader",         options: {           publicPath: "./dist/",           name: "[name].[ext]?[hash]",         },       },     ],   },   node: {     net: 'empty',     tls: 'empty',     fs: 'empty'   },   plugins: [     new MiniCssExtractPlugin({       filename: "style.css",     }),     new webpack.ProvidePlugin({       "React": "react",     }),   ],   output: {     path: path.join(__dirname, "dist"),     filename: "[name].js",     publicPath: "/dist",   }, };

1
동우 프로필

실습 중에 hot loader 쪽에서 에러가 납니다. 동우 1달 전
다음 에러가 해결이 안되서 hot loader 기능을 사용하지 못하고 있습니다. ㅠㅠ 무슨 문제일까요 ㅜㅜ

0
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스