프로젝트 소개

web-ui-pack은 확장성이 뛰어난 Web Components와 헬퍼 유틸리티를 제공하는 범용 웹 패키지로, 개발자 경험에 중점을 둡니다. TypeScript로 작성되었으며 광범위한 JSDoc 문서가 포함되어 있어 편집기에서 인텔리센스를 통해 속성, 옵션 및 사용법에 대한 세부 정보를 표시할 수 있습니다. README에 설명된 주요 특징: - 프레임워크에 구애받지 않음: 로직이 브라우저에 내장되어 있고 외부 런타임이 필요 없으므로 Angular, React, Vue 또는 일반 HTML 및 JavaScript와 함께 사용할 수 있습니다. - 폼 컨트롤은 내장된 유효성 검사 로직과 함께 바로 사용할 수 있으며, 프로젝트는 웹 접근성 모범 사례에 중점을 둡니다. - 구성 요소는 상속 및 사용자 정의를 위해 설계되었습니다. 기본값은 클래스별 또는 요소별로 변경할 수 있으며 프로토타입이나 하위 클래스를 통해 동작을 재정의할 수 있습니다. - CSS 변수는 사용자 정의 색상 테마를 지원하며 `wupdark` 속성을 추가하면 다크 색상 구성표를 사용할 수 있습니다. - React/Preact용 `.jsx/.tsx` 지원과 함께 TypeScript 유형이 포함되어 있습니다. - `localeInfo` 헬퍼를 통해 현지화가 처리되며 전역 함수를 통해 메시지를 재정의할 수 있습니다. - side-effects 옵션을 통해 웹팩 트리 쉐이킹에 최적화되어 있으며, 패키지에는 종속성이 없습니다. - 프로젝트는 단위 및 e2e 테스트를 통해 100% 테스트 커버리지를 주장하며 성능과 낮은 메모리 소비에 중점을 둡니다. 사용 가능한 구성 요소는 DropdownElement, SortElement, SpinElement, CircleElement, PopupElement, ModalElement(모달 내 모달, 확인 모달, 확인 훅 및 모달 폼 포함), Notify, FormElement 및 컨트롤 세트: SwitchControl, CheckControl, RadioControl, TextControl(마스크/패턴 포함), TextareaControl, PasswordControl, NumberControl, SelectControl, SelectManyControl, TimeControl, DateControl 및 CalendarControl이 포함됩니다. 여러 항목은 아직 완료되지 않은 것으로 표시되어 있습니다: SliderControl, FileControl, ImageControl, ColorControl, MediaPlayer, InfiniteScroll, VirtualScroll, CarouselElement 및 TableElement. 헬퍼는 영역별로 그룹화됩니다: 애니메이션(animateDropdown, animateStack), DOM(findScrollParent, focusFirst, isIntoView, scrollIntoView, WUPScrolled), 날짜(dateCompareWithoutTime, dateCopyTime, dateFromString, dateToString), 수학(mathFixFP, mathScaleValue, mathRotate), 객체(nestedProperty, objectClone, objectToFormData, observer), 이벤트(onEvent, onFocusGot, onScroll, onScrollStop, onFocusLost, onSpy), 문자열(stringLowerCount, stringUpperCount, stringPrettify), 기타(promiseWait, localeInfo, TimeObject) 및 파일(zip, exportToExcel, saveAsFile, csv). 설치는 npm을 통해 진행되며 그 후 구성 요소를 가져와 정적 `$use()` 메서드를 호출하여 사용자 정의 요소를 등록합니다. README는 HTML 사용자 정의 데이터에 대한 VSCode 설정도 문서화하고 있으며, 라이브러리가 ESNext로 컴파일되어 오래된 브라우저에서는 babel-loader에 포함해야 할 수 있음을 명시하고 인식되지 않는 태그에 대한 문제 해결 지침을 제공합니다.