무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
useMemo 질문이 있습니다!
안녕하세요! 처음 hooks를 선언시에 useMemo로 저장된 구문을 활용하여 콘솔이 계속 찍히는 걸 막는 구문을 선언했었는데요. const lottoNumbers = useMemo(() => getWinNumbers(), []); const [winNumbers, setWinNumbers] = useState(lottoNumbers); onClickRedo구문에서 저장된 memo로 호출하는 것도 가능한것 같은데, 이 경우 winNumbers가 계속 같은 숫자로 콘솔에 찍힙니다! 혹시 useMemo로 선언한 함수를 구분해서 사용해야 하는 것인가요? hooks 선언 구문에서만 사용해야 하는 것인가요? const onClickRedo = useCallback(() => { console.log(winNumbers); setWinNumbers(lottoNumbers); //이렇게 쓰면 안되나요? setWinBalls([]); setBonus(null); setRedo(false); timeouts.current = []; }, [winNumbers])
- 미해결웹 게임을 만들며 배우는 React
바닐라 자바스크립트로 리액트와 같이 동작하는 웹
안녕하세요 선생님, 좋은 강의 감사드립니다. 다름이 아니라 리액트를 사용하지 않고도 리액트와 같이 화면 전환이 부드러운 웹 사이트들을 보고 궁금증이 생겨 질문드립니다. 순수 자바스크립트만을 사용하는 경우, 현대적인 웹을 구현하기 위해서는 어떤 방식으로 구현하는 지 알려주실 수 있을까요? 리액트와 같이 상태를 기준으로 DOM을 렌더링 하는 형태로 구성하는지... 구현하는 방법이 각양각색이겠지만, 일반적으로 어떻게 구현하는지 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
바벨에 대한 질문입니다.
바벨을 개발용으로 사용하고 배포용으로 사용안한다는 말이 배포용 프로그램이 babel 말고 다른게 있다는 뜻인가요??
- 미해결웹 게임을 만들며 배우는 React
webpackbuild 시 에러가 나오네요..
npx webpack을 실행시키면 이런 오류가 뜨는데 혹시 무슨 에러인지 가르쳐 주실 수 있나요??
- 미해결웹 게임을 만들며 배우는 React
webpack 빌드 시 에러
안녕하세요 제로초님! 에러 해결을 하다가 계속 붙잡고 있게돼서 두 가지 에러 사항 질문합니다 ! 1. 첫 번째 에러 사항 ( 모듈 빌드 실패 ) => 이런 경우는 babel-core와 babel-loader가 서로 요구하는 버전이 안맞아서 생기는 에러라는 것을 알게됐습니다. 따라서, babel-loader가 8버전이면 babel-core는 7.x대, babel-loader가 7버전이면 babel-core가 6.x대로 변경하면 된다고 해서 아래와 같이 시도했는데, 에러가 사라지지 않습니다.. 2. Unknown option : .prests 이 부분은 babel-loader의 설정을 바꿔주면 될 것 같은데, 위처럼 시도를 했을 때 에러가 사라지지 않아 질문드립니다. 혹시나 해서 package.json파일과 webpack.config.js 파일 올립니다. package.json webpack.config.js
- 미해결웹 게임을 만들며 배우는 React
Module parse failed: Unexpected token (7:16)
안녕하세요 제로초님! 제가 이런 에러가 나서 구글링을 해보는데, 거듭되는 에러때문에 질문드립니다.. 어떤게 문제가 될까요..? [ client.jsx ] [ 에러메세지 ]
- 미해결웹 게임을 만들며 배우는 React
useState() 첫 번째 인자 관련
안녕하세요 선생님, 항상 좋은 강의 감사드립니다. 로또 추첨기를 복습하면서 함수형 컴포넌트 형태로 만들어보던 중에 아래와 같이 코드를 작성하게 됐습니다. const Lotto = () => { const [winNumbers, setWinNumbers] = useState(getWinNumbers); ... useState()의 첫 번째 인자로 getWinNumbers()가 아닌 함수 자체를 넣어줬는데 정상 동작하는 것을 확인했습니다. 또한, useMemo()를 적용한 것처럼 화면이 리렌더링 되더라도 getWinNumber 함수가 재호출되지 않았습니다. 리액트 공식문서를 찾아봤지만 함수를 넣어주는 형태는 찾지 못했는데, 혹시 이게 유효한 문법일까요?
- 미해결웹 게임을 만들며 배우는 React
제로초 선생님 강의가 혹시 무엇인가요?
react공부하면서 관심이 많은데 혼자 힘으로는 공부하기가 좀 버겁긴 합니다. 그래서 강의 듣고잇는데 개념들에 대한 상세한 설명을 이 강의 도 중 유로 강의에서 설명을 해주셨다고 하더라고요. 그 유로강의가 뭔지 좀 알 수 있을까요?
- 해결됨웹 게임을 만들며 배우는 React
작동은 잘되는데 콘솔창에 이런 오류가 뜨네요
injectGlobalHook.js:1648 Fetch API cannot load webpack://lotto/./LottoHooks.jsx?. URL scheme "webpack" is not supported. 테스트해봤는데 크롬에서는 저게 뜨는데 엣지에서는 안뜨네요 왜그런걸까요?
- 미해결웹 게임을 만들며 배우는 React
background 옵션이 어떻게 되는건가요?
background: `url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ${imgCoord} 0` s앞 두개는 background-image랑 background-position ? 같은데 마지막 0은 어떤건지 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
webpack-cli에러 질문!
선생님! 혼자 해결해보려고했는데 잘 안되서 질문드립니다!! 비슷한 에러상황에 다른수강생 질문 올린거 봤는데 거기에 선생님 답변을 봐도 해결을 할수없어서 글올립니다! 뭐가문제인지 도와주시면 감사하겠습니다! package.json { "name": "word-relay", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development" }, "author": "dongmin", "license": "MIT", "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.1", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.5", "babel-loader": "^8.1.0", "react-refresh": "^0.10.0", "webpack": "^5.3.2", "webpack-cli": "^4.1.0", "webpack-dev-server": "^4.0.0" } } 에러메시지 webpack.config.js const path = require('path'); const RefreshWebpackPlugin =require('@pmmmwh/react-refresh-webpack-plugin'); module.exports = { name: 'word-relay-dev', mode: 'development', // production devtool: 'eval', resolve: { extensions: ['.js','.jsx'] }, entry: { // app: ['./client.jsx', WordRelay.jsx] app: ['./client'], }, //엔트리 > 모듈적용 > 아웃풋 module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', options:{ presets:[ ['@babel/preset-env',{ targets: { browsers:['> 5% in JP'], }, debug: true, }], '@babel/preset-react'], plugins:[ '@babel/plugin-proposal-class-properties', 'react-refresh/babel', ], }, }], }, plugins: [ new RefreshWebpackPlugin() ], output: { path: path.join(__dirname, 'dist'), filename: 'app.js', publicPath: '/dist/', }, devServer: { publicPath: '/dist/', hot: true }, };
- 미해결웹 게임을 만들며 배우는 React
this.onSubmit 질문입니다~
화살표 함수의 개념에 아직 익숙치 않은 질문이라 미리 양해부탁드립니다. form onSubmit={this.onSubmit} 이부분에서 화살표함수를 쓰지 않고, this.onSubmit 함수 선언 구문에서 화살표함수를 사용하는 이유가 궁금합니다.
- 해결됨웹 게임을 만들며 배우는 React
성격급한사람이...
성격급한사람은 가위바위보 게임할때 결과 보여주는 대기시간에 마구 클릭해서 interval 가 계속쌓여 속도가 빨라지는데 setTimeout() 종료되기전까지 클릭 막을려면 어케해야되나요?
- 미해결웹 게임을 만들며 배우는 React
hooks에서 state가 변하게 되면 리렌더링되는 부분 질문 있습니다!
강의 정말 잘 듣고 있는 수강생입니다!!! 로또 추첨기 부분을 들으며 궁금한 부분이 있어 질문 드립니다! 다음 캡처 화면에서, winBalls의 이전 state 값을 바탕으로 하나씩 추가해 나갈 때마다 전체 코드(렌더링부터 함수 선언문까지)가 다시 실행되는 문제가 hooks에서 발생하는 것은 이해했습니다(아직 최적화를 진행하지 않은 시점입니다). 그래서 실제로 위의 getWinNumbers 함수가 불필요하게 실행이 되는 것을 콘솔을 통해 확인할 수 있었습니다. 문제는 여기서 궁금한게, state 선언문의 const [winNumbers, setWinNumbers] = useState(getWinNumbers()); 가 다시 실행이 되는 데에 있는데요, 기존 처음의 winNumbers 배열을 가지고서 setTimeout을 이용해 하나 하나 6개까지 push를 하고 있는 상황인데, push를 하면서 state 변경을 감지해 다시 const [winNumbers, setWinNumbers] = useState(getWinNumbers()); 가 실행되어 버리면 셔플된 배열을 다시 winNumbers가 갖게 되는 상황이 생기게 되는 것 아닌가요?! 예를 들어, 처음 winNumbers 배열이 [1, 2, 3, 4, 5, 6 ... ] 이렇게 되어 있었다 가정하면, winBalls state 변수에 1을 push한 후에 (for문의 i는 0) 변경을 감지하여 다시 const [winNumbers, setWinNumbers] = useState(getWinNumbers()); 가 실행되어 winNumbers가 [2, 1, 3, 4, 5, 6 ...] 이런 배열을 갖게 된다면 for문의 i=1에서 이전과 똑같은 1을 push하게 되어 중복이 발생하지 않을까요? 하지만 그런 문제는 일어나지 않고 있긴 합니다. 왜 그런지 이유를 잘 모르겠습니다 ㅠㅠ
- 해결됨웹 게임을 만들며 배우는 React
리액트 반복문
제로초님은 key 값을 뭘로 두시나요? index 는 삭제될떄 문제가 생기고 그냥 value 값은 중복이 발생할수 있어서 마땅히 생각이 안나네요 uuid v4 방식으로 해도 괜찮을까요?
- 미해결웹 게임을 만들며 배우는 React
이벤트
제로초님 혹시 'on이벤트이름={~}' 을 태그안에 속성으로 넣을때 react공식문서에 나온 이벤트이름만 쓸수있나요? 아니면 자기가 지은이름지어서 'on내가지은이벤트이름={~}' 이렇게도 넣을수 있나요?
- 미해결웹 게임을 만들며 배우는 React
아래 플러그인 부분 강의 업데이트 해주셔야 할것 같습니다.
아래 플러그인 부분 강의 그대로 따라하면 오류나서 구글링해서 찾아보니 상단에 const LoaderOptionPlugin = require('webpack/lib/LoaderOptionsPlugin'); 추가하고 하단에는 new LoaderOptionsPlugin : ({debug : true)}로 바꿔줘야 웹팩이 정상적으로 빌드되는것 같습니다.
- 해결됨웹 게임을 만들며 배우는 React
안녕하세요 npm으로 바벨 세팅 완료 이후 오류들에 대해 질문합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님! 수업 잘 듣고 있습니다. 섹션2.끝말잇기 수강중에 혼자 해결하기 힘든 오류들이 발생해 질문드립니다! 질문1. 바벨 세팅 이후에 package.json 파일에 해당 내용이 업데이트 되지 않습니다. 선생님 화면을 보면 바벨 세팅 이후에 package.json 파일의 dependencies와 devDependencies에 해당 내용이 자동으로 업데이트되던데 저는 안됩니다. 설치는 다 잘 된 거 같은데 왜 없을까요! 없어도 상관없나요? 아니면 터미널에 나온 정보를 토대로 제가 직접 입력하면 될까요? 바벨 세팅 완료 캡쳐 ① npm i -D @babel/core ② npm i @babel/preset-env ③ npm i @babel/preset-react ④ npm i babel-loader 바벨 세팅 후 package.json 질문2. 바벨 세팅 이후 npx webpack 을 하면 아래 캡쳐와 같은 오류가 뜹니다. 제가 해석한 오류가 맞는지 맞거나 틀리다면 어떻게 해결하면 되는지 알려주세요! 오류 내용을 아래와 같이 이해했습니다. ① client.jsx 파일에서 module 빌드에 실패했습니다. client.jsx 파일 내용도 캡쳐로 올립니다. ② module @babel/types을 찾을 수 없습니다. 이 부분은 module을 입력했던 webpack.config.js 을 보면 될까 싶어 캡쳐 올립니다 ③ Babel 6.x ('babel-core')을 쓰고 싶으면 babel-loader@7 설치가 필요합니다. babel/core는 @7.15.5고 babel-loader@8로 설치된거 같은데 이 문구는 신경쓰지 않아도 될까요? 각 오류들을 어떻게 해결하면 될까요... 애초에 바벨이 제대로 설치되지 않아서 뜨는걸까요? 도와주세요!
- 미해결웹 게임을 만들며 배우는 React
질문드립니다!
숫자야구 부분 진행하고있는데, 인풋박스에 글자를 입력할때마다 콘솔에서 Fetch API cannot load webpack://numberbaseball/./NumberBaseball.jsx?. URL scheme "webpack" is not supported 라고 에러가 발생합니다. 그리고 React dev tools 설치하였는데 React 라는 탭 대신 Components 와 Profiler 가 생겼습니다.
- 미해결웹 게임을 만들며 배우는 React
SocketClient is not a constructor 오류
아랫분과 동일하게 Cannot get / 메세지가 계속 떠서 제로초님 공지글에 있는 4버전 깃허브 소스로 다 바꿨는데 SocketClient is not a constructor 에러 뜨면서 화면 로딩이 안됩니다. "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.1", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.5", "babel-loader": "^8.1.0", "react-refresh": "^0.10.0", "webpack": "^5.3.2", "webpack-cli": "^4.1.0", "webpack-dev-server": "^4.0.0" } const path = require("path"); const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); 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"], // browserslist }, debug: true, }, ], "@babel/preset-react", ], plugins: ["react-refresh/babel"], }, }, ], }, plugins: [new RefreshWebpackPlugin()], output: { path: path.join(__dirname, "dist"), filename: "app.js", publicPath: "/dist", }, // 출력 devServer: { devMiddleware: { publicPath: "/dist" }, static: { directory: path.resolve(__dirname) }, hot: true, }, };