무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
React 랜더링이 되지 않습니다.
안녕하세요. 제로초님, 강의 도움이 많이 되고 있습니다.다름이 아니라,webpack-dev-server를 실행을 했을 때, app.js파일은 잘 가져오는데, 화면이 랜더링 되지 않습니다. (아래 사진 참고)크롬 확장 프로그램(React Developer Tools)도 활성화되지 않는 걸 보아 React 코드가 랜더링 되지 않는 거 같습니다.이전 강의처럼 dev server를 쓰지 않고, 웹팩 빌드 후 index.html 에 접근하면 정상적으로 랜더링이 됩니다.제 추측으로는 dev-server로 웹펙 빌드를 할 때의 설정 문제일 거 같은데, 추적이 쉽지 않은데 어떤 부분을 확인하면 좋을지 살펴봐주실 수 있으실까요? ( _ _ )
- 미해결웹 게임을 만들며 배우는 React
비동기로 동작하는 setState에 대해서
안녕하세요 제로초님setState 질문이 있는데요아래 코드에서 1번 코드의 경우 setState함수는 비동기라서 해당 이벤트 함수가 실행된 후 setState함수를 모아서 일괄 처리하기 때문에 +3이 아닌 +1로 렌더링된다 라고 알고 있는데요2번 코드에서는 왜 +3으로 렌더링되는지 이해가 되지 않아서요. setNum((prev) => prev + 1) 처럼 이전 state 값을 받아오는 형태도 아닌데 어떤 원리로 1번 코드와 2번 코드가 서로 다르게 동작하는 것인지 궁금합니다 import React, {useState} from 'react'; export function App(props) { let [num, setNum] = useState(0); const increase1 = () => { // 1번 코드 setNum(num + 1); setNum(num + 1); setNum(num + 1); // 2번 코드 setNum(num = num + 1); setNum(num = num + 1); setNum(num = num + 1); console.log(`${num}번째 1+ 이벤트 발생 ---> num: ${num}`); } console.log(`렌더링 ---> num : ${num}`); return ( <div className='App'> <button type="button" onClick={increase1}>+1</button> <p>{num}</p> </div> ); }
- 미해결웹 게임을 만들며 배우는 React
npm run dev 할 때 에러발생
에러메세지: [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.module.rules[0] has an unknown property 'mode'. These properties are valid: object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? } -> A rule description with conditions and effects for modules. webpack.config.js 파일 코드const path = require("path"); //path: 노드에서 경로 조작하는 것을 쉽게 해준다. const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name: "wordrelay", mode: "development", // 실서비스: production devtool: "eval", // 실서비스: hidden-source-map resolve: { extensions: [".js", ".jsx"], //이렇게 적으면 웹펙이 알아서 js나 jsx가 있는지 확인을 하고, react-react-to-dom-word-relay 이거 찾아서 app.js로 만들어준다. }, // 입력 entry: { app: ["./client"], }, module: { rules: [ { test: /\.jsx?$/, //정규표현식: JS랑 JSX 파일에 룰을 적용하겠다. loader: "babel-loader", mode: "development", options: { //babel-loader의 옵션 presets: [ [ "@babel/preset-env", { targets: { browsers: ["> 1% in KR"], // browserslist }, debug: true, }, ], "@babel/preset-react", ], plugins: [ "@babel/plugin-proposal-class-properties", "react-refresh/babel", ], }, }, ], }, plugins: [new RefreshWebpackPlugin()], //출력 output: { path: path.join(__dirname, "dist"), //컴퓨터 마다 파일 경로가 다 다른데 현재폴더안에 자동으로 dist폴더를 만들어준다. filename: "app.js", publicPath: "/dist/", }, devServer: { publicPath: '/dist/', hot: true, devMiddleware: { publicPath: "/dist" }, static: { directory: path.resolve(__dirname) }, }, //터미널에 webpack쓰면 두 파일을 합쳐준다. }; package.json 코드 { "name": "lecture", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack --mode development", "dev": "webpack serve --env development", "assets": "webpack --config webpack.config.js --mode development" }, "author": "tk", "license": "MIT", "devDependencies": { "@babel/core": "^7.24.0", "@babel/preset-env": "^7.24.0", "@babel/node": "^7.23.9", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "react-refresh": "^0.14.0", "webpack": "^5.90.3", "webpack-cli": "^7.23.9", "webpack-dev-server": "^5.0.3" }, "dependencies": { "babel-loader": "^9.1.3", "react": "^18.2.0", "react-dom": "^18.2.0" } } 호환문제인 것같은데 어떤 부분이 호환문제가 생기는건지 잘 모르겠습니다.
- 미해결웹 게임을 만들며 배우는 React
memo, PureComponenet, shouldComponentUpdate 관련 질문
안녕하세요 늘 강의 잘 보고 있습니다! 강의를 보던 중 궁금한 점이 생겨 질문 남깁니다ㅠㅠ 위 코드에서 Try 컴포넌트는 PureComponenet로 작성해서 props가 바뀌지 않으면 업데이트되지 않습니다.하지만 ul태그를 제거하면 업데이트 되지 않던 Try컴포넌트가 계속 업데이트가 됩니다. map을 태그로 감싸지 않으면 PureComponent, memo, shouldComponentUpdate 다 작동을 안하더라구요.. 이유가 뭔지 모르겠습니다 ㅠㅠ
- 미해결웹 게임을 만들며 배우는 React
devMiddleware의 필요성
안녕하세요! 좋은 강의 감사합니다:)궁금한 점이 있어서 질문 남깁니다.devMiddleware이 웹팩에서 빌드한 파일에 대한 경로라고 이해했습니다. 그런데 output.publicPath에 빌드할 파일 위치 적어주고 index.html에서 빌드한 파일을 불러오는 데 굳이 devMiddleware를 설정해주는 이유가 뭔가요..?devMiddleware를 제거해도 정상적으로 빌드되고 결과물도 똑같은 것 같아요..ㅠ
- 미해결웹 게임을 만들며 배우는 React
리액트에서 화살표 함수를 사용해야하는 이유
안녕하세요! 항상 좋은 강의 감사합니다.궁금한 점이 있어서 질문 남깁니다. 위 소스에서 onChange, onSubmitForm를 화살표함수를 사용하지 않았을 때 작동하지 않는 이유가 궁금합니다.. ㅠㅠ 일반함수의 this는 WordRelay 객체가 아니라 전역객체를 가리키고 화살표 함수는 WordRelay 객체를 가리키기 때문인건 알겠는데 왜 일반함수의 this가 WordRelay 객체가 아니라 전역객체를 가리키는 지 이해가 되지 않습니다.. 위 소스의 Test함수에서 state에 접근할 수 있는 걸로 보아 Dom이 그려질 때는 잘 작동하는 데 그 이후에는 뭐가 달라서 this 가 전역객체를 가리키게 되는 지 궁금합니다 ㅠ
- 미해결웹 게임을 만들며 배우는 React
path.join관련질문
안녕하세요! webpack 설정까지 알려주시는 부분이 너무 마음에 들어서 열심히 강의 수강 중입니다. 강의 보는 중에 궁금한 점이 생겨서 질문 드립니다. 1. 요부분에서 entry에서는 상대경로로, output에서는 절대경로로 설정하는 이유가 뭔가요??그냥 webpack은 entry는 상대경로로, output은 절대경로로 설정하게 만들어졌으니까 그러는 건가요? path.join은 절대경로를 사용할 때만 사용하는 거 맞죠?강의 잘 보고 있습니다. 감사합니다 :)
- 미해결웹 게임을 만들며 배우는 React
2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러
위와 같은 에러가 나오는데어디 부분을 뒤져야 할지 몰라서 질문드려요 [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
- 해결됨웹 게임을 만들며 배우는 React
next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
import React, { useState, useEffect } from "react"; const CountdownTimer = () => { const [countdown, setCountdown] = useState(10); // 초기 카운트다운 값 useEffect(() => { let intervalId; console.log("다시 실행"); // 카운트다운이 실행 중일 때만 setInterval을 설정 intervalId = setInterval(() => { setCountdown((prevCountdown) => prevCountdown - 1); }, 1000); // 컴포넌트가 언마운트될 때 clearInterval 호출 return () => { console.log("종료"); clearInterval(intervalId); }; }, []); // isRunning 상태가 변경될 때마다 useEffect가 호출됨 return ( <div> <p>Countdown: {countdown}</p> </div> ); }; export default CountdownTimer;이런 예제를 돌리고 있는데 useEffect에 인자를 설정하지 않아도 제대로 돌아가고 있습니다 제가 next.js를 이용해서 실습중인데 이게 nextjs여서 돌아가는건가요 아니면 react가 업데이트를 한 것인가요?
- 미해결웹 게임을 만들며 배우는 React
useInterval.js 커스텀 훅에서, 왜 첫번째 useEffect를 계속 반복해야할까요?
안녕하세요 제로초님. 리액트 강의 언제나 잘 듣고 있습니다. 양질의 강의 너무 감사합니다. 제로토님의 '커스텀 훅으로 우아하게 인터벌하기' 강의를 듣고 난 후 개인적으로 코드를 분석해보고 있었는데, 공식 문서도 찾아보고 개인적으로 테스트를 굴려봐도 해결되지 않는 의문이 있어 찾아왔습니다. 먼저, 함수 컴포넌트 파일에서 아래 <1번> 처럼 구성하였기 때문에, 변수 changeHand에는 모양만 같을 뿐 저장공간이 다른 새로운 함수가 매 랜더링 시 마다 만들어진 후 useInterval에 매개변수로 넘어가겠구나.. 하고 이해했습니다. <1번> const changeHand = () => { console.log(imgCoord); if (imgCoord===rspCoords.r) { setImgCoord(rspCoords.s); } else if (imgCoord === rspCoords.s) { setImgCoord(rspCoords.p); } else if (imgCoord === rspCoords.p) { setImgCoord(rspCoords.r); } } useInterval(changeHand, isRunning ? 100 : null); 그리고 useInterval 함수와 아래 <2번> 코드가 컴포넌트가 새로 랜더링 될 때 마다 실행 될 것이라고도 이해했습니다. <2번> useEffect(()=>{ savedCallback.current = callback; }); 그러니 즉, 아래 두 코드를 해석해보자면 매 랜더링 시 마다 새로운 changeHand 함수를 만들어, useInterval을 호출해 매개변수로 넘겨준 다음 useRef 훅으로 saveCallback.current에 저장해주고 있다.. 라고 이해했습니다. (잘 이해한게... 맞을까요..?) 그리고 이렇게 저장된 changeHand 함수는 <3번> 코드의 setInterval(tick, delay)에 의해, delay초 마다 한번씩 실행되게 된다는 내용 까지 이해했습니다. <3번> useEffect(()=>{ function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => { clearInterval(id);} } }, [delay]); 일단 저는 '왜 첫번째 useEffect(2번 코드)를 계속 반복해야할까요?' 라는 질문의 답에 대해서, 매 랜더링 시 마다 컴포넌트와 컴포넌트 함수들은 새로이 만들어지기 때문에, 마찬가지로 savedCallback에도 이전 함수가 아니라 새로 만들어진 함수를 저장해야하기 때문이겠구나.. 라고 생각했었습니다. 하지만 이 가정이 맞다면, 컴포넌트가 재실행되며 이전 컴포넌트 객체였던 것은 생명주기 순서에 따라 새로 랜더링 되기 전에 삭제될 테니, 이전 컴포넌트 객체와 함수들은 저장공간에 남아있지 말아야 할 것입니다. 그래서 별도로 배열 변수를 만들어, 랜더링 시 마다 만들어지는 changeHand 함수를 순서대로 저장한 후 한 20번 째 랜더링 쯤에서 두 번째로 만들어진 changeHand 함수를 콘솔창에 찍어봤었습니다. 저는 이 과정을 통해 undefind 에러가 발생하거나 null값이 출력될 줄 알았는데(더이상 메모리에 없는 함수 객체일테니..) 잘만 실행되더군요 ㅠㅠㅠ 제가 어떤 부분을 이해하지 못하고 있는 걸까요..? (아예 통째로 잘못 이해하고 있는 것도 같고... ㅠㅠ) 감사합니다.
- 미해결웹 게임을 만들며 배우는 React
2-9. 웹팩 데브 서버와 핫 리로딩 6:16부분
리로딩과 핫리로딩의 차이를 설명하신 부분에서 핫리로딩은 기존 데이터를 유지한다고 하셨습니다. 그래서 저는 핫리로딩은 새로고침 없이 변경사항이 저장된다고 생각했는데 react-refresh 플러그인을 넣으나 안 넣으나 새로고침 되는건 같고 끝말잇기 프로젝트 내에서 데이터도 모두 초기화가 되었습니다. 그래서 현재 강의 내용으로는 핫리로딩과 리로딩의 차이를 명확히 알 수 없는데 부가적인 설명과 예시 부탁드립니다!
- 미해결웹 게임을 만들며 배우는 React
웹팩 실행시
이런오류가 납니다,,ㅜ 어떤걸 깔아야 할까요
- 미해결웹 게임을 만들며 배우는 React
웹팩 실행시 오류..
어떤 플러그인을 또 설치해야되는건가요?
- 미해결웹 게임을 만들며 배우는 React
구구단 페이지 무한로딩에관하여
구구단 부터 똑같이 따라하는 중인데 페이지가 나오는데 계속 무한으로 새로고침해서 나와요 정답을 쓰기도 전에요.. 왜 이런걸까요?
- 미해결웹 게임을 만들며 배우는 React
콘솔창에 wds 무한루프가 발생중입니다.
npm run dev를 실행하고 브라우저의 콘솔창을 보면 wds 무한루프가 발생하고 있습니다. 구글링을 해도 무슨문제인지 알 수 가 없어서 질문남깁니다! 혹시 뭐가 문제인지 알수있을까요?
- 미해결웹 게임을 만들며 배우는 React
useRef와 useEffect를 사용해서 어떤 props가 달라지는지 확인 부분 질문입니다.
const ref = useRef([]); useEffect(() => { console.log(rowIndex === ref.current[0], cellIndex === ref.current[1], dispatch === ref.current[2], cellData === ref.current[3]); console.log(cellData, ref.current[3]); ref.current = [rowIndex, cellIndex, dispatch, cellData]; }, [rowIndex, cellIndex, dispatch, cellData]);강좌에서 ref.current = [rowIndex, cellIndex, dispatch, cellData]; 부분을 console.log 아래에 두신 이유가 궁금합니다! 또한 useRef를 사용하는 이유가 화면이 리렌더링 되어도 ref에 있는 데이터들은 초기화가 되지 않기 때문이 맞을까요?
- 해결됨웹 게임을 만들며 배우는 React
useRef는 항상 최신 객체를 참조한다?
useRef 역할 중에 "값이 바뀌기는 하지만 화면에 영향주고싶지않을때 사용"이 있잖아요! 이 말이 useRef는 항상 최신 객체를 참조한다는 의미일까요? useRef가 어떻게 항상 최신 객체를 참조할까요?
- 미해결웹 게임을 만들며 배우는 React
가독성을 위한 JSX(XML임!) 수업 질문
안녕하세요 제로초님 , 영상 잘 보고있습니다! 이번 강좌를 보면서 느낀점인데 혹시 XML에 대한 이해도를 갖고 있어야 할까요?HTML만 한 사람의 관점으로 영상을 보았을 때 많이 헷갈리네요아니면 지금은 그냥 이런게 있다라는 느낌일까요??
- 미해결웹 게임을 만들며 배우는 React
npx webpack 실행 시 최대 용량이 500kb 제한으로 출력됩니다.
안녕하세요! 제가 강의를 보며 npx webpack 명령어를 실행하고 아래와 같은 에러를 만났습니다.아래는 제 webpack.config.js 파일입니다.npx webpack 명령어를 실행하면 /dist/app.js 파일이 생성되기는 하지만 깔끔하지 않은 모습입니다. 우선 17강까지 듣고 잠시 멈춰둔 상태입니다. 검색해도 원인을 좀처럼 찾기 힘들어서 문의글 남겨봅니다. 감사합니다!
- 해결됨웹 게임을 만들며 배우는 React
리액트 class 컴포넌트 중 this 질문입니다.
class LikeButton extends React.Component { constructor(props) { super(props); this.state = {liked: false}; this.onClickButton = this.onClickButton.bind(this) // 이걸 안써주면 동작 안함 } onClickButton() { this.setState({liked: true}); } render() { if (this.state.liked) { return 'You liked this.'; } return ( <button onClick={this.onClickButton}> Like </button> ); } }이 코드에서 this가 button 태그를 가르키기 때문에 bind함수로 LikeButton 클래스 인스턴스로 바인딩 해주어야 화살표 함수가 아닌 일반 function 키워드 함수로 메서드를 정의했을때 동작하는게 맞는걸까요? 화살표 함수라면 button 태그를 가르키지 않고 바깥 this를 그대로 가져오기 때문에 LikeButton 클래스 인스턴스를 가져오는 것이 맞을까요?