무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
왜 입력버튼을 두 번 클릭해야 결과가 제출될까요?
엔터키로 제출하면 바로 되는데 마우스로 입력 버튼을 누르면 꼭 두 번 눌러줘야 제출이 되더라구요. 이런 부분을 개선할 수 있는 방법도 있나요?
- 미해결웹 게임을 만들며 배우는 React
render -> effect 흐름 이거 아닌가요?
useEffect에서 승리 검사를 하는데 turn이 달라서 애먹은 부분에서 설명하실 때요. dispatch하면 recentCell이 바뀌어서 effect가 실행되는데 그 와중에 dispatch(change_turn)을 해서 내가 기대한 turn이 안 나왔다. 비동기를 잘 고려해야한다라고 하셨는데 제가 콘솔 찍어보면 그건 아닌 거 같습니다. 역시나 리액트돔이 dispatch로 발생된 setState들을 다 모아서 한번에 처리한다음 render 해줍니다. 그러면 흐름이 dispatch(click_cell), dispatch(change_turn) -> render -> useEffect이고 useEffect 내부에서는 현재의 턴이 아니라 이전의 턴으로 승리인지 검사를 해줘야겠죠. 왜냐하면 click_cell시 O였다고 가정하면 change_turn해서 X가 되고 render -> useReducer로 state 받아올 시 turn은 X가 나오겠죠? click_cell시의 O로 비교를 해야되는데 말이죠. 이거 맞는지 확인 부탁드려요
- 미해결웹 게임을 만들며 배우는 React
제가 이해한 것이 맞는지 궁금합니다.
client.jsx가 따로따로 분리해놓은 컴포넌트들을 담아주는 통(?)같은 개념이고 webpack이 client.jsx 파일 및 다른 컴포넌트 파일들을 하나로 묶어준 다음 app.js라는 파일에 담아준다고 저는 이해를 했는데요.. 이렇게 이해하는 것이 맞는지 궁금합니다!
- 미해결웹 게임을 만들며 배우는 React
npx webpack 할 때 오류....
ERROR in ./client.jsx 1:12-28 Module not found: Error: Can't resolve 'react' in 'C:\Users\user\Desktop\react-project\lecture' ERROR in ./client.jsx 3:15-35 Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\user\Desktop\react-project\lecture' ERROR in ./client.jsx 5:16-38 Module not found: Error: Can't resolve './WordRelay' in 'C:\Users\user\Desktop\react-project\lecture' 3 errors have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it. WordRelay (webpack 5.47.0) compiled with 3 errors in 760 ms- 이런게 발생하네요... https://github.com/2winyear/react-project 제 깃,,,주소입니다
- 미해결웹 게임을 만들며 배우는 React
왜 전 plugin-proposal 추가하기 전에 성공적으로 컴파일이 될까요?
전 왜 module로 고친 후에 plugin-proposal 추가하기 전에 성공적으로 컴파일이 될까요? 이후에 Hello webpack도 잘 나오네요.. 이유가 뭘까요? 이후 강좌를 위해 plugin-proposal도 추가해야될까요?
- 미해결웹 게임을 만들며 배우는 React
함수 컴포넌트는 마지막에 두번 랜더링 하는 이유?
콘솔로 찍어봤는데요. 마지막에 setRedo, setBonus를 하면 render가 두 번 실행될까요? '내가 뭘 잘못했지?'하고 강의 트니까 0:37 부분부터 랜더링 하면서 콘솔 찍히는데 제로초님도 getWinNumber가 마지막에 두 번 따닥! 호출되더라고요. 그 뜻은 render가 두 번 따닥 호출된거죠. 클래스 컴포넌트는 안 그러는데 함수 컴포넌트만 이러네요... 왜 불필요한 랜더링이 되는지, 어떻게 잡아야하는지 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
안녕하세요. 클래스내에서 함수 선언시 타입정의 질문드립니다.
안녕하세요. 강의 재밌게 수강중에 있습니다. 다름아니라, 의식을 못하고 있었는데 어느 순간부터 class 내에서 함수 (onClickScreen, renderAverage 등등) 정의할때는 왜 const나 let이 안붙는다는걸 의식했습니다. 보통 화살표 함수를 사용할때는 익명함수를 변숨에 담아야하기 때문에 const func1 = () => {...} 이런식으로 사용해야하는거 아닌가요? 왜 class안에서는 func1 = () =>{...}이런식으로 사용하는건가요? 관련키워드라도 주시면 찾아보겠습니다. 감사합니다
- 미해결웹 게임을 만들며 배우는 React
ref 함수 부분 질문드립니다.
<input ref={(c) => { this.input = c;}} 이 부분에서 질문드릴 것이 두 가지 있습니다. 1. c가 의미하는 것이 무엇일까요? 파라미터로 아무거나 들어가도 되는 것인가요? 2. onSubmit 함수의 if 와 else의 마지막에 this.input.focus()를 한 이유가 무엇일까요..?
- 미해결웹 게임을 만들며 배우는 React
constructor를 지우니까 에러가 뜨네요
삭제된 글입니다
- 해결됨웹 게임을 만들며 배우는 React
changeHand로 함수로 안 빼고 componentDidMount 호출해도 되나요?
componentDidMount가 첫 랜더링 호출후 실행되는 메소드이긴 하지만 이 메소드가 하는 일 자체가 인터벌을 다시 실행하는 일이잖아요? 그래서 onClickBtn 메소드에서 바로 호출해도 되나요? 일단 작동은 잘 되긴 하는데 componentDidMount는 첫 랜더링 후에만 호출되는 메소드(일종의 약속)니까 명시적으로 따로 호출하지 않는 게 좋나요? 아니면 리액트돔이 처음에 실행만 시켜줄 뿐 컨트롤 하는 건 개발자 몫이니 저런 식으로 또 써도 되나요?
- 미해결웹 게임을 만들며 배우는 React
webpack 실행 도중 오류
// 여러개의 jsx파일을 하나로 합쳐서 html에서 쓸 수 있게 해줌 const path = require('path'); // 노드에서 경로 조작을 하도록 해주는 것 const { webpack } = require('webpack'); module.exports = { name: 'wordrelay-setting', mode: 'development', // 실서비스: production devtool: 'eval', resolve: { extensions: ['.js', '.jsx'], }, entry: { app: ['./client'], }, // 입력 module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: { browsers: ['> 5% in KR', 'last 2 chrome versions'], }, debug: true, }], '@babel/preset-react' ], plugins: ['@babel/plugin-proposal-class-properties'], }, }], }, plugins: [ new webpack.LoaderOptionsPlugin({ debug:true }), ], output: { path: path.join(__dirname, 'dist'), filename: 'app.js' }, // 출력 }; webpack.config.js를 이렇게 쓰고 실행을 했는데 다음과 같은 에러가 뜹니다 ㅠㅠ 어디가 잘못된 것일까요?? 에러메시지에서 보여주는 new webpack.LoaderOptionsPlugin 줄을 주석처리하고 실행하면 되긴 하는데 저 부분이 왜 문제가 되는걸까요
- 미해결웹 게임을 만들며 배우는 React
RenderAverage
안녕하세요,zero cho님. 유익한 강의 항상 감사드립니다:) RenderAverage (제 코드에서는 RenderAver) 부분을 따로 떼서 jsx 파일로 만들고 props 를 넘겨주는 것처럼 구현을 해보았는데, 배운지 얼마 안 돼서 이렇게 적는게 맞는지 모르겠어서 여쭤봅니다! 아무 오류도 뜨지 않고 작동은 제대로 됩니다. 저 RenderAver 부분(평균 시간과 리셋버튼 부분)만 넘기고 다른 코드는 건드리지 않았어요 첫번째 사진이 RenderAver 를 import 하는 원래 반응속도의 return 부분, 두번째가 RenderAver.jsx 코드 사진입니다. 답변해주시면 감사하겠습니다!
- 미해결웹 게임을 만들며 배우는 React
숫자야구 질문!
안녕하세요 제가 숫자야구 코드를 이렇게 짰는데요 result가 숫자야구라는 h1 아래에 표시되게 하고 싶어서 이렇게 만들었어요. setTries에 새로 추가하는 객체의 result 내용이 setResult에 넣는 내용과 같아서 result:result로 변수를 직접 가져다 썼는데 처음 시도할 때 화면에 아래와 같이 표시되더라구요. 제목 밑에는 result에 내용이 잘 담겨서 출력이 되는데 왜 li태그 안에는 내용이 안나오는지 모르겠어요ㅠㅠ 그리고 또 하나 의문이 핫 리로딩을 사용하면 dist폴더에 app.js가 생성이 안되는데도 에러 없이 결과가 출력되던데 왜 그런지 알 수 있을까요? 좋은 강의 감사합니다!
- 미해결웹 게임을 만들며 배우는 React
useState 관련 에러 질문
안녕하세요. result를 useState 사용해서 변수 만들어놨는데 화면 초록색일때 클릭하면 renderAverage() 함수에서 result가 undefined로 나오네요... 나머지는 정상으로 작동합니다. 이유를 잘 모르겠어요 ㅜㅜ
- 미해결웹 게임을 만들며 배우는 React
memo 와 useMemo
memo 와 useMemo 를 어떤 경우에 각각 사용해야하는지 헷갈려서요.. 둘 다 캐싱하는 기능은 동일한데 어떤 차이로 인해 사용해야 하는 케이스가 나누어 지는걸까요? 검색해보면 React.memo는 HOC, useMemo는 hook이다. 라고 하는데 잘 와닿지가 않아서요. 함수형을 쓴다면 memo는 안 쓰고 useMemo만 사용해도 괜찮을까요?
- 미해결웹 게임을 만들며 배우는 React
open 값이 반영이 안됩니다 ㅠㅠ
강의에서 openCount라고 하신걸 저는 openedCell이라고 하여서 진행을 했는데요, 강의에서 말씀하신것 처럼 이미 열린칸에 대해서 또 카운트하는 것을 방지하기 위해 if (tableData[row][cell] >= CODE.OPENED) { console.log("이미 열린칸", openedCell) return; } 위와 같은 코드를 작성해서 걸러주는 작업을 진행했습니다. 그런데 위 코드를 넣으니깐 갑자기 reducer에 openedCell값이 계속 0인 채로 업데이트가 안되는것 같습니다... console.log로 찍어보니 직전까지 제대로 나오는 것 같고, 위 코드를 없애면 업데이트가 되지만 강의에서도 나온 문제점은 해결이 되지 않습니다. 저는 재귀가 아닌 queue에 넣어서 약간 알고리즘 문제에서 bfs를 하는 방식처럼 visited배열을 만들어 놓고 방문을 했는지 안했는지를 따져서 칸을 열었습니다. 값이 계속 0인 이유가 무엇일까요...? 도저히 감이 안잡혀서 질문드립니다 아래는 OPEN_CELL의 경우의 코드 전문입니다. case OPEN_CELL: { const tableData = [...state.tableData]; console.log(state.openedCell, "테스트") let visited = new Array(tableData.length); for (let i = 0; i < visited.length; i++) { visited[i] = new Array(tableData[i].length).fill(false); } let openedCell = state.openedCell; console.log("cellCount값 확인 : ", openedCell); const checkAround = (row, cell) => { if (row < 0 || row >= tableData.length || cell < 0 || cell >= tableData.length) { return; } if (visited[row][cell]) return; if (tableData[row][cell] >= CODE.OPENED) { console.log("이미 열린칸", openedCell) return; } // if (tableData[row][cell] === CODE.NORMAL) { // openedCell += 1; // } else { // return; // } let around = []; if (tableData[row - 1]) { around = around.concat( tableData[row - 1][cell - 1], tableData[row - 1][cell], tableData[row - 1][cell + 1] ) } around = around.concat( tableData[row][cell - 1], tableData[row][cell + 1] ) if (tableData[row + 1]) { around = around.concat( tableData[row + 1][cell - 1], tableData[row + 1][cell], tableData[row + 1][cell + 1] ) } const count = around.filter((v) => [CODE.MINE, CODE.FLAG_MINE, CODE.QUESTION_MINE].includes(v)).length; tableData[row][cell] = count; openedCell += 1; visited[row][cell] = true; return count; } let queue = [[action.row, action.cell]]; while (queue.length !== 0) { console.log("test") const [row, cell] = queue.shift(); const count = checkAround(row, cell) if (count === 0) { queue.push([row - 1, cell - 1], [row - 1, cell], [row - 1, cell + 1], [row, cell - 1] , [row, cell + 1], [row + 1, cell - 1], [row + 1, cell], [row + 1, cell + 1]) } } console.log("cellCount값 처리후 확인 : ", openedCell); console.log(state.data.row * state.data.cell - state.data.mine, state.openedCell + openedCell, state.data.row * state.data.cell - state.data.mine === state.openedCell + openedCell) let halted = false; let result = '' if (state.data.row * state.data.cell - state.data.mine === openedCell) { halted = true; result = '승리하셨습니다!' } // console.log("값 갱신 ", state.data.row * state.data.cell - state.data.mine, state.openedCell, cellCount, state.openedCell + cellCount) console.log("openedCell값", openedCell) return { ...state, tableData, halted, result, openedCell, } }
- 미해결웹 게임을 만들며 배우는 React
github으로 clone 해온 후 npx webpack 오류
어제 다른 컴퓨터로 React 공부를 하다가 node_modules를 제외하고 commit & push 한 다음에 오늘 다른 컴퓨터에서 git clone을 통해 코드를 그대로 불러오고 npm i 를 통해 node_modules를 다시 받아주었습니다. 그런데 어제는 npx webpack 명령어가 정상적으로 잘 작동했는데 오늘 다른 컴퓨터에서는 npx webpack 명령어를 입력하면 계속해서 에러가 발생합니다. 혹시 이유를 알 수 있을까요???
- 미해결웹 게임을 만들며 배우는 React
<LikeButton /> 태그
안녕하세요 제로초님! 오늘도 유익한 강의로 공부 잘 하고 있습니다. 제가 헷갈리는 것이 있는데, <LikeButton /> 태그는 <LikeButton></LikeButton> 과 같은 것 맞나요? 태그를 쓰는 해당 방식은 처음 봐서요! jsx 문법 중 하나인지 궁금합니다. 또한 저런 식으로 한다면 <div></div> 또한 <div / >로 대체 가능할까요?? 답변 꼭 부탁드립니다. 감사합니다.
- 미해결웹 게임을 만들며 배우는 React
유튜브로 기본강좌 9강 보던 중에 질문 드립니다.
9강에서 router 부분 강의를 듣던 중에 궁금한게 생겨서 질문 드립니다. Hooks로 router 사용시 react를 여러곳에서 import하는 문제 때문에 에러가 발생해서 클래스 컴포넌트를 불러오는 식으로 진행하셨는데 Hooks로 사용하는 방법은 아예 없는건지 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
webpack 실행은 되는데 app.js 파일이 안만들어지네요 ㅠ
계속 잘 따라오고 있었는데 이번 강의부터 webpack이 말썽입니다. ㅠ 터미널에서는 성공적으로 실행되었다고 뜨는데 app.js 파일이 생성이 안되네요 ㅠㅠ 이유를 알 수 있을까요?