피드로 돌아가기
TWD setup is now two Vite plugins and zero app code
Dev.toDev.to
Frontend

Vite 플러그인 기반 TWD 설정 자동화로 App 코드 제로화 달성

TWD setup is now two Vite plugins and zero app code

Kevin Julián Martínez Escobar2026년 5월 8일3분intermediate

AI 요약

Context

기존 TWD 설정은 App 진입점 파일 내에 개발 전용 코드 블록을 직접 삽입하는 방식의 의존성을 가짐. 이로 인해 Top-level await 사용에 따른 렌더링 지연과 설정 정보의 파편화라는 아키텍처적 한계가 발생함.

Technical Solution

  • twd-js/vite-plugin과 twd-relay/vite를 도입하여 도구 설정을 vite.config.ts로 완전히 분리
  • apply: 'serve' 옵션을 통한 개발 환경 전용 활성화로 Production 빌드 영향도 제거
  • twd() 플러그인을 통한 Sidebar 제어, Glob Discovery, Service-Worker 등록 프로세스 자동화
  • twdRemote() 플러그인의 Browser Client 자동 주입으로 WebSocket 경로 및 SW URL 동기화 문제 해결
  • 설정 정보의 단일 진실 공급원(Single Source of Truth) 확보를 통한 런타임 설정 충돌 방지
  • Vite Ecosystem의 표준 플러그인 모델을 채택하여 개발자의 인지 부하 감소 및 코드 가독성 향상

실천 포인트

- 도구 설정 코드가 비즈니스 로직(Entry file)에 침범하고 있는지 검토 - 개발 환경 전용 설정의 경우 Build-time 플러그인 주입 방식을 통해 Runtime 코드에서 제거 가능한지 확인 - 여러 파일에 흩어진 설정 문자열(URL, Path 등)을 단일 설정 파일로 통합하여 동기화 오류 방지

태그

#Vite#Service Worker#Build Tooling#Plugin Architecture#Developer Experience
원문 읽기