[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ③ webpack-dev-server & react-hot-loader 적용/ 실시간 업데이트 기능

전 포스팅에도 말했듯이, 새로 코드를 수정할 때마다 ,웹팩을 계속해서 다시 구성하면 개발하는데에 시간이 엄청나게 소요될 것입니다.😒

오늘 우리의 목표는, webpack-dev-server와 react-hot-loader 를 이용해, React 프로젝트의 실시간 리로딩 기능을 구현할 것입니다!👍

 

---

설치

이전 모듈들과 마찬가지로 다음과 같이 개발자 모드로 설치를 해줍시다.

 

package.json

설치된 것을 확인 후,

 

webpack.config.js

바벨 로더 플러그인 부분에 react-hot-loader를 추가해줍니다.

babel 과 webpack-dev-server 를 연결해 주는 역할입니다.

 

package.json

우리는 앞으로 webpack-dev-server 를 이용해 구성을 할 것이므로 package.json 에서 빌드 방식을 변경해주어야 합니다.

이제는 webpack 이아닌 webpack-dev-server --hot(옵션) 으로 서버를 이용해 구성하겠다는 뜻입니다.

만약 기존 방식도 유지하고 싶으시면

이런식으로 명령어를 나눠서 npm run local 을 통해 기존 방식을 이용할 수도 있습니다.

 

---

 

Webpack-dev-server란?

 

추가적인 세팅을 하기 전에 잠시 알고가셔야 할게 있습니다.

webpack-dev-server의 동작원리

1. 서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시
2. 소스 파일이 변경되면 변경된 모듈만 새로 번들링
3. 변경된 모듈 정보를 브라우저에 전송
4. 브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드

출처: https://velog.io/@adam2/webpack-dev-server-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0%EC%82%BD%EC%A7%88%ED%9B%84%EA%B8%B0

 

client.jsx

react-hot-loader 를 거친 컴포넌트로 만들어줘야합니다.

다음과 같이 hot-loader를 적용해줍니다.  (hot-loader import할때 root 을 꼭 붙이셔야 합니다!)

 

이 과정까지만 하고나면 저장을 해도 정상적으로 업데이트가 되지 않습니다.

webpack-dev-server 가 bundle을 인식 할 곳을 지정해주어야 하기 때문이죠.

우리의 index.html 에서 script로 참조하고 있는 bundle에 들어갈 경로를 적용해주어야 합니다.

 

webpack.config.js

 

webpack.config.js 의 output 파트에 publicPath 를 저희의 bundle.js 가 있는 dist 경로로 만들어줍니다.

 

---

실행해보기

 

자 이제 npm run dev 를 통해 실행해봅시다!

밑에부분 생략

 

localhost:8080 이라는 페이지가 생겼고 webpack output도 dist 로 돼있는 것을 볼 수 있습니다.

 

localhost:8080 링크를 따라가 접속해보면

다음과 같이 잘 뜹니다!!

 

 

 

수정을 한뒤 저장, 새로고침만으로 바로 수정사항이 적용되는 것도 확인을 할 수 있습니다. 😜

 

---

다음화에는?

- css를 적용해 볼 것입니다!

 

 

이전화 :

[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅

[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ② babel이란? babel 밑 webpack 세팅

 

다음화 : 포스팅 예정