-
[monorepo] hot reload 적용 :: 마이구미React 2022. 9. 13. 20:16반응형
이 글은 모노레포 환경에서 핫 리로드를 적용하는 글을 다룬다.
모노레포에 대해서는 다루지 않는다.
예제는 CRA 를 기준으로 작성된다.
CRA 를 사용하지 않더라도, 도움을 얻을 수 있는 정보가 있을 것이라 생각한다.
예제 코드 - https://github.com/hotehrud/monorepo-react
참고 자료 - https://muguku.medium.com/fix-go-to-definition-and-hot-reload-in-a-react-typescript-monorepo-362908716d0e개발 환경을 모노레포로 구성하는 경우에 핫 리로드 기능의 확장을 원할 수 있다.
기본적으로 CRA 로 환경을 구성하면 핫 리로드는 기본적으로 적용되어있다.
코드를 수정하고 저장하면 자동적으로 업데이트된 코드가 적용되는 것을 확인할 수 있다.
하지만 모노레포로 구성한다면, 원했던 결과를 보지 못하는 경우가 존재한다.
packages/app // CRA 로 셋팅된 프로젝트
packages/components // 공용으로 사용될 컴포넌트 모듈app 내부에서 코드 변경에 따른 핫 리로드는 정상적으로 동작한다.
하지만 app 을 벗어난 별도의 패키지 components 내부의 파일 변경시에는 핫 리로드가 발생하지 않는다.
다시 app 을 실행해야만 변경된 코드가 적용되어 업데이트된 결과를 볼 수 있게 된다.
그렇다.
이 글은 components 내부의 코드 변화에도 app 의 핫 리로드 기능이 동작하게 하는 것이 목적이다.
적용 방법은 간단하다.
기본적으로 CRA 내부에서 핫 리로드에 대한 watch 는 /src 디렉토리를 기준으로 설정되어있다.
/src 디렉토리 내부 파일들이 변경되면, 자동으로 이것을 탐지하여 리로드하는 것이다.
그렇기에, app 내부의 코드 변화는 탐지하여 리로드가 가능했다.
하지만 /components 의 경우에는 /src 디렉토리 범위에서 벗어나기 때문에 코드 변화를 탐지할 수 없었던 것이다.
결과적으로 기본값으로 설정된 /src 를 변경해주면 되는 것이다.
CRA 설정을 커스텀하기 위해서는 craco 또는 react-app-rewired 를 사용할 수 있다.
// craco.config.ts const cracoConfig = { webpack: { configure: (config: any) => { removePlugins(config.resolve, pluginByName('ModuleScopePlugin')) const { isFound, match } = getLoader( config, loaderByName('babel-loader'), ) as any if (isFound) { match.loader.include = undefined match.loader.exclude = /node_modules/ } return config }, }, }
우선 ModuleScopePlugin 을 제거한다.
이 플러그인은 CRA 에서 /src 를 벗어난 범위의 import 를 막는 기능이라고 볼 수 있다.
우리가 원하는 것은 /src 외부를 포함하는 것이기에, 이 플러그인을 제거한다.
바벨 /src 외부의 변화를 탐지하기 위해서 include 를 수정해준다.
기본값으로는 /src 를 가르키고 있다.결과적으로 모노레포로 구성될 경우에도 모든 패키지의 코드 변화를 탐지할 수 있게 된다.
https://github.com/hotehrud/monorepo-react
예제는 clone 한 후 쉽게 확인해볼 수 있다.
- yarn start
- app/App.tsx 수정 => 핫 리로드 확인
- componetns/Button.tsx 수정 => 핫 리로드 확인
반응형'React' 카테고리의 다른 글
[React] IOS 페이지 트랜지션 구현해보기 :: 마이구미 (0) 2024.10.07 [React] react-query 에러 핸들링 (2) 2024.09.29 [React] PullToRefresh 구현 :: 마이구미 (0) 2022.06.12 [React] Controlled vs Uncontrolled :: 마이구미 (2) 2022.06.01 [React] useImperativeHandle :: 마이구미 (0) 2022.04.27