안녕하세요. TypeScript 프론트엔드용 빌드 타임 DI 라이브러리 prewire를 만들었습니다. 이 라이브러리를 만들게 된 계기는 제가 관리하는 프론트엔드 모노레포의 구조였습니다. 여러 사업의 프론트엔드가 하나의 core/kit 코드를 공유하고 있는데, 현재 앱들은 Next.js를 사용하고 있습니다. 앞으로 일부 사업에서는 TanStack Router를 사용해 보고 싶었지만, 그렇다고 공유 코어가 next/navigation이나 @tanstack/react-router에 직접 의존하게 만들고 싶지는 않았습니다. 사업마다 다른 구현을 선택하면서도 공유 코어는 수정하지 않는 구조가 필요했습니다. prewire에서는 공유 코드가 먼저 port와 token을 선언합니다. export interface RouterPort { href(to: string): string push(to: string): void } export const ROUTER = new InjectionToken<RouterPort>('router') 각 앱은 자신이 사용하는 프레임워크로 이 port를 구현합니다. export const tanstackRouter = injectable( { logger: LOGGER }, ({ logger }): RouterPort => ({ href: (to) => to, push: (to) => { logger.info(`navigate → ${to}`) throw redirect({ to }) }, }), { provides: ROUTER }, ) 공유 코드를 포함한 소비자 쪽에서는 구현이 어디서 왔는지 알 필요 없이 같은 경로만 import합니다. import { router } from '#prewire' prewire codegen이 앱과 공유 패키지의 injectable() 선언을 정적으로 분석해 의존성 순서대로 평범한 TypeScript composition root를 생성합니다. export const logger = consoleLoggerBinding.factory({}) export const router = tanstackRouterBinding.factory({ logger }) 런타임 컨테이너나 reflect-metadata, decorator는 사용하지 않습니다. 누락된 binding, 순환 의존성, 중복 binding 같은 문제는 실행 중이 아니라 코...
Show GN: prewire - 런타임 컨테이너 없이 빌드 타임에 연결하는 TypeScript 프론트엔드 DI
3 days ago
15
Related
Karpathy의 펠리컨
4 hours ago
2
실리콘밸리의 창업자 고기 분쇄기
5 hours ago
4
BMW, 구매한 차량 화면에 Spider-Man 광고 배포
6 hours ago
2
RamenHaus
7 hours ago
3
Wikimedia Foundation, 노조 인정 거부하고 노조 저지 전문 로펌 선임
8 hours ago
4
Matrix에서의 일주일
8 hours ago
3
Show HN: 엔지니어를 꿈꾸는 15살인 제가 만든 사이클로이드 감속기
9 hours ago
8
Show GN: 클로드코드 세션 탐색기 만들어 봤습니다.
9 hours ago
4
Tips
click
Trending
Popular
필리핀 “中 관영매체, 필리핀인을 원숭이로 묘사…인종차별”
2 weeks ago
124
北핵실험 연구한 美학자, 中에 20개월째 구금…외교문제 비화
2 weeks ago
104
디노티시아, ICML26서 ‘STAR-KV’ 논문 발표··· ‘KV 캐시 75% 압축에도 성능 보존’
3 weeks ago
62
삼일PwC, AI 기반 '지속가능성 공시 통합 플랫폼' 출시
3 weeks ago
59
© Clint's Theme Park 2026. All rights are reserved










English (US) ·