리액트 공부 - 3일차

전에 만들었던 구구단을 webpack으로 빌드할 것이다.

 

1. npm init 으로 package.json을 만들어 준다. 

 

2. babel-loader , @babel/core 등 필요한 모듈들을 설치해준다. ( npm i -D로 개발용으로 설치 ) 

 

3. webpack.config.js 에 웹팩을 어떻게 빌드할 것인지 작성해준다.

 

4. 작성했던 js 파일을 jsx 파일로 옮겨준다. ( node module system (require)을 사용 )

 

5. npx webpack | npm run 명령어로 빌드 

 

6. index.html 만들어서 실행하기

 

 

webpack.config.js 구성요소 간단 정리

1. Entry : 시작하는 파일들

2. Output : 결과가 어떻게 될지

3. Loaders(modules): 모듈

4. plugins : 추가적인 작업하고 싶은 것들

5. Mode: development ( 개발용 ) production( 실서비스용 ) 

 

 

@babel/preset-env 자동으로 옛날 브라우저들 연동해주는 모듈

 

구체적으로 옵션으로 설정할 수 있음.

 

browsers 의 옵션 볼 수 있는 링크 :github.com/browserslist/browserslist

webpack.config.js

 

form 태그를 사용할 때 input의 속성으로 둘 중의 하나의 값을 주어야 한다. 아니면 에러 발생!

 

value & onChange

 

defaultValue 

 

자동 빌드 설정을 하지 않으면, 파일을 변경해도 실행하면 변경한 부분이 반영이 안 돼있음

 

webpack-dev-server

dist 폴더(webpack.config.js의 output Path)에 결과물을 저장을 해놓고, index.html을 실행시키면 결과물을 줌

 

Hot Reloding 기능 

변경점이 생기면 그에 따라서 저장했던 결과물을 수정해주는 기능

 

react-refresh plugin 선언

moduel 부분의 plugin에 추가

react-refresh plugin 을 사용하면, Hot Reloding 기능을 사용할 수 있다

reloading	Hot Reloding
페이지를 새로고침 시키기 때문에 데이터를 모두 잃어버림	페이지를 새로고침 시키지 않고 변경점을 찾아 수정된 페이지를 보여주기 때문에 데이터 유실 없음

 

 

webpack.config.js의 설정 중, devServer를 설정할 때, publicPath를 사용하게 된다.

 

webpack.config.js

 

path	public path
실제 경로	가상의 경로 (webpack-dev-server가 사용하는 결과물들간의 가상 경로)