여러 프레임워크에서 사용할 수 있는 라이브러리 만들기

이 게시물은 Framework Agnostic 개념을 중심으로 프론트엔드 라이브러리를 다양한 프레임워크에서 사용할 수 있도록 설계하는 방법을 설명합니다.

Framework Agnostic의 의미

• 특정 프레임워크에 종속되지 않고 독립적으로 작동하는 라이브러리 설계
• React, Vue, Svelte 등 다양한 환경에서 호환 가능

Tanstack Query 사례 분석

• 핵심 로직을 담은 query-core와 프레임워크별 어댑터 구분
• 코어는 독립적이고 어댑터가 각 프레임워크에 통합 역할 수행

직접 설계해보기

• React에 강결합된 계산기 라이브러리를 코어와 어댑터로 분리
• 코어는 EventTarget을 확장해 상태 관리 및 이벤트 발행
• 어댑터는 React 상태와 이벤트를 연동해 UI 업데이트

장단점 및 설계 시 고려사항

• 코어와 어댑터 분리는 유지보수와 확장성에 유리
• 어댑터 개발과 유지보수 부담 존재
• 목표와 요구에 따라 Framework Agnostic 여부 결정 가능