여러 프레임워크에서 사용할 수 있는 라이브러리 만들기
임지훈 · 토스 · 토스 기술 블로그
소개
여러분은 라이브러리를 만들어봤거나, 만들어야겠다고 생각해본 적이 있나요? 이번에는 프론트엔드 개발 환경에서 높은 범용성을 나타내는 용어 중 하나인 “Framework Agnostic”에 대해 이야기 해보려고 합니다.
AI 핵심 요약
React에 강하게 결합된 라이브러리는 다른 프레임워크를 사용하는 팀에서 재사용하기 어렵다는 문제가 있습니다. TanStack Query의 구조를 참고해 프레임워크 독립적인 핵심 로직을 `query-core`에 두고, React·Vue 등의 패키지가 이를 각 환경에 연결하는 코어-어댑터 패턴을 설명합니다. 계산기 예제에서는 연산과 상태를 코어로 분리하고 `EventTarget` 기반 이벤트로 변경을 알리며, React 어댑터가 이벤트를 구독해 React 상태와 동기화하도록 설계합니다. 다만 프레임워크별 어댑터는 유지보수 비용을 늘릴 수 있으므로, Framework Agnostic 여부는 라이브러리의 목적과 사용자 요구에 따라 결정해야 합니다.
- 프레임워크에 독립적인 코어에는 핵심 로직과 상태를 두고, 프레임워크별 어댑터는 라이프사이클과 상태를 연결하는 역할에 집중하세요.
- 코어가 이벤트 발행·구독 인터페이스를 제공하면 어댑터가 상태 변화를 감지해 프레임워크 UI와 동기화할 수 있습니다.
- 어댑터를 늘리면 프레임워크별 업데이트와 테스트 부담도 커지므로, 코어만으로 통합하기 쉬운지 먼저 살펴보세요.
- Framework Agnostic은 범용 라이브러리의 유일한 설계 방식이 아니며, 목표 사용자와 해결하려는 문제에 맞춰 선택해야 합니다.
비슷한 학습 자료
자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기
박건영 · 토스 기술 블로그
@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?
강민우 · 토스 기술 블로그
@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?
권선영 · 토스 기술 블로그
프론트엔드 개발에서 Next.js, 꼭 써야 할까? | EP.6 모닥불
토스 프론트엔드 챕터 · 토스 기술 블로그
CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field
장호승 · 토스 기술 블로그
디자인 컴포넌트 라이브러리를 ‘실제 사용 방식’에 맞게 다시 설계한 이야기
권가은 · 컬리 기술 블로그