React에서 children 사용법: 컴포넌트 확장성을 높이는 방법
·
프로젝트/Componique: UI 컴포넌트 라이브러리
처음에는 카드 컴포넌트를 간단하게 만들 생각이었습니다. 사용자가 입력한 내용을 카드 안에 문자열로만 출력하는 방식이었습니다. 예를 들어, 카드에 들어갈 내용을 "description"이라는 Prop으로 받아서 출력하면 충분하다고 생각했습니다.const CardBasic = ({ title, description }: { title: string, description: string }) => { return ( {title} {description} );};이처럼 문자열만 받는 방식은 굉장히 간단하고 빠르게 구현할 수 있었습니다. 단순 텍스트를 출력하는 상황이라면 충분한 방법이었습니다.하지만, 확장성 문제프로젝트가 진행되면서 사용자가 입력할 내용이 단순한 텍스트가 아닐..
Componique 프로젝트: 주요 기능
·
프로젝트/Componique: UI 컴포넌트 라이브러리
Componique의 주요 기능Componique는 사용자가 웹사이트나 애플리케이션을 더 쉽게 구축할 수 있도록 돕는 UI 컴포넌트 라이브러리입니다. 다양한 UI 컴포넌트를 제공하여, 이를 자유롭게 커스터마이징하고 사용할 수 있는 환경을 제공합니다.다양한 UI 컴포넌트 제공Componique는 Form, Data Display, Feedback, Navigation과 같은 주요 기능별로 약 32가지의 컴포넌트를 제공합니다.이로써 사용자는 자신의 프로젝트에서 필요한 요소들을 빠르게 선택하고 적용할 수 있습니다.Form 컴포넌트: 버튼, 체크박스, 인풋 필드 등으로 사용자 입력을 받는 데 필수적인 요소들입니다.Data Display 컴포넌트: 카드, 캘린더, 캐러셀 등을 포함하여 데이터를 시각적으로 표현할 ..
Componique 프로젝트: UI 컨셉 설명
·
프로젝트/Componique: UI 컴포넌트 라이브러리
UI(User Interface) 설계는 사용자가 시스템을 얼마나 쉽고 직관적으로 사용할 수 있느냐에 큰 영향을 미칩니다. Componique 프로젝트에서 UI는 단순하면서도 직관적인 설계를 목표로 하였으며, 이를 통해 사용자의 편리한 접근을 돕고자 했습니다.1. 심플함과 직관성Componique의 UI 설계에서 가장 중요한 두 가지는 심플함과 직관성입니다. 복잡한 인터페이스는 사용자의 피로감을 높이고, 원하는 기능에 대한 접근성을 떨어뜨리기 마련입니다. 그래서 저희는 불필요한 요소를 최대한 배제하고, 핵심 기능만을 시각적으로 드러내는 방식으로 설계하였습니다.메뉴는 기능별로 구분되어 사용자가 필요한 UI 컴포넌트를 빠르게 탐색할 수 있도록 구성되었습니다. 특히 사용자가 탐색에 시간을 낭비하지 않도록, 검..