webpack-dev-server 자동 재로드를 Chrome 탭별로 일시적으로 사용 중지하고 싶습니다.

소개

webpack-dev-server 의 오토 리로드(Hot Module Replacement)는 매우 편리합니다만,

브라우저에서 앱을 열 때 일시적으로 자동 다시 로드를 중지할 수 있습니다.

예를 들어, JS의 버그 수정이나 CSS 조정을 할 때

탭 A에서 수정 전의 상태에서 앱 동작

탭 B에서는 수정 후의 상태로 앱을 움직여 비교해 보면서 수정하고 싶다

라고 하는 상황은 자주 있다고 생각합니다만, 오토 리로드가 유효하고 있으면, 탭 A도 최신의 상태가 되어 버립니다.

이 게시물에서는 webpack-dev-server 앱에 액세스하는 동안 자동 재로드를 일시적으로 비활성화하는 방법을 보여줍니다.

create-react-app 또한 webpack-dev-server를 사용하므로 동일한 방식으로 자동 재로드를 비활성화 할 수 있습니다.

chrome DevTools의 요청 차단 기능 사용

Chrome DevTools에는 지정된 URL에 대한 요청을 차단하는 기능이 있으므로 이 기능을 사용합니다.

Chrome DevTools에서 요청 차단 기능 사용하기

개발 도구를 연 상태에서 오른쪽 상단의 메뉴 버튼 -> "More tools"-> "Request Blocking"에서 설정합니다.



URL은 핫 리로드에 사용되는 WebSocket URL $URL:$PORT/sockjs-node를 지정합니다.

예를 들어 로컬 webpack-dev-server를 포트 3000에서 시작하는 경우
localhost:3000/sockjs-node
를 지정합니다.



URL을 지정한 후에는 "Enable request blocking"체크박스를 체크하면 핫 리로드를 비활성화할 수 있습니다.

데모

실제로 webpack-dev-server의 핫 리로드를 비활성화한 탭과 유효한 탭을 동시에 열고 있는 데모입니다.

왼쪽 탭은 요청 차단 기능으로 핫 리로드가 비활성화됩니다

오른쪽의 탭은 핫 리로드가 유효

상태입니다.

참고