피드로 돌아가기
Dev.toFrontend
원문 읽기
Third-party 의존성 제거를 통한 Bundle Size 최적화 및 보일러플레이트 최소화
Reduce Tremendous Code Without Third-Party Solution
AI 요약
Context
신규 프로젝트 시작 시 과도한 외부 라이브러리 도입으로 인한 Abstraction Tax 발생. Monorepo 설정 및 무거운 패키지 사용으로 인한 번들 크기 증가와 코드 복잡도 상승이 주요 병목 지점으로 작용.
Technical Solution
- Native Fetch API 기반의 Generic Wrapper 설계를 통한 인증 토큰 및 헤더 처리 로직 공통화
- Recursive Function 기반의 JSON to FormData 변환 로직 구현으로 복잡한 객체 구조의 자동 매핑 처리
- TypeScript Path Mapping 설정을 통한 Frontend와 Backend 간의 Type Definition 공유 구조 설계
- Boolean 필터링 기반의 유틸리티 함수 구현을 통한 조건부 CSS Class 병합 로직 단순화
- 외부 라이브러리 의존성을 제거한 Vanilla JavaScript 기반의 경량 유틸리티 패턴 채택
실천 포인트
- 20줄 내외의 유틸리티 함수로 대체 가능한 50kb 이상의 라이브러리 존재 여부 검토 - Monorepo 도구 도입 전 tsconfig paths를 통한 단순 타입 공유 가능성 확인 - API 클라이언트 구현 시 Generic 타입을 활용한 응답 데이터 타입 안정성 확보 - FormData 수동 append 로직을 재귀 함수로 추상화하여 유지보수성 향상