[React 기초] Webpack 설치 및 실행 : 9탄 - Hot Reloading

지난 시간 5탄에서 자체 서버를 설정하여 웹팩 실행결과(build)를 볼 수 있는 환경설정에 대해 알아 본적이 있습니다. 

2023.12.31 - [컴퓨터 알아가기/React] - [React 기초] Webpack 설치 및 실행 : 5탄 - 웹팩 개발 서버 (devServer) 설치

[React 기초] Webpack 설치 및 실행 : 5탄 - 웹팩 개발 서버 (devServer) 설치

 

그런데 이 개발서버는 쉽게 말해서 코드가 수정이 되면 바로 새로고침이 되어 결과를 볼 수 있는 장점이 있지만 단계별로 수정되는 프로그램에서는 새로고침후 수정이 필요할 시 처음부터 전부 수정을 해야하는 번거로움이 있습니다. 

이런 경우 좀 더 효율적인 작업이 될 수 있게 웹 브라우저에 반영되는 메모리에 보내서 결과를 바로 바로 확인할 수 있으면서도 작업해 왔던 코드를 처음부터 수정하지 않아도 되는 기능을 React에서 Hot Reloading이라는 표현을 사용합니다. 

 

금일은 Hot Reloading 설정에 대해 공부하고 개발서버(devServer)에도 추가 설정을 하도록 하겠습니다. 

 

이 분야는 제로초 TV의 강좌를 기본으로 공부 하였으나 내용이 오래되고 내 컴퓨터 환경에 안맞는 경우는 좀 더 고민해서 만들어 보았습니다. .  

 

▒ React Hot Reloading 설정 

 

1. 프로그램 설치 

 

다음과 같이 필요한 플러그인을 설치합니다. 

 

 

2. 명령어 설정

 

package.json에서 refresh를 시킬수 있는 명령어를 등록합니다. 

 

build 명령어를 사용하고 있으니 다른 명령어를 하나 더 등록해 봅니다. 

 

 

 

3. 플러그인 설정

 

webpack.config.js에서 플로그인을 설정해 줍니다. 

우선 맨 상단에 require(  )시키고 설정이 필요하겠지요. require(  ) 안에는 미리 설치했던 플러그인을 불러오면서 그에 맞는 적당한 변수이름으로 하면 됩니다. 

 

그 후 plugins에 반영합니다. 

 

 

 

4. Module내 plugin 설정

 

Module내에 rules에서 presets 밑에 plugin을 하나 반영한 곳이 있습니다. 이 곳에 react-refresh를 설정합니다. 

 

 

 

5. 개발서버(devServer) 설정

 

기존에 이미 개발서버는 설정 하였으나 Hot Reloading을 위해 추가로 다음과 같이 설정합니다. 

 

 

이제 설정이 끝났습니다.

 

 

이제 실행해 보도록 하겠습니다. 

다음과 같이 localhost가 나옵니다. 여기를 클릭(Ctrl + 클릭)이나 브라우저에 주소를 붙혀서 할 수 있습니다. 

 

 

 

브라우저를 보면 작동이 잘 됩니다. 

 

 

 

Hot Reloading을 시험해 보기 위해 일부 코드를 수정해 봅니다. 다음과 같이 곱하기 대신 더하기로 기입했더니 바로 devServer에서 내용이 변합니다.