부트캠프에서 만난 팀원들과 한번 더 팀프로젝트를 진행하게 되었다.(오예 🙌)
이번엔 디자인 시스템 배포가 목표!!
본격적으로 시작하기 전 알아야할 개념들에 대해서 먼저 학습하기로 했다.
🤔 기존 라이브러리 방식 ( ex) Material-UI )
npm install로 설치 -> node_modules 폴더에 전체 라이브러리 코드가 들어감 -> import해서 사용
ex) Button 컴포넌트를 사용하려는 경우
import { Button } from '@mui/material';➡️ node_modules 안의 코드를 참조하겠다는 의미. 이 코드는 node_modules 안에 있어 직접 수정 불가능 (버전 업데이트 시 변경사항 사라짐. 커스텀이 제한적)
이렇게 Button만 import 해도, 실제로는 다음과 같은 것들이 번들에 포함됨 ⤵️
-
Button이 의존하는 다른 내부 유틸리티들
- ripple 효과 시스템
- theme 시스템 전체
- styling 엔진 (emotion)
- 다양한 variant 처리 로직
- 등등...
-
전체 테마 시스템
- 기본 테마만 쓰고 싶어도, 커스텀 테마 시스템 전체가 포함됨
-
모든 공통 유틸리티
- 라이브러리 차원에서 공유하는 헬퍼 함수들
➡️ 필요한 컴포넌트만 import 해도, 그것이 의존하는 스타일 엔진, 테마 시스템 등이 함께 번들에 포함되어 용량이 큼
💡 Shadcn/ui란?
➡️ Radix UI + Tailwind CSS 기반의 컴포넌트 라이브러리
Radix UI는 또 뭐야?! ➡️ "스타일 없이 오로지 기능만 미리 만들어둔 라이브러리"
Radix UI는 Headless UI 라이브러리로,
키보드 네비게이션, 접근성(a11y) 등 기능은 100% 구현되어 있지만 디자인/스타일 0%
작동은 하지만 화면에 아무것도 안 보임 👻따라서
TailwindCSS로 스타일까지 입힌 게 바로 👉 Shadcn/ui 👈
Shadcn/ui가 라이브러리라고는 하지만 기존의 라이브러리들과는 약간은 다르다고 할 수 있다.
[ 차이점 ]
컴포넌트 추가 방식
npx shadcn-ui@latest add [컴포넌트명]명령어로 컴포넌트 추가components/ui폴더에 실제 코드 파일( ex) button.tsx )이 생성됨
➡️ 내 프로젝트 폴더에 있는 파일이므로 마음대로 수정 가능
장점
1. 용량이 작음
- 필요한 컴포넌트 코드만 가져옴
- 의존성이 거의 없음 (TailwindCSS만 있으면 됨)
- 커스텀이 자유로움
- 컴포넌트 파일(button.tsx)을 직접 수정 가능
globals.css에서 전역 테마 색상 변경 가능- 새로운 variant, size 등을 자유롭게 추가 가능
더 많은 예시는 👉 Shadcn/ui 공식문서
