무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
강의 코드 따로 확인할 수 있을까요?
안녕하세요 선생님. 강의 잘 보고 있습니다. ^^ 다름 아니라 강의하실 때 작성해주신 코드를 깃헙 같은 데서 확인할 수 있을까요? 감사합니다.
- 해결됨웹 게임을 만들며 배우는 React
가위바위보 전적 기록
숫자야구 파트에서 배운 것을 응용해서 가위바위보에서 전적을 기록하게 하려고 시도했습니다. 클래스로 컴포넌트를 작성한 경우에는 제대로 작동하는 것을 확인했으나 Hooks로 변경하고 나서는 제대로 작동하지 않아 질문 드립니다. state에 history라는 배열을 만들어 준 후 가위바위보의 결과를 승리/무승부/패배로 배열에 추가하도록 했습니다. map으로 history 배열을 순회하면서 전적을 출력하도록 하고싶었는데 위와 같이 공백이 출력됩니다. 코드에서 어떤 부분을 검토하면 좋을까요? const onClickBtn = (choice) => () => { clearInterval(interval.current); const myScore = scores[choice]; const cpuScore = scores[computerChoice(imgCoord)]; const diff = myScore - cpuScore; if ( diff === 0 ){ setResult('비겼습니다'); setHistory((prevHistory) => { return [...prevHistory, '무승부']; }) } else if ([-1, 2].includes(diff)) { setResult('이겼습니다'); setScore((prevScore) => prevScore + 1); setHistory((prevHistory) => { return [...prevHistory, '승리']; }); } else { setResult('졌습니다'); setScore((prevScore) => prevScore - 1); setHistory((prevHistory) => { return [...prevHistory, '패배']; }); } setTimeout(()=> { interval.current = setInterval(changeHand, 100); }, 2000); }; <ul> {history.map((v, i) => { return ( <Try key={`${i + 1}차 시도:`} tryInfo={v} /> // html의 attribute와 유사한 역할을 하는 props ) })} </ul> const Try = memo(({ TryInfo }) => { return ( <li>{ TryInfo }</li> ) })
- 미해결웹 게임을 만들며 배우는 React
똑같이 따라쳤는데 라이브 서버에서 아무 것도 출력되지 않는데 제가 놓친 부분이 있을까요?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>구구단</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js" ></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" ></script> </head> <body> <div id="root"></div> <!-- 결과 : <div id="root"><button>Like</botton></div> --> <script type="text/babel"> class GuGuDan extends React.Component { constructor(props) { super(props); this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.randon() * 9), value: "", result: "", }; } render() { return ( <div> <div> {this.state.first}곱하기{this.state.second}는? </div> <form> <input type="number" value={this.state.value} /> <button>입력!</button> </form> <div>{this.state.result}</div> </div> ); } } </script> <script type="text/babel"> ReactDOM.render(<GuGuDan />, document.querySelector("#root")); </script> </body> </html>
- 미해결웹 게임을 만들며 배우는 React
강의에서 사용하고 있는 프로그램 에디터는 무엇인가요??
안녕하세요! 강의를 듣다가 사용하시는 에디터가 무엇인지 궁금해서 작성합니다. react는 vscode를 많이 사용한다고 해서 설치하고 듣고있는데 문제가 없는건가요??
- 미해결웹 게임을 만들며 배우는 React
혹시 이 에러는 왜뜨는걸까요??
ERROR in ./client.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Unknown option: .plugin. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options. at throwUnknownError (C:\Users\LSH\Desktop\react\gugudan\node_modules\@babel\core\lib\config\validation\options.js:133:27) at C:\Users\LSH\Desktop\react\gugudan\node_modules\@babel\core\lib\config\validation\options.js:118:5 1) at validate (C:\Users\LSH\Desktop\react\gugudan\node_modules\@babel\core\lib\config\validation\options.js:85:10) 1) at loadPrivatePartialConfig (C:\Users\LSH\Desktop\react\gugudan\node_modules\@babel\core\lib\config\partial.js:78:50) ) at loadPrivatePartialConfig.next (<anonymous>) at C:\Users\LSH\Desktop\react\gugudan\node_modules\@babel\core\lib\config\partial.js:147:25 at Generator.next (<anonymous>) at step (C:\Users\LSH\Desktop\react\gugudan\node_modules\gensync\index.js:261:32) client.jsx가 문제인거같아 코드도 다시쳐보고 했는데도 안되네요 왜 저기서 에러가 뜰까요 ㅠㅠ
- 미해결웹 게임을 만들며 배우는 React
export const 변경
앞의 수업을 따라하면서 module.exports > require('') 방식으로 작성하고 있어서 이번에도 따라하면서 그렇게 작성하고 있었는데 상수를 export const ... > import 시키는 부분을 module.exports방식으로 어떻게 바꿔야 하는지 잘 모르겠습니다.
- 미해결웹 게임을 만들며 배우는 React
<td>를 <table>이 자식으로 가지지 못하는 문제
아래의 문제가 나와 검색해보니 <tbody></tbody>로 묶어주어야한다고 하여 묶어 주었으나 계속 같은 문제가 발생되어 여쭤봅니다...
- 미해결웹 게임을 만들며 배우는 React
import 사용 불가 문제
웹팩 설정을 똑같이 한 것 같은데 require문은 사용이 가능한데 import 사용시 이와 같은 에러가 나옵니다. webpack의 babel 옵션을 검색해보았으나 import to require 옵션을 찾기 힘들어 여기에 여쭤봅니다. const path = require("path"); const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name: "tictactoe-dev", mode: "development", // publish option -> production devtool: "eval", resolve: { extensions: [".js", ".jsx"], }, entry: { app: ["./client"], // already webpack knows about wordchain.jsx file }, // Input module: { rules: [ { test: /\.jsx?/, loader: "babel-loader", options: { // Adding all browsers can affect performance, so adding only the browsers you want is important. // It also allows you to apply different options in detail // plugins are setting for preset presets: [ [ "@babel/preset-env", { targets: { browsers: ["> 5% in KR", "last 2 chrome versions"], // browserslists }, debug: true, }, ], "@babel/preset-react", ], plugins: [ "@babel/plugin-proposal-class-properties", "react-refresh/babel", ], }, }, ], }, // extension, if you need to add more options // add debug in all module components // plugins: [new webpack.LoaderOptionsPlugin({ debug: true })], plugins: [new RefreshWebpackPlugin()], output: { path: path.join(__dirname, "dist"), filename: "app.js", publicPath: "/dist/", }, // Output devServer: { publicPath: "/dist/", hot: true, }, };
- 미해결웹 게임을 만들며 배우는 React
Hook을 빼서 재사용성이 높아진다는 질문에 관련된 질문
"useEffect를 여러 개 쓰시면 됩니다. 디드마운트용과 디드업데이트용 따로요. 훅들은 컴포넌트 바깥으로 뺄 수 있어서 재사용성이 높아집니다." 이라는 답변을 밑에서 확인하였습니다. 훅들 같은 경우 함수내에서 사용되야 되기 때문에 컴포넌트 바깥으로 뺄 수 없다고 생각되는데 재사용성이 높아진다는 말이 이해가 안되어 여쭤봅니다.
- 미해결웹 게임을 만들며 배우는 React
취업관련
안녕하세요. 너무 많은 질문을 드리는거 점 일단 죄송하게 생각합니다. 걱정이 많아 여러번 여쭤보는거 같네요. 제로초님이 생각하시기에 이 강의 후 slack, nodebird 완강 후 두 프로젝트를 토대로 포트폴리오 작성 후 취업전선에 뛰어든다면 충분하다고 생각하시나요? 저는 현재 미국에서 취준중에 있습니다.
- 미해결웹 게임을 만들며 배우는 React
렌더링 관련
purecomponent를 사용하고 싶지 않을 경우 component 및 shouldupdatecomponent를 사용한고 말씀하셨었는데요. state를 사용하는 이유가 값의 변경이 있기 때문인데 영상에서 언급하신거처럼 tries 변경 시 렌더링을 하지 않겠다고 하면 렌더를 안하게되는거고 값의 변경이 없을테고 그럼 state를 사용하는 이유가 없을것 같아서요. 혹시 위에서 언급하신 부분을 사용하는 예가 있다면 말씀해주실수 있으신가요? 감사합니다.
- 미해결웹 게임을 만들며 배우는 React
Dev 툴 및 강의 문의
강의 잘 보고 있습니다. Dev 툴이 업데이트되서 바뀌었는지 Redux를 보는게 없어진듯한데 혹시 구조를 보는 방법이 있을까요? 또한 강의 문의로 이 강의 완강 후 NodeBird 클론코딩을 들을까 합니다. 그 후 Slack을 듣고요. 이 부분에 대해서는 어떻게 생각하세요? 현재 늦깍이 30대 취준생입니다.
- 미해결웹 게임을 만들며 배우는 React
웹팩 리엑트 관련 문서는 어디서 확인하나요?
웹팩 업데이트 관련해서는 리엑트 페이지에 없는거 같은데 웹팩 공식 사이트가서 문서를 봐야 할까요 ?
- 해결됨웹 게임을 만들며 배우는 React
강의에서 사용하는 && ||
이번 강의에서 사용한 return code || '' || 를 좀 찾아보니 A || 'ABC' 이런식으로 적으면 A값이 없을때 ABC 가 출력된다고 나와서요. 이번예제에서는 code에 0값이 있어도 값이없다고 인식하는건가요?? 또 && 을 사용하는 조건문 좀더 자세하게 설명해주실수 있으신가요?
- 미해결웹 게임을 만들며 배우는 React
Tr 컴포넌트에서 useRef, useEffect로 확인할때
깅의에서 ref에 값 3개 넣어서 index 값이 0 1 2 가 되야하는데 2, 3으로 실수하셔서 false로 출력된거같은데 index값 맞게 넣으면 rowData => false , rowIndex =>true , dispatch => true 나오는데 이거랑 상관없이. 그냥 강의에있는데로 제일 마지막자식 컴포넌트부터 memo 적용해주고 그래도 렌더링최적화가 잘안되면 컴포넌트쪽에 useMemo 사용해주면 되는건가요??
- 해결됨웹 게임을 만들며 배우는 React
CLICK_CELL 불변성위해 state값 복사하는거 좀 더 자세하게 설명부탁드립니다..
이부분 내부 데이터를 바꾸려고 상수하나 만들어서 거기에 table state 값 복사하는 const tableData = [...state.tableData]; 는 이해해였습니다. tableData[action.row] = [...tableData[action.row]] 를 한번더 값을 복사하는지 이해가 안되네요.. 또 아래 return { ...state, tableData } 에서 tableData는 state의 tableData가 아니라 새로생성한 tableData const값이 들어가는거같은데. React에서 자동적으로 감지해서 바꿔주는건가요? 그럼 const tableData 값의 이름이 다르면 감지못하는건지..
- 해결됨웹 게임을 만들며 배우는 React
useEffect가 여러개존재할때.
해당강의에서 useEffect 두번째 파라미터 배열에 요소를 넣어도. Hooks에서는 useEffect가 DidMount,DidUpdate 역할을 하기때문에 Mount때 한번은 무조건 실행된다고 mouted라는 ref를 따로 만들어서 DidUpdate때만 실행되도록하는 패턴을 알려주셨는데 그럼 useEffect가 여러개있을때 ( 각 state마다..) 해당작업이 안되있다면 처음 DidMount때 여러개있는 useEffect가 일단 한번은 실행되는건가요??
- 미해결웹 게임을 만들며 배우는 React
안녕하세요~ 리렌더링 관련해서 질문하고싶습니다.
강의 화면에서 이미지만 하이라이팅 되는걸 볼수있는데, 컴포넌트는 언제 분리하셨는지 확인할수가없네요 ㅠㅠ;
- 해결됨웹 게임을 만들며 배우는 React
useEffect []
리액트에서 setState될때 리렌더링이 일어나는데 클래스는 아래 render() 부분이 다시실행되는반면 Hooks는 전체가 다시실행되버리기때문에 useEffect에 [ ] 배열이 비어있을경우 setInterval이 딱한번만 실행되고 리렌더링되버려서 그림이 더안바뀌고. [ ] 에 useEffect로 값이변경되는 state를 넣으면 그걸 감지해서 setInterval이 다시실행되고 .반복한다. 제가 이해한 useEffect 작동원리가 이런데.. 맞는건가요?
- 해결됨웹 게임을 만들며 배우는 React
onClick 화살표함수 사용이유.
지금까지 다른예제들에선 onClick 에 거는 이벤트함수를 onClick = {this.onClickbtn} 같이 화살표함수 없이 사용했고. 또 에러도 발생안했는데. 이 예제에 화살표함수로 btn함수를 연결해주어야하는 이유는 무엇인가요?? 화살표함수 없이 예전예제들 했던대로했더니 에러발생해서 뭐가다른건지 잘모르겠습니다.