headless ui 2

[Headless UI 라이브러리 개발] Pagination 구현 계획

Pagination 이란? Pagination은 데이터를 여러 페이지로 나누어 보여주기 위한 기법으로, 아래와 같은 예시들이 있다.(각 사진별 링크를 걸어두었다!) Pagination  컴포넌트 개발 목표접근성이 높고 재사용 가능한 Pagination 컴포넌트 구현하기! Pagination 컴포넌트에서 고려해야할 기능Pagination 컴포넌트를 제작하기 앞서 고려해야할 기능들을 정리해보았다.기본 기능 외에도 추가할 수 있는 기능들이 더러 있었고, 차근차근 추가해볼 예정! 1 기본 기능• 페이지 번호 표시• '이전', '다음' 버튼• '처음', '마지막' 버튼 (사용자가 해당 기능 사용할지 선택)• 페이지 버튼을 클릭하면 해당 페이지로 이동• 총 페이지수와 현재 페이지 표시 (사용자가 해당 기능 사용할지..

Projects/zenui 2025.03.17

[Headless UI 라이브러리 개발] Headless UI 라이브러리와 storybook 사용법

Headless UI 라이브러리란? Headless는 오직 기능만을 제공해주는 ui 라이브러리이다.일반 ui 라이브러리와는 다르게 Headless는 사용자가 원하는대로 커스터마이징 하여 사용할 수 있어 효율적이다.따라서 진행하고 있는 프로젝트의 디자인을 적용시켜 디자인의 통일성을 지킬 수 있다!  어떤 경우에 Headless UI를 사용할까?기본으로 제공되는 디자인이 없기 때문에, 디자인 시스템이 없는 경우 오히려 불편할 수 있고,커스터마이징을 하기 위한 시간을 더 많이 투자해야하는 단점이 있다.따라서 Headless ui는 ui의 스타일보단 로직이나 기능에 집중해야 하거나,프로젝터에서 특정한 디자인 요구사항이 있을 때 사용하는 게 적합하다.         storybook 이란? UI 컴포넌트를 독립적..

Projects/zenui 2025.03.14