모노레포 2

[Monorepo] 여러 패키지에서 React Context Instance 공유하기(feat. Module Federation)

들어가기에 앞서 먼저 내가 테스트한 Monorepo의 구조이다. host/ src/index.tsx # Context.Provider 적용 remotes/ remote1/ remote2/ ... shared/ context/ # Context 로직 React Context와 관련된 로직은 shared 패키지에 있다. host 패키지에서 App 컴포넌트를 Context의 Provider로 감싸 전체 App이 Context를 구독하도록 한다. Context가 필요한 remotes 패키지에서 useContext()를 사용한다. React Context의 Instance가 생성되는 시점 테마를 적용하는 Context가 있다. 1️⃣ 에서 createContext()를 호출했고 그 결과 새로운 타입의 Contex..

💻💀/개발 2022.07.31

[Monorepo] Jest 실행 때 자꾸 SyntaxError가 난다면 Babel 설정을 다시 해보자

SyntaxError: Cannot use import statement outside a module Monorepo 구조의 프로젝트에서 Jest를 도입하는 초기 과정에서 이런 에러가 났다. 이렇게 import 할 때부터 에러가 난다면 Babel이 트랜스파일링을 못하고 있는 것이다. 그런데 Webpack 서버를 실행하거나 빌드할 땐 문제가 없었는데 왜 Jest를 실행할 때 이런 에러가 나는 걸까? 먼저 Monorepo에서의 Babel 설정에 대해 이해할 필요가 있다. Monorepo에서 Babel 설정하기 Monorepo에서는 레파지토리의 루트에 babel.config.json 파일을 생성해서 핵심 설정을 지정해야 한다. .babelrc.json 파일을 통해 각 하위 패키지에서 개별 설정을 할 수도 있..

💻💀/개발 2022.07.24