shadcn/ui 란?
Re-usable components built using radix UI and Tailwind CSS.
Radix UI와 tailwind css로 만들어진 재사용 가능한 컴포넌트
radix UI 란?
An open-source UI component library for building high-quality, accessible design systems and web apps.
높은 퀄리티와 접근 가능한 디자인 시스템 및 웹 앱을 구축하기 위한 오픈소스 UI 컴포넌트 라이브러리
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
Radix Primitives는 접근성, 커스텀, 개발 경험에 중점을 둔 하위 수준의 UI 컴포넌트입니다. 이 컴포넌트들을 설계 시스템의 기본 디자인 시스템으로 사용하거나 점진적으로 채택할 수 있습니다.
사용한 계기와 목적?
작년 22년 12월 종강 후, 프론트엔드 개발을 5개월 동안 하면서 tailwindcss를 사용하여 직접 모든 코드를 구현했습니다. 그러다보니 빠른 개발을 못하고, Nextjs, React 자체에 대한 공부를 못하는 경우가 생기다 보니 Headless 컴포넌트에 관심을 가지게 되었습니다.
Headless 컴포넌트는 사용자 인터페이스 (UI)와 관련된 로직을 분리하는 프로그래밍 개념입니다. 이는 웹 애플리케이션과 웹 사이트 개발에서 주로 사용되는데, 사용자 인터페이스와 데이터 처리 로직을 느슨하게 결합하여 유지보수성과 재사용성을 향상시키기 위해 사용합니다.
shadcn/ui는 radix ui 컴포넌트와 tailwindcss를 기반으로 미리 UI를 만들어진 상태로 가져다쓰기 편하게 만들어져 있어서 저에게 필요한 라이브러리였습니다. 빅프로젝트에서 팀 리더이자 프론트엔드를 혼자 맡게 되었으니 UI를 디자인 하는데에 시간을 소비하지 않고 팀원을 돕는데에 에너지를 쏟기에 최적이었습니다.
shadcn/ui 구성
왠만한 컴포넌트는 존재해서 사용하기 편했습니다.
빅프로젝트에 shadcn/ui를 활용한 결과 UI
shadcn/ui를 쓰고 난 느낀점
초기 설정은 npx 를 통해서 자동으로 설정되기 때문에 편하게 설정 했습니다. toast, accordian, sidebar, avatar, table, form 등을 사용해 봤으며 저는 매우 만족해서 사용했습니다. 저는 MUI를 써본 적이 없기 때문에 감안해주세요!
혼자서 프론트엔드를 독학한지 1년도 안된 저의 수준에서는 혁신이었습니다. shadcn/ui 의 파일들을 보면서 이렇게도 코딩이 가능하구나... 라는 배움의 시간도 있었고, 난이도 높은 코딩을 간접적으로 경험할 수 있었습니다. 잘 써보지 않았던 forwardRef, type 설정 들이 눈에 들어오고, tailwindcss도 더 복잡하게 쓰여진 것을 보고 배울 수 있었습니다.
하지만 기업수준에서는 이미 디자인 시스템이 구축되있다면 굳이 써볼 이유는 없을 것 같습니다. 특별한 기능이 있는 것은 아니기에 기존에 사용하던 방식을 더 고수할 것으로 보입니다. 만약에 프리랜서라면 도입해서 개인적으로 디자인 시스템을 구축해보는 것도 좋다고 생각이 들었습니다.
참고하기
shadcn/ui
Beautifully designed components built with Radix UI and Tailwind CSS.
ui.shadcn.com
잘 만들어진 디자인 시스템을 보며 컴포넌트 이해하기
아직도 개발을 하면서 컴포넌트란 무엇인지에 대해 고민을 종종 하곤 한다. 이름은 무엇으로 짓는 게 좋을지, 어떻게 재사용할지, 역할의 범위는 어디까지 정해야할지, 확장성, 의존성 관리는
velog.io
'Experience > - KT AIVLE School' 카테고리의 다른 글
| KT AIVLE School 빅프로젝트 - event loop, call stack, callback queue 학습 (0) | 2023.07.25 |
|---|---|
| KT AIVLE School 빅프로젝트 - SpeechRecognition (0) | 2023.07.20 |
| KT AIVLE School 빅프로젝트 - 텍스트 입력 Debounce 처리 (0) | 2023.07.20 |
| KT AIVLE School 빅프로젝트 - 웹캠 녹화 구현 (0) | 2023.07.19 |
| KT AIVLE School 빅프로젝트 - 웹캠 영상 녹화 시 에러 경험 (0) | 2023.07.19 |
| KT AIVLE School 빅프로젝트 - 프론트에서 S3의 GET요청을 대기하는 로직 (0) | 2023.07.19 |
댓글