[2024-W16] 공부 정리

🍀 목차
class-variance-authority
tailwind-merge
storybook
용어

 

 

 

tailwind CSS의 단점으로 꼽히며 css-in-js의 장점으로 꼽히는 동적 스타일링 도움을 주는 것들

cn, twMerge, clsx, cva

 

class-variance-authority

문서

• shadcn/ui 설치 시 install 되는 tailwind의 동적 스타일링에 도움을 주는 라이브러리
• cva는 매우 작은 라이브러리, variant를 편하게 줄 수 있다.

 

tailwind-merge

• shadcn/ui 설치 시 install 되는 tailwind class들을 merge 시킬 때 도움을 주는 라이브러리
• shadcn/ui에서는 cn = clsx(조건부 렌더링에 도움) + twMerge메서드를 utils로 제공

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

 

 

storybook

• UI 컴포넌트를 독립적으로 개발, 테스트, 문서화할 수 있도록 도와준다.
• UI를 스토리로 캡처한다. 특정 변형을 시연하여 모양과 동작 검증, 컴포넌트는 여러 스토리를 가질 수 있다.
• Chromatic으로 스토리북을 배포하면 팀 피드백에서도 작업을 공유, 시각적으로 확인할 수 있어 협업에 효율적임. 
• 메인 페이지에 버튼을 렌더링 해서 테스트해 보곤 했는데 스토리북은 독립적으로 해당 컴포넌트의 여러 옵션을 손쉽게 테스트할 수 있어 좋았다.
• Addon으로 확장하여 다양한 기능을 추가함. 

"@storybook/addon-links", // 스토리를 서로 연결함. linkTo(스토리 종류 이름, 스토리 이름).
"@storybook/addon-essentials", // Docs, Controls, Backgrounds, Actions(이벤트와 상호작용 추적) 등이 포함된 essentials addon 모음.
"@storybook/preset-create-react-app", // create-react-app을 위한 스토리북 구성
"@storybook/addon-onboarding", // 가이드 투어 제공
"@storybook/addon-interactions" // 시각적 디버깅
// 등등...

• meta로 메타데이터를 제공하는 걸로 이해. title, component, args 등 스토리에 대한 정보들을 표현
• TypeScript 4.9+를 사용 중이라면 satisfies operator로 엄격한 유형 검사를 받을 수 있다. 인터페이스에 작성된 필수 속성이 스토리에 포함되어있지 않으면 에러를 표시한다.
• autodocs의 기본값은 tag(선택적 문서화)이며, true/false 값을 사용하면 전역적으로 자동 문서를 활성화/비활성화할 수 있다. 

 

용어

• MAU(Monthly Activity User) : 월별 활용 이용자, DAU는 Daily
• MVP(Minimum Viable Product) : 최소 기능 제품
• KPI(Key Performance Indicator) : 핵심성과지표
• PMF(Product Market Fit) : 제품/시장 적합도