웹 게임을 만들며 배우는 React

웹 게임을 만들며 배우는 React

(27개의 수강평)

2380명의 수강생
React웹 개발게임개발
무료
지식공유자 · 조현영
64회 수업· 총 12시간 44분수업
평생 무제한 시청
수료증 미발급 강의
수강 난이도 초급
김현진 프로필

ComponentDidUpdate질문 김현진 1일 전
ComponentDidUpdate 호출조건 중 하나가setState로 State값이 바뀌었을때 componentDidUpdate가 발생하는걸로 알고 있는데 componentDidUpdate안에 다시 setState를 사용하면 setState -> componentDidUpdate -> setState -> componentDidUpdate ....... 계속해서 반복 호출이 되는게 아닌가요????

1
김현진 프로필

hooks useEffect 김현진 1일 전
hooks에서 useEffect 사용 시  class를 사용해서 짠코드보다 랜더링이 훨씬 많아 지는게 아닌가요?그리고 useEffect에서 DidMount와 DidUpdate를 분기처리가 가능한가요?class hooks를 비교시 hooks가 코드의 간결성 빼고는 그다지 좋아보이지 않는데 hooks를 권하는이유를 아직 잘 모르겠습니다.

1
김현진 프로필

강의질문 김현진 2일 전
nodebird강의를 구매했는데 선수학습으로 react기본강의를 들어야 된다고 했는데 지금 50프로정도 듣고 넘어갈려고 하는데그래도 될까요?? 그리고 이강의에서 redux강의도 있나요???

1
skywalk 프로필

app.js 파일 생성 문제 skywalk 7일 전
실행은 잘 되고 있으나, dist 폴더에 app.js 파일이 생기지 않네요. 다른 경로에도 없고.. 그런데 실행은 잘 되네요.  서버에 만들어 지나요?  , 수고하세요

0
장철희 프로필

tableData를 map으로 실행할 때 Array를 사용하는 이유가 있나요? 장철희 10일 전
//강의 내용 Array(tableData.length) .fill() .map((tr, i) => { return <Tr rowData={tableData[i]} />; }) //이렇게 하지 않는 이유가 있나요? tableData.map((tr, i) => { return <Tr rowData={tableData[i]} />; })

1
mkp0131 프로필

Hooks 사용시 setState를 하면 무조건 함수가 재실행되는 것인가요?? mkp0131 1달 전
아래의 코드대로 한번 짜보았는데, 재생각엔 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); }

1
mkp0131 프로필

클릭한 버튼에 스타일을 줄려면 어떻게 하는게 좋을까요? mkp0131 1달 전
기존의 자바스크립트처럼 코드를 처리하였는데, 리액트를 이용해서 처리할려면 어떻게 하면 좋을지 알고싶습니다. <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');

1
tagooon 프로필

해당강의 수료후에는 어떤강의를 듣는게 좋을까요? tagooon 1달 전
생활코딩님의 기초 리액트 강의 다음으로 이 강의를 듣게되었는데 사용법을 하나하나 예시로 보여주셔서 너무 유익한 강의였던거 같습니다. 강의를 듣고난 이후  Hooks의 사용(useEffect, useMemo, useCallback, useReducer, useContext등의 Hooks들이 각각 무슨일을하는지는 이해했지만, 어떠한경우에 사용해야하는지에 대해 잘 모르겠습니다.) 에 대해서 조금더 깊게 알아보고싶은데 어떤 강의를 수강하는게 좋을까요??

3
Kyeongtii 프로필

8-3 useContext를 사용해 지뢰칸 랜더링 강의 부분 질문입니다. Kyeongtii 1달 전
위 사진에서 보듯이  tableData, rowIndex, cellIndex 다 잘나오고 있는데 다음과 같은 에러가 발생합니다. Cannot read propery '0' -> '0' 이 부분이 1,2,3,.... 로 Uncaught TypeError가 발생합니다. zeroCho님 Github도 살펴봤는데 어디가 잘못되었는지 모르겠습니다. 

1
mkp0131 프로필

path.join 을 꼭 사용해야하는 이유가있을까요? mkp0131 1달 전
  output: {     path: path.join(__dirname, 'dist'),     filename: 'app.js',   }, // 출력 path.join 을 꼭 사용해야하는 이유가있을까요? __dirname + '\\dist' 로도 같은 값을 얻을 수 있을 것같아 여쭤봅니다. 좋은 강의 감사합니다 ; )

1
devsn 프로필

state에서 배열 설정 관련 질문드립니다 devsn 1달 전
안녕하세요 제로초님 리액트 기초 강좌를 수강 중입니다. Q. state를 구성하실 때, 어느 때에 빈 배열을 설정해야 하는지가 궁금합니다. 실제 강의에서, 1. 반응속도체크에서, state[result]에 빈 배열을, 2. 로또에서, state[winBalls]에 빈 배열을 할당했습니다. 제가 강의를 안 들은 상태에서 해당 게임을 리액트로 구성했을 때, 저는 처음에 빈 문자열을 할당 했었습니다. 빈 문자열을 할당해서, 나중에 배열로 구성하는 게 더 나을 거 같다는 생각에 빈 배열로 다시 했습니다. 강의를 듣다가도, 빈 배열을 주는 이유는 알겠는데, 이거를 처음부터 '여기는 빈 배열로 값을 줘야지'라는, 생각을 할 수 있는 조건 같은 것이 있는건가요?

1
양갱 프로필

지뢰찾기 context Provider에서 value 질문입니다 양갱 1달 전
실행버튼을 누르면 위의 코드에서 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번이랑 같은게 아닌가요??

2
양갱 프로필

틱택토 memo 적용 시 문제 발생 양갱 1달 전
위의 Td.jsx 에 memo를 적용하면 렌더링이 줄어들고 O, X가 잘찍힙니다. 하지만  Tr.jsx에 memo를 적용하면 렌더링은 줄어들지만 O와 X가 찍히지가 않습니다.. 왜그런지 모르겠습니다 ㅠㅠ..

1
장성현 (shamrock) 프로필

npm init시 세팅 문의드립니다. 장성현 (shamrock) 2달 전
npm init 할때 entry point를 default값인 index.js로 만들어서 진행하시는데요. 이렇게 할 경우 package.json의 main 값이 index.js로 되는데,  강의따라하다 보면 index.js은 만들지 않고도 제대로 동작하는 것 같습니다. 이 옵션은 실제 동작에 아무런 영향을 안 미치는 옵션인가요?

0
동배 프로필

state와 화면의 일치(synchronize) 질문 동배 2달 전
강좌 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로 직접 접근을 해서 그런건가요? 별로 차이가 없는것 같아서 너무 헷갈리내요

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