문서
여러 프레임워크에서 사용할 수 있는 라이브러리 만들기
임지훈 토스 · 토스 기술 블로그
AI 핵심 요약
React에 강하게 결합된 라이브러리는 다른 프레임워크를 사용하는 팀에서 재사용하기 어렵다는 문제가 있습니다. TanStack Query의 구조를 참고해 프레임워크 독립적인 핵심 로직을 `query-core`에 두고, React·Vue 등의 패키지가 이를 각 환경에 연결하는 코어-어댑터 패턴을 설명합니다. 계산기 예제에서는 연산과 상태를 코어로 분리하고 `EventTarget` 기반 이벤트로 변경을 알리며, React 어댑터가 이벤트를 구독해 React 상태와 동기화하도록 설계합니다. 다만 프레임워크별 어댑터는 유지보수 비용을 늘릴 수 있으므로, Framework Agnostic 여부는 라이브러리의 목적과 사용자 요구에 따라 결정해야 합니다.
- 프레임워크에 독립적인 코어에는 핵심 로직과 상태를 두고, 프레임워크별 어댑터는 라이프사이클과 상태를 연결하는 역할에 집중하세요.
- 코어가 이벤트 발행·구독 인터페이스를 제공하면 어댑터가 상태 변화를 감지해 프레임워크 UI와 동기화할 수 있습니다.
- 어댑터를 늘리면 프레임워크별 업데이트와 테스트 부담도 커지므로, 코어만으로 통합하기 쉬운지 먼저 살펴보세요.
- Framework Agnostic은 범용 라이브러리의 유일한 설계 방식이 아니며, 목표 사용자와 해결하려는 문제에 맞춰 선택해야 합니다.
소개
여러분은 라이브러리를 만들어봤거나, 만들어야겠다고 생각해본 적이 있나요? 이번에는 프론트엔드 개발 환경에서 높은 범용성을 나타내는 용어 중 하나인 “Framework Agnostic”에 대해 이야기 해보려고 합니다.
