Shadcn/ui

멋있따. 난 컴포넌트 라이브러리가 아닌 컴포넌트 collection

라이브러리 또는 프레임워크를 사용하는 이유

프로그래밍에서 라이브러리는 특정 기능을 수행하는 코드 모음이다. 이를 통해 개발자는 직접 모든 기능을 구현할 필요 없이, 필요한 기능을 쉽게 가져다 쓸 수 있다. 마치 도서관(library)에서 필요한 책을 꺼내 보듯이, 필요한 코드나 기능을 가져다 사용할 수 있는 것이다.

라이브러리는 효율성을 높여주고, 코드의 재사용성을 극대화시켜 준다. 개발자는 이미 검증된 코드를 가져다 쓰기 때문에 안정성도 높일 수 있다. 그래서 라이브러리는 많은 개발자들에게 필수적인 도구로 자리잡았다.

대표적인 UI 라이브러리로 Ant-Design / Material-UI / shadcn/ui가 있다. 필자는 tailwindcss 를 좋아하기 때문에 shadcn/ui 를 사용할 예정이다.

shadcn/ui 공식 홈페이지

UI 라이브러리를 보면서 항상 느끼는 거는 빠른 개발할 때, 사용하면 좋겠다라는 생각이 들었다. 진짜 퍼블리싱 기준 왠만한 거 다 만들어져 있으니깐 사용하긴 편해보이긴 하다. 이번 기회에 shadcn/ui 를 공부해봐야겠다.

Shadcn/ui install

shadcn 설치 링크

npx shadcn@latest init

npx를 통해 설치를 하면 다음과 같은 옵션들이 뜬다.

1. Which style would you like to use? › New York / default
   -> New York 세련되고 현대적인 스타일
   -> default 일반적인 웹 디자인에 맞추어진 기본 UI 스타일
2. Which color would you like to use as base color? › ❯ Neutral
   Gray
   Zinc
   Stone
   Slate
   -> Neutral: 기본적인 톤을 원할 때.
   Gray: 좀 더 보편적이고 모던한 느낌의 회색을 원할 때.
   Zinc: 차가운 회색 톤을 원할 때.
   Stone: 따뜻한 회색으로 자연스러운 분위기를 원할 때.
   Slate: 짙고 차분한 회색으로 모던하고 세련된 느낌을 원할 때.
3. Do you want to use CSS variables for colors? › no / yes
   -> css 변수 사용 여부

이렇게 되면 terminal 창에 이런식으로 뜬다.

이제 Shadcd/ui의 docs를 보면서 필요한 컴포넌트를 설치하면 자유롭게 사용할 수 있다.
장점으로는 일단 의존성이 존재하는 라이브러리와는 다르게 Collection이다.

코드와 번들링에 대한 책임이 package user한테 넘긴다는 얘기

패키지 사용자 입장: 필요한 컴포넌트만 불러오고 자유롭게 커스터마이징 가능

패키지 제작자 입장: 컴포넌트 커스터마이징 지원, 번들링 및 배포에 대한 부담이 사라진다. 커스텀 컴포넌트를 제작하고, 소스 코드를 어딘가에 올리고, 이를 다운로드할 수 있는 npx script만 제공하면 된다

확실히 material ui보다는 지원하는 component들이 적지만,, 그래도 modern적인 분위기는 넘사인 거 같다. 괜히 2023 git star 1등한 게 아니다..