TypeScript 프런트엔드 개발 환경에서 런타임 컨테이너 없이 빌드 타임에 의존성 주입(DI)을 처리하는 새로운 라이브러리 'prewire'가 공개되었습니다. 이 라이브러리는 특히 여러 프런트엔드 애플리케이션이 공통 코드를 공유하면서도, 라우터(Router)와 같은 특정 기능의 프레임워크별 구현을 유연하게 연결해야 하는 모노레포(monorepo) 구조에서 발생하는 문제를 해결하기 위해 개발되었습니다.
prewire는 공유 코드가 먼저 '포트(port)'와 '토큰(token)'을 선언하고, 각 앱은 자신이 사용하는 프레임워크(예: Next.js, TanStack Router)로 이 포트를 구현하는 방식을 사용합니다. 'prewire codegen' 명령어를 통해 앱과 공유 패키지의 의존성 선언을 정적으로 분석하여, 런타임 컨테이너나 리플렉션(reflect-metadata), 데코레이터(decorator) 없이도 의존성 순서에 따라 일반 TypeScript 코드를 생성합니다. 이 과정에서 누락된 바인딩, 순환 의존성, 중복 바인딩 같은 문제는 빌드 에러로 즉시 감지되어 개발자가 런타임에 문제를 발견하는 것을 방지합니다. 또한, 생성된 코드는 사람이 직접 읽을 수 있으며, 필요에 따라 수동으로 의존성을 구성하는 데 활용할 수도 있습니다.
이 접근 방식은 백엔드 개발에서 흔히 볼 수 있는 빌드 타임 DI 패턴을 프런트엔드에 적용한 것으로, 공유 코어의 수정 없이 다양한 앱 환경에 맞춰 유연하게 확장할 수 있는 장점을 제공합니다. 특히 여러 사업의 프런트엔드가 단일 코어/키트 코드를 공유하면서도 Next.js, TanStack Router 등 다른 프레임워크를 선택적으로 사용하려는 경우에 유용합니다. prewire는 Vite, webpack, rspack 등 주요 빌드 도구와의 연동을 위한 플러그인과 Next.js용 유틸리티를 제공하여 통합을 용이하게 합니다. 이 라이브러리는 현재 초기 0.x 버전으로 npm에 배포되었으며, API 변경 가능성이 있지만, 복잡한 모노레포 환경에서 프런트엔드 의존성 관리에 새로운 해법을 제시할 것으로 기대됩니다.