[monorepo] hot reload 적용 :: 마이구미

이 글은 모노레포 환경에서 핫 리로드를 적용하는 글을 다룬다.
모노레포에 대해서는 다루지 않는다.
예제는 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 한 후 쉽게 확인해볼 수 있다.

1. yarn start
2. app/App.tsx 수정 => 핫 리로드 확인
3. componetns/Button.tsx 수정 => 핫 리로드 확인