목록 보기
여러 프레임워크에서 사용할 수 있는 라이브러리 만들기
프론트엔드

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

토스
토스
2024년 6월 3일

두줄요약

Framework Agnostic 개념을 바탕으로 코어와 어댑터를 분리하는 라이브러리 설계 방식을 소개했습니다. Tanstack Query와 계산기 예시로 프레임워크 독립성과 통합 구조를 설명했습니다.

핵심 내용

  • Framework Agnostic 개념을 바탕으로 특정 프레임워크에 종속되지 않는 라이브러리 설계 방식 소개
  • Tanstack Query의 코어와 어댑터 분리 구조를 예시로, 공통 로직과 프레임워크 통합 로직의 역할 구분 정리
  • React에 강결합된 계산기 라이브러리를 코어와 React 어댑터로 재설계하는 흐름 설명
  • 코어는 이벤트 발행·구독과 상태 관리 중심, 어댑터는 프레임워크 상태와 라이프사이클 연동 중심

장단점

  • 코어 변경 없이 새로운 프레임워크 대응 가능
  • 코어와 어댑터의 독립 개발로 유지보수 효율 향상
  • 프레임워크별 어댑터 추가·갱신 부담과 테스트 비용 증가
  • 코어 인터페이스 변경 시 모든 어댑터 동반 수정 필요

적용해볼 점

  • 프레임워크 결합 로직과 도메인 로직의 분리 여부 점검
  • 이벤트 기반 인터페이스로 상태 동기화 지점 설계
  • 범용성 필요 수준에 따라 어댑터 제공 여부 재검토

다음 읽기

#React 주제를 다룬 다른 회사 글

멀티 프레임워크 디자인 시스템, 결국 운영 가능한 구조를 선택한 이유

React와 Vue를 함께 지원하던 디자인 시스템에서 운영 비용을 줄이기 위해 지원 범위를 재정의했습니다. React는 컴포넌트 운영축으로, Vue는 파운데이션 중심으로 전환한 사례입니다.

여기어때
여기어때
아키텍처

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...