kyunghoonk00k

1. 테스트 목적이 테스트는 React 컴포넌트 라이브러리에서 트리쉐이킹이 제대로 적용되는지 확인하고, 트리쉐이킹을 통한 번들 크기 최적화 효과를 측정하기 위해 수행되었습니다.2. 테스트 방법동일한 5개의 컴포넌트(Button, Input, Accordion, Tabs, Dialog)를 사용하는 두 개의 테스트 프로젝트를 생성하여 번들 크기를 비교했습니다.트리쉐이킹 미적용 프로젝트 (no-treeshaking)라이브러리 전체를 임포트하는 방식 사용웹팩 설정에서 트리쉐이킹 비활성화CommonJS 모듈 형식 사용트리쉐이킹 적용 프로젝트 (with-treeshaking)ESM 모듈 형식 사용웹팩 설정에서 트리쉐이킹 활성화필요한 컴포넌트만 선택적으로 임포트3. 테스트 결과3.1. 번들 크기 비교| 프로젝트 | ..

1. Accordion부터 Button까지, 다른 라이브러리에서 가져온 장점들오늘은 제가 개발한 React 컴포넌트 라이브러리에 관한 이야기를 해보려고 합니다. 다양한 컴포넌트 라이브러리들을 연구하면서 각각의 장점을 모으고 제 스타일로 재해석한 과정을 공유하고자 합니다.Accordion 컴포넌트의 재해석제 라이브러리의 Accordion 컴포넌트는 여러 유명 라이브러리의 장점을 조합했습니다.Radix UI에서 가져온 장점Radix UI의 Accordion은 접근성에 매우 강점이 있습니다. WAI-ARIA 디자인 패턴을 준수하고, 키보드 조작성이 매우 뛰어납니다.  다음 기능들을 제 라이브러리에 적용했습니다:헤더 및 패널 관계를 명확히 정의하는 접근성 구조aria-expanded, aria-controls,..

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

컴포넌트 라이브러리를 개발하면서 번들 크기 문제로 한참 고민했다. 사용자가 우리 라이브러리에서 단 하나의 컴포넌트만 사용하더라도 전체 라이브러리가 번들에 포함된다면 성능에 좋지 않을 거라고 생각했다. 그래서 트리 쉐이킹 최적화 작업을 진행했고, 이 과정에서 배운 내용을 공유하려고 한다. 주요 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-..

"만든 라이브러리를 어떻게 문서화하고 배포해야 할까?"라이브러리를 만들고 나니, 이걸 어떻게 사용자들에게 설명해야 할지 고민이 되었다. README 파일로 설명하기엔 한계가 있고, 제대로 된 문서 사이트가 필요하다는 생각이 들었다. 그리고 이왕 만드는 거 GitHub Pages로 배포해서 누구나 쉽게 접근할 수 있게 하고 싶었다. Docusaurus가 React 문서화에 좋다고 해서 이걸로 해보자고 마음먹었다.1. 문서화 환경 설정먼저 Docusaurus를 설치했다. npx create-docusaurus@latest react-components-docs classiccd react-components-docs기본 구조가 생성되었는데, 한국어로 문서를 작성하고 싶어서 설정 파일부터 수정했다.// doc..