반응형

NPM 2

[리액트 컴포넌트 라이브러리 고도화] 전체 컴포넌트 리팩토링 대장정

처음에는 단순히 기능이 작동하는 컴포넌트들을 만드는 데 초점을 맞췄지만, 점차 접근성, 성능, 사용자 경험 측면에서 많은 개선이 필요하다는 것을 깨달았다. 이번 글에서는 우리 라이브러리의 15개 핵심 컴포넌트를 어떻게 전면 개선했는지 종합적으로 공유하려고 한다.전체 컴포넌트 개선 방향먼저 전체 컴포넌트에 공통으로 적용한 개선 원칙은 다음과 같다:접근성 강화: 모든 컴포넌트에 WAI-ARIA 표준 적용성능 최적화: React.memo, useCallback, useMemo 활용일관된 API: 컴포넌트 간 일관된 Props 구조 설계유연한 확장성: 컴포지션 패턴 적용타입 안전성: TypeScript 타입 강화이런 원칙을 바탕으로 각 컴포넌트별 리팩토링을 진행했다.인기 라이브러리와의 벤치마킹우리는 Chakra..

생각/javascript 2025.03.17

[리액트 컴포넌트 라이브러리 고도화] 트리 쉐이킹 도입으로 번들 크기 최적화하기

컴포넌트 라이브러리를 개발하면서 번들 크기 문제로 한참 고민했다. 사용자가 우리 라이브러리에서 단 하나의 컴포넌트만 사용하더라도 전체 라이브러리가 번들에 포함된다면 성능에 좋지 않을 거라고 생각했다. 그래서 트리 쉐이킹 최적화 작업을 진행했고, 이 과정에서 배운 내용을 공유하려고 한다. 주요 UI 라이브러리 번들 크기 비교먼저 다른 인기 라이브러리들과 우리 라이브러리의 번들 크기를 비교해봤다.| 라이브러리 | Unpacked Size | Gzipped Size | 단일 컴포넌트 사용 시 || 우리 라이브러리 | 947 kB | ~185 kB | ~15-30 kB || Chakra UI | 2.5 MB | ~520 kB | ~30-45 kB || Mantine | 1.8 MB | ~410 kB | ~20-..

생각/react 2025.03.12
반응형