[005] 리액트, 타입스크립트, Webpack, Babel - Webpack Hot Module Replacement 구현하기

안녕하세요~ totally 개발자입니다.

 

Hot Module Replacement (저장 시 바로 반영)

 

개발하다보면 Ctrl + S했을 때 바로 수정사항을 반영해서 자주 봐야하는데 새로고침을 하게 되면 모든 요소의 상태가 리셋되기 때문에 좋지 않습니다. 그래서 Ctrl + S로 저장했을 떄 수정된 부분만 체크해서 반영될 수 있도록 설정을 해주어야 합니다.

 

Step 1: 터미널에 yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh를 입력해줍니다. 만약에 permission denied 이슈가 있는 경우에는 node_modules 폴더와 package-lock.json 모두 root으로 되어 있기 때문에 사용자 이름으로 변경해주시면 됩니다. 커맨드는 sudo chown -R [사용자명] [폴더또는파일명]입니다.

 

 

 

Step 2: webpack.dev.js 파일에 다음 빨간색 박스 부분들을 추가해줍니다.

 

 

 

Step 3: 테스트를 위해 src 폴더 내에 Counter.tsx 파일을 생성해주시고 다음처럼 카운트 할 수 있는 코드를 넣어줍니다.

 

 

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const increaseNumber = () => {
    setCount(count+1);
  };

  return (
    <div>
      Count: {count} <br />
      <button type="button" onClick={increaseNumber}>Increase</button>
    </div>
  );
}

export default Counter;

 

 

Step 4: App.tsx 파일에 <Counter />를 넣어줍니다.

 

 

 

Step 5: yarn start로 테스트해보고 Increase 버튼을 몇 번 누르고 <h1>에 있는 내용을 수정해서 Cmd + S 또는 Ctrl + S 눌러서 바로 반영되는지 테스트해보시면 됩니다.