무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨웹 게임을 만들며 배우는 React
핫리로딩 작동안함문제.
devServer의 새로고침클릭시 내용변경하는건 제대로 작동되는데. 실시간으로 변경사항이 적용되는 핫리로딩 기능이 적용이 안됩니다. webpack.config.js 에서 @pmmmwh 와 plugins에서 적어둔 new Refres...() 을 지우면 크롬에서 저에러가 안나는걸보니.. 저에러때문에 핫리로딩기능이 사용이 안되는데 뭐가문제일까요?? 혹시몰라서 devtool : eval을 devtool : source-map 으로 바꾸어보았습니다만 바꾸고나서 저에러는 뜨지않으나 핫리로딩기능은 여전히 안됩니다. port번호는 기본 8080에서 퍼미션에러가 나와서 8081로 변경해주었습니다.
- 미해결웹 게임을 만들며 배우는 React
웹팩과 바벨 설치 후 브라우저에 Hello webpack 띄우려고 할때 오류가 나요 ㅠㅠ
dist에 app.js는 생성되었고 브라우저에 Hello webpack 띄우려고 node app.js와 node index.html 둘다 쳐봤는데 안되네요 ㅠㅠ 도움 부탁드립니다..
- 해결됨웹 게임을 만들며 배우는 React
추가질문입니다..
..... 에러메세지가 길어서 전부담지는 못했습니다. 노드버전은 답변주신대로 처음에 nodejs 홈페이지 14.16.1 깔았었는데도 에러가발생하여 lts버전은 15.14.0 버전설치한상태입니다. npm도 업데이트해서 7.9.0버전이구요. webpack.config.js 의 module 쪽에 임의로 exclude:/node_modules/ 를 추가했는데. 이게없으면 추가로 에러가 더나오는 상황입니다. 제가보기에는 중간에 오타도 없는거같은데. 어떻게해결해야할까요. nodejs 원래버전삭제하고 14버전깔았을때 프로젝트내의 node_modules 폴더, package-lock.json package.json 파일 전부 직접삭제후 npm init 부터 babel 재설치도 다시해보았습니다.
- 미해결웹 게임을 만들며 배우는 React
빌드시 에러발생.
webpack 빌드시 에러가발생하는데 어떻게해결해야할지 모르겠습니다. 처음 빌드했을때 pollyfill 에러를 시작으로 105개 에러가 발생해서.. 저에러메세지에 뜨는거 순서대로 (url가 맨위에있던 에러였는데 그거보고 설치했는데도 순서대로 에러나서 나머지는 다 false로 적었습니다. 이후에도 . 에러를 시작으로 에러가 발생하는데 어떻게 해결해야할까요.. npm ls babel-loader 시 8.2.2 버전 npm ls @babel/core 시 7.13.15 버전 node -v시 버전 12.18.3 npm -v시 버전 6.14.6 입니다. 노드 버전문제인지..
- 미해결웹 게임을 만들며 배우는 React
숙제 정답부분 간단한질문입니다.
숙제부분 prevState 사용하기전 result: '정답' + this.state.value; 이런식으로 한다고했는데. 리액트가 데이터가변경되면 자동적으로 싱크로해준다고 하셨던거같은데. input에 숫자를입력할때 onChange 함수로 value값이 변경되니까. result:this.state.value 의 value값도 계속변경되야하는거아닌가요? 제가 너무 복잡하게생각했는지..이리 생각해서 onsubmit 함수에 const 변수만들어서 따로담아서 했네요
- 미해결웹 게임을 만들며 배우는 React
UseEffect 관련 조금은 복잡한 질문입니다. (수정)
제로초님 안녕하세요 덕분에 리액트에 쉽고 재밌게 입문하게 되어서 지금은 혼자 독학중인 학생입니다. 다름이 아니고 리액트 훅스를 적용한 프로젝트를 하는 도중 UseEffect의 동작이 이해되지 않아서 이렇게 질문 드립니다. axios로 받아오는건 그냥 길이 7짜리 배열입니다. 우선 useEffect가 렌더링 직전에 호출이 되니 5번까지는 이해가 갑니다. 그리고 useEffect가 실행되자 TodoProvider 함수가 다시 렌더링되는데 이는 axios로 데이터를 받아오면서 state의 값이 초기화되어 그런 것으로 이해했습니다. 그리고 axios로 데이터를 받아오는데에 시간이 걸리니 5 다음엔 6, 7, 8, 9가 빠르게 출력되는 것으로 이해했습니다. 근데 이럴경우 문제는 axios로 데이터를 받아오기도 전에 7, 8에서는 받아온 데이터를 출력하는데 심지어 그 이후에 출력되는 10과 11에서는 아직 받아오지 못한 것으로 나와서 너무 이해가 가지 않아서 질문 드립니다.
- 미해결웹 게임을 만들며 배우는 React
안녕하세요! 질문드립니다.
자식 컴포넌트가 모두 PureComponent or memo를 사용할 경우 부모 컴포넌트도 사용할 수 있는 것으로 이해하였는데요, 자식 컴포넌트가 2레벨 이상(부모,자식,손자,..) 있을 경우 중간에 있는 하나의 자식 컴포넌트만 Component+shod...로 변경하거나 memo를 제거하는 경우 연결되어 있는 모든 컴포넌트도 다 수정해주어야 하는 것일까요?? 강의는 항상 잘보고있습니다 감사합니다 ㅎㅎ
- 미해결웹 게임을 만들며 배우는 React
렌더링과 mount/unmount
const RSP = () => { useEffect(() => { console.log('다시 실행'); interval.current = setInterval(changeHand, 100); return () => { console.log('종료'); clearInterval(interval.current); } }, [imgCoord]); return ( ... ); } useEffect가 받는 effect 함수가 리턴하는 함수가 componentWillUnmount 역할을 하는 함수라고 하셨는데요. 그리고 setInterval 안에서 changeHand에 의해서 imgCoord가 바뀌면서 useEffect가 받는 effect 함수가 계속 실행되는 것을 보게 되는데, 그럼 여기서 렌더링 과정이라는 게 컴포넌트를 unmount 했다가 새로 mount하는 과정이라고 봐도 괜찮은 것인가요? state가 바뀔 때 컴포넌트 함수 전체가 다시 실행된다는 얘기도 하셨던 것 같은데, 그럼 이 과정도 unmount하고 다시 mount하는 과정인 것인가요? 렌더링과 mount/unmount 과정의 관계? 차이?가 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
useRef 관련 질문
함수형 컴포넌트에서 화면의 렌더링에 영향을 주지 않는 값을 저장하기 위해서 useRef를 쓴다는 점은 이해했는데요. 그럼 혹시 그냥 컴포넌트 안에 `let timeOut` 이런 식으로 선언하는 것과 어떤 차이가 있나요? useRef를 통해서 리턴되는 객체의 경우 const로 선언하고 .current에 저장할 수 있어서 관리상 이점이 있는 것 같기는 한데 이런 이유 때문에 useRef를 쓰는 것인가요? 아니면 다른 이유가 있을까요?
- 미해결웹 게임을 만들며 배우는 React
빌드후 실행시 에러
Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./WordRelay.jsx 위와 같은 에러가 나는데 어떻게 해결해야하나요?
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 제로초님
안녕하세요 제로초님 강의를 보다가 문득 의문이 들어서 질문을 드리려고 합니다. 리액트를 사용할때 보통 html에서 사용을 안하고 js파일에다가 React를 import받아서 사용하는 것으로 알고 있는데 html에서 리액트를 구현하시는 이유를 여쭈어보고 싶습니다. 그리고 위에서 스크립트에서 아래 부분을 가져오시는거 같은데 따라치면 오류가 나서요.. 어디서 가져오시는건지 여쭈어봐도 될까요? <script crossorigin src="https://unpkg.com/react@16/umd/react.developement.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.developement.js"></script>
- 해결됨웹 게임을 만들며 배우는 React
setWinBalls 질문
setWinBalls((prevBals) => [...prevBals, winNumbers[i]]); 훅스에서 set 사용할때 처음 넣는 변수는 무조건 이전에 저장된 값으로 인식을 하는 건가요? 글자가 틀려도 잘 되네요.
- 미해결웹 게임을 만들며 배우는 React
input ref={함수연결} / input ref={this.input}
안녕하세요~! input 의 ref에 onRefInput 함수를 연결해서 this.input 에 input을 대입해주어야 제대로 동작하는 이유가 궁굼합니다 왜 아래처럼 바로 input을 연결해주면 안되는건가요? <input ref={this.input} /> <-- 에러 엄청남 ..
- 미해결웹 게임을 만들며 배우는 React
opendCount의 state업데이트가 안됩니다ㅠㅠ
안녕하세요 질문이있습니다! useReducer에서 opendCount의 state업데이트가 안됩니다ㅠㅠ return할때 tableData는 재귀함수로 인접한 칸들 열게한 데이터도 잘 잘 업데이트가 되는데 opendCount만 업데이트가 안되요ㅠㅠ console찍으면 return직전까지만 해도 opendCount개수가 잘 찍히는데 return이 안되네요 혹시 몰라서 지뢰찾기 깃헙코드 올립니다~ 바쁘실텐데 감사합니다 https://github.com/summer-kim/React_Study/tree/main/components/findingMine
- 해결됨웹 게임을 만들며 배우는 React
버튼 클릭 -> 새로 생성된 인풋태그에 바로 focus 는 어떤 걸 공부해야하나요?
인풋태그가 아직 화면에 없고 [추가하기] 버튼을 누르면 state가 바뀌면서 밑에 새로운 컴포넌트로 input태그가 만들어지게 해봤습니다. 생성되자마자 바로 거기에 focus 해보고싶은데 잘안되네요.. ref 상속 같은 걸 봐야하나요?
- 미해결웹 게임을 만들며 배우는 React
미래에서온 영상 보고도 에러납니다. 이건 버전문제인건지 제로초님 봐주세요.
제 코드가 계속 에러가 나서 제로초님 소스코드를 가지고 npm i 하고 실행해보니 똑같은 에러가 나더라구요. 이건 코드 잘못이 아니라 버전 문제인것 같은데 이것때문에 강의 진행이 안됩니다. 원인을 모르겠어요.. 에러코드입니다. ---- //package.json ``` { "name": "number-baseball", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development" }, "author": "ZeroCho", "license": "ISC", "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" }, "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-env": "^7.11.5", "@babel/preset-react": "^7.10.4", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "babel-loader": "^8.1.0", "react-refresh": "^0.9.0", "webpack": "^5.3.2", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0" } } // webpack.config.json const path = require('path'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); module.exports = { name: 'number-baseball-dev', mode: 'development', devtool: 'inline-source-map', resolve: { extensions: ['.js', '.jsx'], }, entry: { app: './client', }, module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: { browsers: ['last 2 chrome versions'] }, debug: true, }], '@babel/preset-react', ], plugins: ['react-refresh/babel'], }, exclude: path.join(__dirname, 'node_modules'), } ], }, plugins: [ new ReactRefreshWebpackPlugin(), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist', }, devServer: { publicPath: '/dist', hot: true } };
- 미해결웹 게임을 만들며 배우는 React
export default, module.exports 에러
좋은 강의 감사합니다! 저번에 export default와 module.exports 가 차이가 있다고 하셨는데 지금 보면 export default는 에러가 나고 module.exports는 에러가 나지 않고 있습니다. 설정은 다 똑같이 따라한것 같은데 버전이 달라져서 이제는 안되는 건가요?
- 미해결웹 게임을 만들며 배우는 React
require, import를 왜 한가지로 통일해서 써야하나요?
client.jsx에서는 require를 썼고 야구게임.jsx에서는 import를 썼는데 element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: "object". 에러를 받았습니다. 구글링 해보니 한가지로 통일해야한다고 했는데 왜인가욥?
- 미해결웹 게임을 만들며 배우는 React
이 수업을 원활하게 이해하려면
이 수업을 원활하게 이해하려면 자바 스크립트 문법은 어디까지 알고 있어야 하나요? 이벤트 정도까지만 알고 있어도 될까요?
- 미해결웹 게임을 만들며 배우는 React
map 함수를 이용하여 나타내는 태그
안녕하세요 강의 정말 잘 보고 있습니다. 강의 도중에 많이 사용하시는 map 함수에 대해 질문이 있어 글을 작성하게 되었습니다. 로또 만들기에서 {renderNum.map((v) => <div key={v}>{v}</div>);} 이런식으로 사용하셨는데 이 구문을 그냥 바로 return에 넣으면 화면에 나타나지 않고 return 구문전에 변수에 담은 다음에 return 문에 변수로 나타내주어야 화면에 잘 나오는 현상이 있는데 리액트 버전이 올라가면서 바뀐 부분인 건가요? 아니면 제가 혹시 실수한 것이 있는건가요?