(21.09.07)React fast-reload

작은 지식이라도, 하루에 하나씩.

---

 

한 줄 요약

---

🦄React Fast-reload는 cra4 버전부터 hot-reload를 대체한, 페이지 새로고침 없이 바뀐 부분만 교체해주는 라이브러리이다. 🦄
🦄cra로 프로젝트를 만들면 기본적으로 셋팅이 되어있는데, fast-reload가 동작하지 않는다면 아래 조건에 걸리는 부분이 있는지 살펴보자🦄

 

 

 

본문

---

간혹, 그러나 있으면 매우매우매우 빡치는 일이다. 아니 코드를 바꿨는데 왜 업데이트가 안돼??

 

구글에다가 react fast-reload, react hot-reloader not working...등등의 키워드로 열라게 구글링해도 다른 사람들은 이런 일 없는건지 참 아무런 검색 결과가 없다.

 

일단 개발이 급하니까 새로고침하면서 코딩을 하는데...이거 생각하면 할 수록 열받는다.

 

분노에 힘입어 결국 왜 fast-reload가 동작하지 않았는지 알았다.

 

정답은 놀랍게도 cra 공식문서에 적혀있었는데, 이런게 진짜 눈 뜬 소경이라고 하는 것 같다.

 

공식 문서 두고 엄한데서 찾고있으니....ㅉ

 

https://create-react-app.dev/docs/troubleshooting/#npm-start-doesnt-detect-changes

Troubleshooting | Create React App

 

 

요약하자면 다음과 같다.

 

기본적으로 npm start 가 실행중일 때는 브라우저가 자동으로 업데이트 된 코드를 refresh 해줄텐데,

만약 잘 안된다면, 아래 가이드를 확인해보길 바란다.

 

• 파일이 진입점 (entrypoint)에 의해 임포트 되었는지 확인해라. 웹팩은 당신의 진입점으로부터 직접적 / 간접적으로 연결된 파일들만 리로드 해줄 것이다.
• 만약 프로젝트가 드롭박스 폴더에 있다면, 거기 말고 다른데서 해봐라
• 만약 watcher가 index.js라는 파일을 찾지 못하고, 폴더 이름으로 참조한다면, 웹팩 버그로 인해 watcher를 다시 시작해야할 것입니다.
• Vim과 IntelliJ 같은 "safe Write: 기능이 있는 에디터는 watcher를 박살냅니다. 이 기능을 꺼주세요
• 만약 경로에 괄호가 있다면, 지워주세요. 마찬가지로 웹팩 버그를 야기합니다.
• 리눅스와 MacOS를 사용한다면, 더 많은 watcher를 허용하기 위해 tweak system settings가 필요합니다.
• 만약 프로젝트가 버츄얼박스 같은 가상머신에서 돌아간다면, 프로젝트 폴더에 .env 파일을 만들고 CHOKIDAR_USEPOLLING=true를 설정하세요 (존재하지 않는다면). 이렇게 한다면 watcher가 polling mode를 사용하게 되어, 가상머신 속으로 들어갈 수 있을 것입니다.

 

 

내가 겪었던 문제는 첫번째 사례이다. 뭣 좀 테스트 해본다고 App.js를 지우고 index.js에서 생쑈를 떨고 있어서 안됐던 것이다.

 

index.js를 루트 div에 랜더링 시키고, 이를 진입점 삼아 App.js를 연결시키고, App.js에서 생쑈를 떨어보니 fast-reload가 잘된다

 

//index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";


const Index = () => {
  return (
    <>
      <App></App>
    </>
  );
};

document.body.innerHTML = "<div id='root'> </div>";

const rootElement = document.getElementById("root");

ReactDOM.render(<Index />, rootElement);

//App.js
import React from "react";
import ReactDOM from "react-dom";
import { observable } from "mobx";

const App = () => {
  return <div>ㅇㅇ</div>;
};

export default App;

이렇게 하니까 Fast-reload가 아주 잘된다

 

 

 

fast-reload는 리액트의 가장 큰 장점이고, 아주 편리한 기능인데, 이를 너무 당연시 여겼던거 같다. fast-reload의 소중함과, 이 라이브러리가 어떻게 동작하는지 조금 이해한거 같다.