2-9. 웹팩 데브 서버와 핫 리로딩

강의명 : 웹 게임을 만들며 배우는 React

수강 기한 : 무제한

진도율 : 0강/64강 (0%) | 시간 : 0분/758분

나가기

미수강

이전수업

다음수업

웹 게임을 만들며 배우는 React

수강 기한 : 무제한

진도율 : 0강/64강 (0%) | 시간 : 0분/758분

구구단

1-1. 리액트를 왜 쓰는가

10분

1-2. 첫 리액트 컴포넌트

10분

1-3. HTML 속성과 상태(state)

9분

1-4. JSX와 바벨(babel)

11분

1-5. 첫 번째 Q&A

7분

1-6. 구구단 리액트로 만들기

11분

1-7. 클래스 메서드

10분

1-8. Fragment와 기타 팁들

9분

1-9. 함수형 setState

6분

1-10. ref

7분

끝말잇기

2-1. React Hooks 사용하기

13분

2-2. Class와 Hooks 비교하기

12분

2-3. 웹팩 설치하기

15분

2-4. 모듈 시스템과 웹팩 설정

13분

2-5. 웹팩으로 빌드하기

14분

2-6. 구구단 웹팩으로 빌드하기

12분

2-7. @babel/preset-env와 plugins

15분

2-8. 끝말잇기 Class 만들기

12분

2-9. 웹팩 데브 서버와 핫 리로딩

9분

2-10. 끝말잇기 Hooks로 전환하기

11분

숫자야구

3-1. import와 require 비교

9분

3-2. 리액트 반복문(map)

11분

3-3. 리액트 반복문(key)

10분

3-4. 컴포넌트 분리와 props

12분

3-5. 주석과 메서드 바인딩

9분

3-6. 숫자야구 만들기

17분

3-7. Q&A

6분

3-8. 숫자야구 Hooks로 전환하기

8분

3-9. React Devtools

8분

3-10. shouldComponentUpdate

8분

3-11. PureComponent와 React.memo

13분

3-12. React.createRef

7분

3-13. props와 state 연결하기

9분

반응속도체크

4-1. React 조건문

13분

4-2. setTimeout 넣어 반응속도체크

13분

4-3. 성능 체크와 Q&A

11분

4-4. 반응속도체크 Hooks로 전환하기

11분

4-5. return 내부에 for과 if 쓰기

5분

가위바위보

5-1. 리액트 라이프사이클 소개

14분

5-2. setInterval과 라이프사이클 연동하기

10분

5-3. 가위바위보 게임 만들기

9분

5-4. 고차 함수와 Q&A

7분

5-5. Hooks와 useEffect

13분

5-6. 클래스와 Hooks 라이프사이클 비교

8분

로또 추첨기

6-1. 로또 추첨기 컴포넌트

14분

6-2. setTimeout 여러 번 사용하기

11분

6-3. componentDidUpdate

13분

6-4. useEffect로 업데이트 감지하기

14분

6-5. useMemo와 useCallback

15분

6-6. Hooks에 대한 자잘한 팁들

13분

틱택토

7-1. 틱택토와 useRedcuer 소개

12분

7-2. reducer, action. dispatch의 관계

11분

7-3. action 만들어 dispatch 하기

13분

7-4. 틱택토 구현하기

18분

7-5. 테이블 최적화하기

19분

지뢰찾기

8-1. Context API 소개와 지뢰찾기

10분

8-2. createContext와 Provider

11분

8-3. useContext 사용해 지뢰 칸 렌더링

15분

8-4. 왼쪽 오른쪽 클릭 로직 작성하기

20분

8-5. 지뢰 개수 표시하기

10분

8-6. 빈 칸들 한 번에 열기

17분

8-7. 승리 조건 체크와 타이머

18분

8-8. Context api 최적화

11분

React-router

유튜브에서 제공합니다. ZeroCho TV 유튜브 재생목록 확인해주세요!

1분 미만

질문 게시판

올라온 질문이 없습니다!
수업 내용에 궁금한 점이있다면
질문을 작성해주세요!

안녕하세요 강의 잘 듣고있습니다. 질문이요

dev서버에서 사용하는 가상경로 publicPath: '/dist/'가 기존에 output 있는데서 devServer에도 추가를 해주게 바뀐거 같은데요 마지막에 구버전 강의 설명 들어보니 devServer에서 이용하는거 같은데 output에도 남겨놓는 이유는 뭔지 알 수 있을까요?

ian 0 1

hot-loader 실행 안됨 질문

자동으로 build하는 hot-loader 사용 부분 강의를 들으면서 따라하다가 안되는 부분이 있어서 질문 드립니다. 강의에서 알려주신대로 차근차근했는데 제가 어느 부분을 빠뜨렸는지 npm run dev하면 error가 뜨더라구요. 우선 제가 정리한 자동 build hot-loader 적용 방법은 다음과 같습니다. 1. 관련 플러그인 설치 > npm i -D react-hot-loader > npm i -D webpack-dev-server 2. package.json script 변경 "scripts": { "dev": "webpack-dev-server --hot" }, 3. client.jsx 내용 변경 및 추가 const { hot } = require('react-hot-loader/root'); // 추가 const Hot = hot(WordRelay); // 추가 ReactDom.render(<Hot />, document.querySelector('#root')); // 변경 4. webpack.config.js 내용 추가 module > rules > options > plugins에 'react-hot-loader/babel' 추가 그리고 npm run dev 명령어 실행시 에러는 다음과 같습니다. 에러 내용 중간에 Error: Cannot find module 'webpack-cli/bin/config-yargs' 구글링을 해보니 webpack webpack-cli가 최신버전이 아니라서 오류가 뜬다길래 제 버전을 확인해보니 가장 최근이라서요.. 제 package.json은 다음과 같습니다. 빠뜨린 부분 알려주시면 감사하겠습니다 ㅜㅜ

tldud49 0 1

app.js 파일 생성 문제

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

skywalk 0 1

import를 쓰면 되고 require를 쓰면 안되는데 왜그럴까요..

import React from 'react'; import { render } from 'react-dom'; import { hot } from 'react-hot-loader/root'; import WordRelay from './WordRelay'; const Hot = hot(WordRelay); render(<Hot />, document.querySelector('#root')); const React = require('react'); const ReactDom = require('react-dom'); const { hot } = require('react-hot-loader/root'); const WordRelay = require('./WordRelay'); const Hot = hot(WordRelay); ReactDom.render(<Hot />, document.querySelector('#root')); 요 두 모양으로 썼는데 위에꺼는 되고 아래꺼는 안되네요.. [HMR] Waiting for update signal from WDS... react.development.js:172 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. in HotExportedComponent warningWithoutStack @ react.development.js:172 warning @ react.development.js:612 createElementWithValidation @ react.development.js:1944 React$$1.createElement @ react-hot-loader.development.js:2846 render @ react-hot-loader.development.js:3127 finishClassComponent @ react-dom.development.js:17039 updateClassComponent @ react-dom.development.js:16994 beginWork$1 @ react-dom.development.js:18505 beginWork$$1 @ react-dom.development.js:23193 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 react-hot-loader.development.js:2345 React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work. AppContainer @ react-hot-loader.development.js:2345 AppContainer @ VM1223:14 constructClassInstance @ react-dom.development.js:13308 updateClassComponent @ react-dom.development.js:16985 beginWork$1 @ react-dom.development.js:18505 beginWork$$1 @ react-dom.development.js:23193 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 react-dom.development.js:24036 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. at eval (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24036:34) at createFiberFromTypeAndProps (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24039:13) at createFiberFromElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24060:15) at reconcileSingleElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14530:23) at reconcileChildFibers (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14587:35) at reconcileChildren (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16691:28) at finishClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17056:5) at updateClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16994:24) at beginWork$1 (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18505:16) at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:347:14) (anonymous) @ react-dom.development.js:24036 createFiberFromTypeAndProps @ react-dom.development.js:24039 createFiberFromElement @ react-dom.development.js:24060 reconcileSingleElement @ react-dom.development.js:14530 reconcileChildFibers @ react-dom.development.js:14587 reconcileChildren @ react-dom.development.js:16691 finishClassComponent @ react-dom.development.js:17056 updateClassComponent @ react-dom.development.js:16994 beginWork$1 @ react-dom.development.js:18505 callCallback @ react-dom.development.js:347 invokeGuardedCallbackDev @ react-dom.development.js:397 invokeGuardedCallback @ react-dom.development.js:454 beginWork$$1 @ react-dom.development.js:23217 performUnitOfWork @ react-dom.development.js:22208 workLoopSync @ react-dom.development.js:22185 renderRoot @ react-dom.development.js:21878 scheduleUpdateOnFiber @ react-dom.development.js:21419 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 Show 4 more frames react-dom.development.js:19814 The above error occurred in the <AppContainer> component: in AppContainer (created by HotExportedComponent) in HotExportedComponent Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:19814 logError @ react-dom.development.js:19850 update.callback @ react-dom.development.js:20929 callCallback @ react-dom.development.js:12929 commitUpdateEffects @ react-dom.development.js:12968 commitUpdateQueue @ react-dom.development.js:12959 commitLifeCycles @ react-dom.development.js:20098 commitLayoutEffects @ react-dom.development.js:22813 callCallback @ react-dom.development.js:347 invokeGuardedCallbackDev @ react-dom.development.js:397 invokeGuardedCallback @ react-dom.development.js:454 commitRootImpl @ react-dom.development.js:22585 unstable_runWithPriority @ scheduler.development.js:643 runWithPriority$2 @ react-dom.development.js:11305 commitRoot @ react-dom.development.js:22414 scheduleUpdateOnFiber @ react-dom.development.js:21421 scheduleRootUpdate @ react-dom.development.js:24319 updateContainerAtExpirationTime @ react-dom.development.js:24347 updateContainer @ react-dom.development.js:24436 (anonymous) @ react-dom.development.js:24963 unbatchedUpdates @ react-dom.development.js:21687 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962 render @ react-dom.development.js:25042 (anonymous) @ client.jsx:21 (anonymous) @ client.jsx:40 ./client.jsx @ app.js:818 __webpack_require__ @ app.js:727 fn @ app.js:101 (anonymous) @ client:3 1 @ app.js:1516 __webpack_require__ @ app.js:727 (anonymous) @ app.js:794 (anonymous) @ app.js:797 Show 3 more frames react-dom.development.js:24036 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HotExportedComponent`. at eval (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24036:34) at createFiberFromTypeAndProps (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24039:13) at createFiberFromElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:24060:15) at reconcileSingleElement (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14530:23) at reconcileChildFibers (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14587:35) at reconcileChildren (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16691:28) at finishClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17056:5) at updateClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16994:24) at beginWork$1 (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:18505:16) at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:347:14)

허태정 0 2

hot-loader 질문

react-hot-loader를 깔지 않고, webpack-dev-server만 깔고 저장을 해봐도 실시간으로 바뀌던데.... hot-loader랑 차이가 뭔가요?

ㅇㅇ 0 3

질답

멘토링

멘토링 신청
조현영