무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
에러는 아닌데 화면에 표시가 않되는거요 ..
에러는 나지 않고 제대로 webpack이 코드를built한것 같은데 화면으로 표시되는 부분이 않나오는데 .. 제가 어디를 미스한걸까요? 저는 index.html파일을 open with live server로 열어봤는데 아무것도 표시가 않되고, 다른 분 답변에 하신대로 localhost:8080에도 표시가 않되는데요. ㅠㅡㅠ 제가 세팅한 명령어들
- 미해결웹 게임을 만들며 배우는 React
mome가 state 변경을 감지하는 방법이 궁금합니다.
state의 참조 값 변경을 감지하나요? 아니면 state의 값을 직접확인하여 변경을 감지하나요?
- 미해결웹 게임을 만들며 배우는 React
focus
중간에 포커스 해주는 부분을 넣지 않아도 그냥 포커스가 되는데요. 이게 다른 이유 ( 제 브라우저, 아님 익스텐션 때문에) 때문일수도 있을까요? <html> <head> <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> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="root"></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.random() * 9), value: '', result: '', }; } onSubmit = (e) => { e.preventDefault(); if (parseInt(this.state.value) === this.state.first * this.state.second) { this.setState((prevState) => { return { result: '정답:' + prevState.value, first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', }; }); // this.hello.focus(); } else { this.setState({ result: '땡', value: '', }); // this.hello.focus(); } }; onChange = (e) => { this.setState({ value: e.target.value }); }; hello; render() { return ( <React.Fragment> <div> {this.state.first}곱하기{this.state.second}는? </div> <form onSubmit={this.onSubmit}> {' '} <input // ref={(c) => { // this.hello = c; // }} type="number" value={this.state.value} onChange={this.onChange} /> <button>입력!</button> </form> <div>{this.state.result}</div> </React.Fragment> ); } } </script> <script type="text/babel"> ReactDOM.render( <div> <GuGuDan /> <GuGuDan /> <GuGuDan /> <GuGuDan /> </div>, document.querySelector('#root') ); </script> </body> </html>
- 미해결웹 게임을 만들며 배우는 React
강의 중간에 닫히는 부분이 같이 타이핑 되는거..
강의에서 아래 쓰실때요 닫히는 코드가 같이 타이핑 되는데 그건 어떻게 하는건가요? <React.Fragment>
- 미해결웹 게임을 만들며 배우는 React
value오류 질문 드립니다ㅜ
에러가 뜨는게 어느부분을 고쳐야하는지 모르겟습니다ㅜ value가 잘못됫다고 하는데 스펠링맞게 쓴거같은데 왜 에러가뜨는지 모르겟어요ㅜ <html> <head> <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> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="root"> </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.random() * 9), value:'', result:'', }; } onSubmit = (e)=>{ e.preventDefault(); if(parseInt(this.state.value) === this.state.first * this.state.second){ this.setState({ result: '정답', first: Math.ceil(Math.random()*9), second: Math.ceil(Math.random()*9), value:'', }); } else{ this.setState({ result:"땡", value:'', }); } }; onchange = (e) => { this.setState({value:e.target.value}); }; render(){ return ( <div> <div>{this.state.first}곱하기{this.state.second}는?</div> <form onSubmit={this.onSubmit}> <input type="number" value={this.state.value} onChange={this.onChange} /> <button>입력!</button> </form> <div> {this.state.result} </div> </div> ); } } </script> <script type="text/babel"> ReactDOM.render(<GuGuDan />, document.querySelector('#root')); </script> </body> </html>
- 미해결웹 게임을 만들며 배우는 React
useEffect 질문있습니다.
useEffect(() => { // componentDidMount, componentDidUpdate = 합쳐놓았다고 생각 console.log('랜덤') interval.current = setInterval(changeHand, 100) return () => { // componentWillUnmount console.log('랜덤종료') clearInterval(interval.current) } }, [imgCoord]) // componentDidUpdate componentwillMount가 헷갈리는게 componentDidMount, componentDidUpdate 이후에 바로 실행이 되는건가요~? 아니면 componentDidUpdate가 되면서 기존 컴포넌트가 리렌더링 될 때 일어나나요? 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
렌더링 될 때마다 함수 새로 그려지는데 한 번 선언하고 계속 쓰면 안되는건가요:?
함수가 새로 그려지는게 useCallback 콜백 매개변수로 특정 값이 바뀔때마다 함수가 새로그려지는걸로 알 고 있습니다. 근데 예전부터 궁금했는데 한 번 그려놓은 함수를 계속 사용하면 되는거아닌가요? 왜 특정 값이 바뀔때마다 useCallback을 해서 새로 그려야 되는건가요? 그냥 [] 빈 배열 값 넣고 시작, 끝일때 실행되게 하면 문법상 에러인가요?
- 해결됨웹 게임을 만들며 배우는 React
클로저문제
클로저 문제 비동기함수에서 바깥쪽 변수 찾는데 componentDidMount(){ const {imgCoord} = this.state setInterval(){ } } 내부함수에서 외부함수 변수 참조하는데 딱히 문제 될거 없지 않나요?? 이부분 조금 이해한되는데 조금만 더 설명 부탁드려도 될까요?TT
- 미해결웹 게임을 만들며 배우는 React
바벨을 적용하니까 에러가 나면서 라이크버튼이 적용되지 않습니다.
element.style { } user agent stylesheet body { display: block; margin: 8px; } margin 8 8 border ‒ ‒ padding ‒ ‒ 1113 × 1247 ‒ ‒ ‒ ‒ 8 8 Console What's New Issues top Default levels Some messages have been moved to the Issues panel. View issues index.html:95 Live reload enabled. babel.min.js:1 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ react-dom.development.js:82 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. in LikeButton in div react-dom.development.js:19662 The above error occurred in the <LikeButton> component: in LikeButton in div Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:11237 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (react-dom.development.js:23228) at scheduleUpdateOnFiber (react-dom.development.js:21299) at Object.enqueueSetState (react-dom.development.js:12774) at LikeButton.Component.setState (react.development.js:557) at LikeButton.render (<anonymous>:49:23) at finishClassComponent (react-dom.development.js:17295) at updateClassComponent (react-dom.development.js:17245) at beginWork (react-dom.development.js:18755) at beginWork$1 (react-dom.development.js:23314) at performUnitOfWork (react-dom.development.js:22289)
- 미해결웹 게임을 만들며 배우는 React
리덕스 관련 질문합니다.
강사님 안녕하세요. 3-9. React Devtools 강의 7:00보면 강사님께서 redux를 숨기지 않아서 보안에 좋지 않다고 하셨는데, 혹시 어떻게 해야 보안에 좋은지 궁금합니다.. 답변해주시면 감사하겠습니다. 감사합니다.
- 해결됨웹 게임을 만들며 배우는 React
value에 대해 질문드립니다.
안녕하세요. 강사님께서 알려주신대로 작성한 것 같은데 정답일 때 number(value)의 값이 초기화가 안되어 문의드립니다. 제가 수동으로 지워야만 지워집니다.. 테스트는 크롬으로 진행하였습니다. 따로 스크립트 오류는 안나는 것 같은데 제가 뭘 잘못하고 있는 걸까요? <html> <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> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="root"></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.random() * 9), // 두번째값 value: '', // 입력값 result: '', // 결과값 } } // html 안에 script 를 따로 빼서 onSubmit() 메소드로 변경 onSubmit = (e) => { e.preventDefault(); if(parseInt(this.state.value) === this.state.first * this.state.second) { this.setState({ result: '정답', first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', }); } else { this.setState({ result: '땡', value: '', }); } }; onChange = (e) => { this.setState({ value: e.target.value }); }; // 그리기 render() { return ( <div> <div>{this.state.first} * {this.state.second} = ?</div> <form onSubmit={this.onSubmit}> <input type="number" vaule={this.state.value} onChange={ this.onChange } /> <button>입력</button> </form> <div>{this.state.result}</div> </div> ); } } </script> <script type="text/babel"> ReactDOM.render(<GuGuDan />, document.querySelector('#root')); </script> </body> </html>
- 미해결웹 게임을 만들며 배우는 React
TicTacToe.jsx 파일의 코드에 대한 질문드립니다.
useEffect(() => { const[row,cell] = recentCell; if(row < 0) { return ; } let win = false; if (tableData[row][0] === turn && tableData[row][1] === turn && tableData[row][2] === turn) { win = true; } if (tableData[0][cell] === turn && tableData[1][cell] === turn && tableData[2][cell] === turn) { win = true; } if (tableData[0][0] === turn && tableData[1][1] === turn && tableData[2][2] === turn) { win = true; } if (tableData[0][2] === turn && tableData[1][1] === turn && tableData[2][0] === turn) { win = true; } ... TicTacToe.jsx에 있는 useEffect 안에서 row랑 cell이라는 변수를 사용하고 있는데 이 값은 어디에서 가져온 값인지 궁금합니다. row,cell이라는 값을 넘기는게 Td 컴포넌트의 dispatch부분에서 밖에 없는데 이건 reducer에서 관리하는 부분으로 넘어가서 state로 return하는데 거기서 따로 넘겨주지 않는 거 같아서요..
- 해결됨웹 게임을 만들며 배우는 React
webpack 소스 중복제거
webpack 소스 중복제거관련해서 강의 들으면서 의문이 들어서 제가 이해한게 맞는지 알고자 문의 드려요~첨에 제가 중복소스라고 들었을때 의문이 들었던건 js 파일 내의 소스들의 중복을 해결해준다고?? 라고 생각해서 검색해 봤는데 그런 의미가 아니라 동일한 파일이름의 js파일을 중복해서 참조하는 경우 라고 생각을 고쳤어요. 보통 npm모듈들을 종속처리하는 경우 그런일들이 많은 거 같은데 번들링시에 npm 모듈의 중복적인 종속이 있는경우 하나의 모듈로만 최종적으로 번들해준다라고 이해해도 될까요?
- 해결됨웹 게임을 만들며 배우는 React
함수형 컴포넌트의 익명함수
클래스형 컴포넌트의 경우 render안에 사용했던 익명함수들은 render가 실행될때마다 재 생성되기때문에 따로 함수로 구현한 후에 참조해서 사용하는게 좋다고 하셨는데.. 함수형의 경우는 어떻지라는 생각이 들어 문의드려요~ 함수형 컴포넌트의 경우 함수형 컴포넌트 전체가 재실행되는데 해당 컴포넌트내에서 함수를 구현해서 사용하더라도 다시 생성이 될거고 이러면 단순한 함수의 경우 익명함수와 비교해 봤을 때 큰 차이는 없을 거 같아서요. 함수형 컴포넌트내에 따로 함수를 만들어서 사용한다면 유지보수적으로 따로 만드는게 좋다라고 생각해도 될까요? 아니면 부모단의 컴포넌트가 있다고 가정할때 중복적인 사용의 함수들의 경우 최대한 부모단에서 생성한다음 자식컴포넌트로 바인딩하는 것이 좋은 방향일까요?
- 미해결웹 게임을 만들며 배우는 React
폴더별로 npm 사용해서 모듈들 다 새로 설치 해야 하는건가요?
영상을 보면 lecture 폴더 하나에다가 처음에 모듈 설치 다 해두고 그 폴더에서 jsx 파일만 변경하시는걸로 보입니다 저는 폴더별로 나눠서 실습을 진행하고 있는데 폴더 새로 만들면 node_modules가 없어서 모듈세팅을 다 해줘야 하네요... 실무에서는 수많은 페이지가 나올거고 그 페이지별로 다른 js가 필요하다고 하면 그때마다 module 새로 설치하지는 않을것 같은데...혹시 이런 경우는 어떻게 해결하는지 알 수 있을까요? webpack.config.js, package.json같은 설정파일 복사해서 붙여넣고 한번에 돌린다던가 하는... 혹시 해당 내용은 뒷 강의에 나오는 내용인지;
- 미해결웹 게임을 만들며 배우는 React
memo 관련 질문이요
memo로 컴포넌트를 감싸줄 때 그냥 export dfeault memo(컴포넌트명) 이렇게 해줘도 되던데 계속 이렇게 해줘도 될가여??
- 미해결웹 게임을 만들며 배우는 React
02:50 input 을 클래스 안에다 선언해주는 것 질문드립니다.
1. input 은 변수인가요? 타입(var 냐 const 냐..)은 뭔가요? 생각해보니 그럼 다른 함수들,, 메서드들은 타입은 뭔가요? ===== 2. onChange 함수(메서드)와 동등한 위치에 input 이라는게 들어가있는 꼴인데, 자바스크립트 고유 클래스 문법인가요? JSX 문법인가요? ===== 3. constructor 내부에 this.state 바로 아래에다가 this.input; 이렇게 선언해도 정상적으로 잘 나오던데, 이렇게 생성자 내부에... 선언하면.... 선언한 것과 그 외부에 선언한거는 뭔 차이를 갖나요?
- 미해결웹 게임을 만들며 배우는 React
09:03 함수형 컴포넌트에서는 함수형 setState 사용 어떻게 하나요?
09:03 부터 들어주신 예시는 인자 값이 prevResult 라서 써먹을 수가 없다고 넘어가셨는데요. 그럼 함수형 컴포넌트에서는 어떻게 써야하나요?
- 미해결웹 게임을 만들며 배우는 React
인프런에서도 redux
redux 구조 볼수있네용 ㅋㅋ
- 미해결웹 게임을 만들며 배우는 React
IE에서 작동 안하는 문제 한참 해멨네요
아마 최신 babel에서 문법이 바뀌었나봅니다. webpack.config.js 에서 presets: 이안에 browers 를 넣을텐데 options: { presets: [ '@babel/preset-env', '@babel/preset-react' ], plugins: [ '@babel/plugin-proposal-class-properties' ] } 위에처럼 browsers를 지우시고 package.json 에 "browserslist" : ['...'] 이렇게 추가해주세요 (아래) "browserslist": [ "> 1% in KR", "not dead", "ie 11" ]