'HowTo: Components'는 일반적인 UI 패턴을 구현하는 웹 구성요소 모음입니다. 이러한 구현의 목적은 교육 리소스를 제공하는 것입니다. 다양한 구성요소의 주석이 많이 달린 구현을 읽고 배울 수 있습니다. 이러한 구성요소는 명시적으로 UI 라이브러리가 아니며 프로덕션에서 사용해서는 안 됩니다.
구성요소
<howto-checkbox>: 양식의 불리언 옵션을 나타냅니다. 가장 일반적인 유형의 체크박스는 사용자가 선택 및 선택 해제라는 두 가지 선택사항 간에 전환할 수 있는 이중 유형입니다.<howto-tabs>: 표시되는 콘텐츠를 여러 패널로 분리하여 제한합니다.<howto-tooltip>: 요소가 키보드 포커스를 받거나 마우스가 요소 위로 마우스를 가져가면 요소와 관련된 정보를 표시하는 팝업입니다.
목표
Google의 목표는 접근성, 성능, 유지관리, 스타일 지정이 용이한 강력한 구성요소를 작성하기 위한 권장사항을 보여주는 것입니다. 각 구성요소는 완전히 독립되어 있으므로 참조 구현 역할을 할 수 있습니다.
접근성
구성요소는 WAI ARIA 저작 관행을 밀접하게 따릅니다. 이는 접근성 높은 리치 인터넷 애플리케이션 표준인 ARIA를 설명하고 보여주는 가이드입니다. ARIA에 익숙하지 않다면 WebFundamentals의 소개를 확인하세요. 각 구성요소는 Authoring Practices의 관련 섹션으로 연결됩니다. 엄격하게 필요하지는 않지만 코드를 살펴보기 전에 작성 관행 섹션을 읽어보는 것이 좋습니다.
성능
웹 개발에서 '성능'이라는 용어는 다양한 항목에 적용될 수 있습니다. <howto>의 맥락에서 성능은 주로 휴대기기에서도 애니메이션이 60fps로 일관되게 실행되는 것을 의미합니다.
시각적 유연성
레이아웃이나 선택된 상태 또는 활성 상태를 나타내는 경우를 제외하고는 구성요소에 스타일이 지정되지 않습니다. 이는 구현을 시각적으로 유연하고 집중적으로 유지하기 위한 것입니다. 장식에 시간을 들이지 않음으로써 구성요소 작동에 절대적으로 필요한 것으로만 코드를 제한합니다. 구성요소가 작동하는 데 필요한 스타일이 있는 경우 해당 스타일에는 그 이유를 설명하는 주석이 표시됩니다.
유지보수 가능한 코드
HowTo: Components는 참조 구현이므로, 읽기 쉽고 이해하기 쉬운 코드를 작성하는 데 더 많은 시간을 할애했으며, 주석을 많이 달았습니다.
비목표
라이브러리/프레임워크/툴킷이 아닙니다.
<howto> 구성요소는 프로덕션에서 사용되지 않으므로 npm, bower 또는 다른 플랫폼에 게시되지 않습니다. 간결하고 읽기 쉬운 코드를 위해 최신 JavaScript API를 사용하고 웹 구성요소 표준을 구현하는 최신 브라우저를 지원합니다. 이러한 구현을 읽은 후에는 자체 요구에 맞게 코드를 조정할 수 있습니다.
하위 호환성 유지
코드를 직접 사용해서는 안 됩니다. 더 나은 구현이 발견되면 요소의 구현과 API를 대폭 변경할 수 있으며, 실제로 변경할 가능성이 매우 높습니다. 이곳은 웹 UI 빌드를 위한 권장사항을 공유하고, 탐색하고, 논의할 수 있는 살아있는 리소스입니다.
완전성
WAI ARIA Authoring Practices에서 찾을 수 있는 *모든 *구성요소를 구현하지는 않으며 앞으로도 구현하지 않을 것입니다. 하지만 다른 <howto> 구성요소에 사용된 원칙을 재사용하면 독자가 누락된 구성요소를 구현할 수 있습니다.