무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
강의질문
nodebird강의를 구매했는데 선수학습으로 react기본강의를 들어야 된다고 했는데 지금 50프로정도 듣고 넘어갈려고 하는데그래도 될까요?? 그리고 이강의에서 redux강의도 있나요???
- 미해결웹 게임을 만들며 배우는 React
app.js 파일 생성 문제
실행은 잘 되고 있으나, dist 폴더에 app.js 파일이 생기지 않네요. 다른 경로에도 없고.. 그런데 실행은 잘 되네요. 서버에 만들어 지나요? , 수고하세요
- 미해결웹 게임을 만들며 배우는 React
tableData를 map으로 실행할 때 Array를 사용하는 이유가 있나요?
//강의 내용 Array(tableData.length) .fill() .map((tr, i) => { return <Tr rowData={tableData[i]} />; }) //이렇게 하지 않는 이유가 있나요? tableData.map((tr, i) => { return <Tr rowData={tableData[i]} />; })
- 미해결웹 게임을 만들며 배우는 React
Hooks 사용시 setState를 하면 무조건 함수가 재실행되는 것인가요??
아래의 코드대로 한번 짜보았는데, 재생각엔 setComputer 가 실행되면 state가 변경되기때문에 PRS 함수가 다시실행되면서 num = 0 으로 고정되어 제대로 작동하지 않을 것같은데... 제대로 잘 작동하더라구요... const PRS = () => { const [gameResult, setGameResult] = React.useState(''); const [computer, setComputer] = React.useState(''); let num = 0; const readyGame = () => { if (num % 3 == 0) { setComputer('scissors'); } else if (num % 3 == 1) { setComputer('paper'); } else { setComputer('rock'); } if(num == 12) { num = 0; } else { // console.log('num', num); num++; } console.log('num', num); }
- 미해결웹 게임을 만들며 배우는 React
클릭한 버튼에 스타일을 줄려면 어떻게 하는게 좋을까요?
기존의 자바스크립트처럼 코드를 처리하였는데, 리액트를 이용해서 처리할려면 어떻게 하면 좋을지 알고싶습니다. <div className="btn-box"> <button onClick={(e) => {this.prsStart('scissors', e)}}>가위</button> <button onClick={(e) => {this.prsStart('rock', e)}}>바위</button> <button onClick={(e) => {this.prsStart('paper', e)}}>보</button> </div> const eventTarget = e.currentTarget; eventTarget.classList.add('on');
- 미해결웹 게임을 만들며 배우는 React
해당강의 수료후에는 어떤강의를 듣는게 좋을까요?
생활코딩님의 기초 리액트 강의 다음으로 이 강의를 듣게되었는데 사용법을 하나하나 예시로 보여주셔서 너무 유익한 강의였던거 같습니다. 강의를 듣고난 이후 Hooks의 사용(useEffect, useMemo, useCallback, useReducer, useContext등의 Hooks들이 각각 무슨일을하는지는 이해했지만, 어떠한경우에 사용해야하는지에 대해 잘 모르겠습니다.) 에 대해서 조금더 깊게 알아보고싶은데 어떤 강의를 수강하는게 좋을까요??
- 미해결웹 게임을 만들며 배우는 React
8-3 useContext를 사용해 지뢰칸 랜더링 강의 부분 질문입니다.
위 사진에서 보듯이 tableData, rowIndex, cellIndex 다 잘나오고 있는데 다음과 같은 에러가 발생합니다. Cannot read propery '0' -> '0' 이 부분이 1,2,3,.... 로 Uncaught TypeError가 발생합니다. zeroCho님 Github도 살펴봤는데 어디가 잘못되었는지 모르겠습니다.
- 미해결웹 게임을 만들며 배우는 React
path.join 을 꼭 사용해야하는 이유가있을까요?
output: { path: path.join(__dirname, 'dist'), filename: 'app.js', }, // 출력 path.join 을 꼭 사용해야하는 이유가있을까요? __dirname + '\\dist' 로도 같은 값을 얻을 수 있을 것같아 여쭤봅니다. 좋은 강의 감사합니다 ; )
- 미해결웹 게임을 만들며 배우는 React
state에서 배열 설정 관련 질문드립니다
안녕하세요 제로초님 리액트 기초 강좌를 수강 중입니다. Q. state를 구성하실 때, 어느 때에 빈 배열을 설정해야 하는지가 궁금합니다. 실제 강의에서, 1. 반응속도체크에서, state[result]에 빈 배열을, 2. 로또에서, state[winBalls]에 빈 배열을 할당했습니다. 제가 강의를 안 들은 상태에서 해당 게임을 리액트로 구성했을 때, 저는 처음에 빈 문자열을 할당 했었습니다. 빈 문자열을 할당해서, 나중에 배열로 구성하는 게 더 나을 거 같다는 생각에 빈 배열로 다시 했습니다. 강의를 듣다가도, 빈 배열을 주는 이유는 알겠는데, 이거를 처음부터 '여기는 빈 배열로 값을 줘야지'라는, 생각을 할 수 있는 조건 같은 것이 있는건가요?
- 미해결웹 게임을 만들며 배우는 React
지뢰찾기 context Provider에서 value 질문입니다
실행버튼을 누르면 위의 코드에서 value에 () => {tableData: state.tableData, dispatch} 를 사용하고 value={value}를 하면 아래의 에러가 뜹니다. value안에 {tableData: state.tableData, dispatch}를 쓰거나, value에 () => {return {tableData: state.tableData, dispatch}}를 하면 에러가 뜨지않고 실행됩니다. 1. () => {tableData: state.tableData, dispatch} 2. () => {return {tableData: state.tableData, dispatch}} 1번이랑 2번이랑 같은게 아닌가요??
- 미해결웹 게임을 만들며 배우는 React
틱택토 memo 적용 시 문제 발생
위의 Td.jsx 에 memo를 적용하면 렌더링이 줄어들고 O, X가 잘찍힙니다. 하지만 Tr.jsx에 memo를 적용하면 렌더링은 줄어들지만 O와 X가 찍히지가 않습니다.. 왜그런지 모르겠습니다 ㅠㅠ..
- 미해결웹 게임을 만들며 배우는 React
npm init시 세팅 문의드립니다.
npm init 할때 entry point를 default값인 index.js로 만들어서 진행하시는데요. 이렇게 할 경우 package.json의 main 값이 index.js로 되는데, 강의따라하다 보면 index.js은 만들지 않고도 제대로 동작하는 것 같습니다. 이 옵션은 실제 동작에 아무런 영향을 안 미치는 옵션인가요?
- 해결됨웹 게임을 만들며 배우는 React
state와 화면의 일치(synchronize) 질문
강좌 1-3, 7:40초 쯤에서 기존 웹을 하시는분(react같은 프레임웤,라이브러리 사용x)분에게는 이게 놀라운 것이라 하셔서 질문드립니다. react를 사용하지 않고 js만 사용했을때 const btn = document.createElement("button"); btn.textContent = "click"; let clicked = true; btn.addEventListener("click", () => { clicked = !clicked; btn.textContent = clicked ? "click" : "clicked"; }); 이것도 clicked라는 변수에 상태를 두고 클릭될때 마다 자동으로 변화시키는 것이 아닌가요? 단지 textContent로 직접 접근을 해서 그런건가요? 별로 차이가 없는것 같아서 너무 헷갈리내요
- 미해결웹 게임을 만들며 배우는 React
안녕하세요
안녕하세요 리액트 무료강좌가 끝난 후, 유료 리액트 노드버드 강좌를 신청하려고 합니다 유튜브에 보니까 리뉴얼한다는 말씀을 하셨는데, 언제 리뉴얼된 강좌를 볼 수 있을까요?
- 미해결웹 게임을 만들며 배우는 React
배열수정
useState를 보고 궁금한게 있어서 질문드립니다. useState는 불변성때문에 직접적으로 변경을 해주는게 불가능하다 들어서 splice 같은 메소드는 못 쓴다고 들었습니다. 예를들어서 [1,2,3,4,5]라는 배열이있을때 3을 삭제하고 9라는 숫자를 넣고싶으면 어떻게 해야할지 감이안잡혀서 질문드립니다.
- 미해결웹 게임을 만들며 배우는 React
hooks 렌더링 새로고침
class 같은경우엔 render함수만 리렌더링 되고 함수형으로 사용할때에는 전체가 리렌더링이 된다고 하셨는데 그걸방지하는 hooks가 usecallback을 사용해서 막는건가요?
- 미해결웹 게임을 만들며 배우는 React
👍
👍
- 미해결웹 게임을 만들며 배우는 React
블로그에서 자바스크립트 기본정도 보고 넘어왔어요. 공식문서 기반이라 좋아요.
감사합니다.
- 미해결웹 게임을 만들며 배우는 React
결과값 오류......
안녕하세요 다름이 아니라 강좌를 보고 저 혼자 코딩을 해봤는데 오류가 뜨네요 ㅠㅠ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <title>React Web 구구단 구현</title> </head> <body> <div id="root"></div> <!-- 결과 : <div id="root"><button>Like</button></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: '', }); } render() { return ( <div> <div>{this.state.first} 곱하기 {this.state.second}는??</div> <form onSubmit = {this.onSubmit} <input type="number" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} /> <button>입력!!</button> </form> <div>{this.state.result}</div> </div> ); } } // <input type="number" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} /> // input.onchange = (e) => { console.log(e.target.value) } // input.onchange = function (e) { console.log(e.target.value) } </script> <script type="text/babel"> ReactDOM.render(<GuGuDan />, document.querySelector('#root')); </script> </body> </html>
- 미해결웹 게임을 만들며 배우는 React
this
안녕하세요 궁금한게 있는데요 class에서는 state를 변경할 때 this.state.value 이런식으로 this.state 를 써주었는데 Hooks에서는 this.state를 사용하지 않고 써주는 것도 class와 Hooks의 차이점 인가요?