pile·
프론트엔드·우아한형제들woowahan·

pnpm 모노레포에서 React 19 마이그레이션하기: 숨겨진 호이스팅 레이어가 만든 타입 충돌 트러블슈팅

문제pnpm 모노레포에서 React 18 과 19 를 공존시키려다 `@types/react` 가 호이스팅으로 섞이며 children · ReactNode 추론이 깨지는 98개의 타입 에러가 발생했다.

접근pnpm Catalogs 로 앱별 의존성을 분리하고, `.npmrc` 의 hoist-pattern 제외로 Layer 3 호이스팅을 차단했다. peerDependencies 를 선언하지 않은 `@sentry/react` 같은 라이브러리는 packageExtensions 로 타입을 가상 주입했다.

결과모든 타입 에러를 해소하고 빌드를 복구했다. pnpm 의 3계층 node_modules 구조를 의도적으로 제어해 한 워크스페이스 안에서 React 다중 버전 공존 환경을 만들었다.

우아한형제들
우아한형제들 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·github-enggithub-eng·

    GitHub Issues 내비게이션 성능 현대화: 지연 → 즉시 응답

    문제GitHub Issues 탐색은 반복적인 서버 렌더링과 네트워크 요청 때문에 개발자 흐름을 끊는 지연이 발생했다.

    접근IndexedDB 기반 클라이언트 캐시, 메모리 계층, preheating, service worker를 도입해 로컬 데이터로 먼저 렌더링하고 백그라운드 재검증을 수행했다.

    결과issues#show의 즉시 탐색 비율이 약 30%로 늘고, React 탐색은 최대 70%가 즉시 처리됐으며 캐시 적중률은 약 96%까지 올랐다.

    #web-performance#service-worker#indexeddb+1
  2. 프론트엔드·stackoverflow-blogstackoverflow-blog·

    MV3 Service Worker 환경에서도 살아남는 Google Drive 동기화 엔진 구축

    문제Chrome Manifest V3 가 persistent background script 를 없애면서 Service Worker 가 임의로 종료될 때 동기화 상태가 사라지는 문제.

    접근메모리 in-memory 상태를 버리고 chrome.storage.local 을 단일 진실 소스로 삼는다. 사용자 액션은 즉시 로컬에 저장하고, 재연결 시 Drive appDataFolder 의 JSON 을 fetch 해 note ID 기준으로 머지한다. Google SDK 대신 native fetch + multipart/related 직접 구성.

    결과무거운 라이브러리를 떼어내 확장이 즉각 반응하고, sync 중단에도 데이터 손실이 없는 구조를 얻었다.

    #service-worker#chrome-extension#manifest-v3+1
  3. 프론트엔드·stackoverflow-blogstackoverflow-blog·

    시간은 추상 개념이지만 소프트웨어는 그것에 깨질 수 있다

    문제JavaScript Date 는 mutability, 모호한 메서드 이름, 타임존·DST 의 복잡성, Moment.js 같은 무거운 라이브러리 의존 같은 고질병을 안고 있다.

    접근Temporal 제안은 ZonedDateTime, Instant(BigInt 나노초), PlainDateTime/PlainDate/PlainTime 같은 불변 타입군으로 Date 를 대체한다. 브라우저 내장 타임존·로케일 데이터를 활용하고, WHATWG 와 HTML date picker 및 structured clone 통합도 진행 중.

    결과Temporal 은 TC39 Stage 4 에 도달했고 V8 과 Firefox(2025-05) 에 구현됐으며 Safari 는 약 60% 진행. 테스트 약 4,500 건으로 Date 의 약 500 건을 크게 웃돈다.

    #software-engineering#time-zones#datetime-bugs