(21.09.07)React fast-reload
도깨비젤리
·2021. 9. 7. 00:56
작은 지식이라도, 하루에 하나씩.
한 줄 요약
🦄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
요약하자면 다음과 같다.
기본적으로 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의 소중함과, 이 라이브러리가 어떻게 동작하는지 조금 이해한거 같다.
'TIL' 카테고리의 다른 글
(21.09.09) 상태관리에 관하여 (feat. react.state && mobx) (0) | 2021.09.09 |
---|---|
(21.09.07) Moment.js의 moment는 mutable하다 (0) | 2021.09.07 |
(21.09.05) Promise에 관하여 (0) | 2021.09.06 |
(21.09.05) ParseInt vs Number (0) | 2021.09.05 |
(21.09.01) Moment.js (0) | 2021.09.01 |