무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
const { Component } = React;
const React = require('react'); const {Component} = React; class WordRelay extends Component{ render() } 여기 코드 질문이요. 맨 윗줄은 React 모듈이 필요해서 require한건 알겠는데, 그 밑 코드에서 const { Component} = React; 이 부분이 이해가 안가요. 이후에 나올 컴포넌트 작성에서 React.Component를안쓰기 위해 쓰인 코드라는건 알겠는데 어떤 문법인지(?) 그게 궁금해요. 이 코드를 쓰면 어떤 원리로 아래 컴포넌트에서 React.Component를 안써도 되는지.. 강의 정말 잘 듣고 있습니다!!
- 미해결웹 게임을 만들며 배우는 React
babel 설치 시 오류 (ssh 연결오류?)
안녕하세요 제로초님, 영상 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] 이 명령어를 그대로 입력해 해시값 초기화를 하면 된다는데 맞나요? 아니면 다른 방법이 있을지 궁금합니다
- 미해결웹 게임을 만들며 배우는 React
아..뭔가 class쓰다가 hooks 쓰니깐 ..
아..뭔가 class쓰다가 hooks 쓰니깐 .. 좀더어려운느낌이면서 간편하네요 .. 하 ..
- 미해결웹 게임을 만들며 배우는 React
이오류는 왜나오는걸까요 ..
태그가소문자로나와요 .. 모든파일 GuGuDan 이렇게 카멜표기법으로했습니다 ...ㅜㅜㅜ.. 아무리구글링해도 답을못찾겠습니다 ..
- 미해결웹 게임을 만들며 배우는 React
처음 실행할 때에 아무 설치없이도 실행되어야 하는 게 맞나요?
1-2강 들은 후 저도 처음 실행해보려는데 index.html 경로 찾아 들어가서 열면 되는 건가요? 그렇게 했는데 안되더라고요. 실행하는 모습은 안 보여주셔서 어떻게 해야 하는지 잘 모르겠습니다. 위쪽에 추가했던 <script crossorigin ~으로 시작하는 코드 두줄이 설치하는 대신 그 역할을 해주는 것인 줄 알았는데 그게 아니라 제가 따로 react랑 react dom 도 모두 설치해야 하는건가요?
- 미해결웹 게임을 만들며 배우는 React
세팅방법설명해주셔서..감사합니다 ..
다른강의는 ..create-react-app 만써대서 저걸왜하는지 이해가안갔는데 고맙습니당!
- 미해결웹 게임을 만들며 배우는 React
호우 ..숙제간단히풀렸네요 ..
호우 ..숙제간단히풀렸네요 .. 저는 state에 first랑 second 곱해서 그값으로했는데 허탈합니다 ..
- 미해결웹 게임을 만들며 배우는 React
리액트 새로고침 (구구단)
선생님의 구구단 코드를 리액트 컴포넌트에 넣어보고 있습니다! 자꾸 구구단을 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;
- 해결됨웹 게임을 만들며 배우는 React
$문법 질문
' 답은 ${this.state.answer}' 이런식으로 적으니 '...'안에 적은 문구가 그대로 출력이되서 ' 답은 ' + this.state.answer 이런식으로 작성하니 프로그램이 돌아가네요. $문법이 jquery 를 사용한건가요?
- 미해결웹 게임을 만들며 배우는 React
map함수 key질문입니다.
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는 구성되어있습니다.
- 미해결웹 게임을 만들며 배우는 React
TicTacToe.jsx reducer 부분 질문입니다
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를 적용했을 때 렌더링이 정상적으로 되지 않더라구요 어떤 이유 때문에 위와 같은 현상이 생기는지 알 수 있을까요?
- 미해결웹 게임을 만들며 배우는 React
hooks timer, startTime, endTimer 질문입니다.
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로 하는 것과 저렇게 바깥에 선언하는 차이가 있나요? 결과의 차이라던지, 성능의 차이라던지...
- 미해결웹 게임을 만들며 배우는 React
webpack nodejs 질문
안녕하세여 다름이 아니라 제가 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", }, };
- 미해결웹 게임을 만들며 배우는 React
실습 중에 hot loader 쪽에서 에러가 납니다.
다음 에러가 해결이 안되서 hot loader 기능을 사용하지 못하고 있습니다. ㅠㅠ 무슨 문제일까요 ㅜㅜ
- 해결됨웹 게임을 만들며 배우는 React
저.. 왜 리셋버튼이 작동을 안할까요?
import React, { Component } from 'react'; class ResponseCheck extends Component { state = { state: 'waiting', message: '클릭해서 시작하세요.', result: [], }; timeout; startTime; endTime; onClickScreen = () => { const { state } = this.state; if (state === 'waiting') { timeout.current = setTimeout(() => { this.setState({ state: 'now', message: '지금 클릭', }); this.startTime = new Date(); }, Math.floor(Math.random() * 1000) + 2000); // 2초~3초 랜덤 this.setState({ state: 'ready', message: '초록색이 되면 클릭하세요.', }); } else if (state === 'ready') { // 성급하게 클릭 clearTimeout(this.timeout); this.setState({ state: 'waiting', message: '너무 성급하시군요! 초록색이 된 후에 클릭하세요.', }); } else if (state === 'now') { // 반응속도 체크 endTime.current = new Date(); this.setState((prevState) => { return { state: 'waiting', message: '클릭해서 시작하세요.', result: [...prevState.result, this.endTime, this.startTime], }; }); } }; onReset = () => { this.setState({ result: [], }); }; renderAverage = () => { const {result} = this.state; return result.length === 0 ? null : <> <div>평균 시간: {result.reduce((a, c) => a + c) / result.length}ms</div> <button onClick={this.onReset}>리셋</button> </> }; render() { const { state, message } = this.state; return ( <> <div id="screen" className={state} onClick={this.onClickScreen} > {message} </div> {this.renderAverage()} </> ) } } export default ResponseCheck; <html lang="ko"> <head> <meta charset="utf-8"> <title>game</title> </head> <style> #screen { width: 300px; height: 200px; text-align: center; user-select: none; } #screen.waiting { background-color: #5a985c; } #screen.ready { background-color: #dc7171; color: white; } #screen.now { background-color: #acd674; } </style> <body> <div id="root"></div> <script src="./dist/app.js"> </script> </body> </html>
- 미해결웹 게임을 만들며 배우는 React
RenderTest 예제로 변경하는 중 다음과 같은 에러가 납니다 ㅜ
RenderTest.jsx를 추가하고, client.jsx에서 RenderTest 경로로 수정해주었는데 다음과 같은 에러가 납니다 ㅜ
- 미해결웹 게임을 만들며 배우는 React
hooks로 변환하니 다음과 같은 에러가 납니다.
제 생각에는 초기 배열이 빈배열이어서 length를 쓸 수 없어서 나는 에러 같은데 어떻게 해결해야 할지 모르겠습니다.
- 해결됨웹 게임을 만들며 배우는 React
Invalid hook call
똑같이 따라한것 같은데 .. 왜 이런 에러가 뜨는지 모르겠어요.. const React = require('React'); const { useState, useRef } = React; const Gugudan = () =>{ const[ firstNum, setFirstNum ] = useState( Math.ceil(Math.random()*9 ) ); const[ secondNum, setSecondNum ] = useState( Math.ceil(Math.random()*9 ) ); const[ value, setValue ] = useState(''); const[ result, setResult ] = useState(''); const inputRef = useRef(null); const guguCheck = (e) =>{ e.preventDefault(); if( parseInt(value) === firstNum*secondNum){ setResult( ` : correct` ); setFirstNum( Math.ceil( Math.random() * 9) ); setSecondNum( Math.ceil( Math.random() * 9) ); setValue(''); inputRef.current.focus(); }else{ setResult('try again'); setValue(''); inputRef.current.focus(); } } const inputChange = (e) =>{ setValue(e.target.value); } return ( <> <p>{firstNum}곱하기 {secondNum}는?</p> <form onSubmit={ guguCheck }> <input ref={ inputRef } type="number" value={value} onChange={ inputChange } /> </form> <p>{result}</p> </> ); } module.exports = Gugudan;
- 미해결웹 게임을 만들며 배우는 React
ComponentDidUpdate질문
ComponentDidUpdate 호출조건 중 하나가setState로 State값이 바뀌었을때 componentDidUpdate가 발생하는걸로 알고 있는데 componentDidUpdate안에 다시 setState를 사용하면 setState -> componentDidUpdate -> setState -> componentDidUpdate ....... 계속해서 반복 호출이 되는게 아닌가요????
- 미해결웹 게임을 만들며 배우는 React
hooks useEffect
hooks에서 useEffect 사용 시 class를 사용해서 짠코드보다 랜더링이 훨씬 많아 지는게 아닌가요?그리고 useEffect에서 DidMount와 DidUpdate를 분기처리가 가능한가요?class hooks를 비교시 hooks가 코드의 간결성 빼고는 그다지 좋아보이지 않는데 hooks를 권하는이유를 아직 잘 모르겠습니다.