본문 바로가기

study

(3)
[webpack]핫리로딩 수정마다 반복되는 빌드를 줄여줄 리액트 리프레쉬 npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D 프론트 서버도 필요하다 해서 npm i -D webpack-dev-server 설치가 좀 걸리시네... 왜 오래 걸리지 그러면 이렇게 설치 되어있음 package.json 의 devDependencies 배열에 추가되어 있음 "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "react-refresh": "^0.9.0", "webpack-dev-server": "^3.11.0" 그리고 위의 script 옵션을 "scripts": { "dev": "webpack serve --env development" }, 이..
[React] 웹팩 바벨설치 추가 init npm init 리액트, 리액트돔 설치 npm i react react-dom 웹팩 설치 npm i -D webpack webpack-cli 바벨 npm i babel-loader @babel/core 환경에 맞게 알아서 바벨로 맞춰줌 npm i -D @babel/preset-env 얘가 있어야 JSX 쓸수있음 npm i -D @babel/preset-react 다 깔리면 폴더에 webpack.config.js 생성 mode - entry - module - plugins - output 5개가 중요 //webpack.config.js const path = require('path'); module.exports = { mode: 'development', //개발시: development /..
[React] Node.js webpack 설치 ZeroCho, 이 분께 배우고 있습니다. 정말 잘 알려주십니다. 시리즈 별로 보게 됩니다. www.youtube.com/watch?v=66_D4RYpFqY&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=13 제로초 님의 리액트 강의 bbb 최근 가장 핫한 자바스크립트 라이브러리 리액트(react), 제가 배워보겠습니다. 첫 단계는 Node.js의 설치과 webpack, babel 설치로 개발 환경을 구축합니다. 1. Node.js (설치: nodejs.org/ko/) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 왼쪽의 14.15.0 LTS로 진행해봅..