MDX 커스텀 컴포넌트 완벽 가이드

// 타입 안전한 React 컴포넌트
interface ButtonProps {
  variant: "primary" | "secondary" | "ghost";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  onClick: () => void;
  children: React.ReactNode;
}
 
export const Button: React.FC<ButtonProps> = ({
  variant,
  size = "md",
  disabled = false,
  onClick,
  children,
}) => {
  const baseClasses = "rounded-lg font-medium transition-all";
  const variantClasses = {
    primary: "bg-primary text-white hover:bg-primary/90",
    secondary: "bg-secondary text-secondary-foreground",
    ghost: "hover:bg-accent hover:text-accent-foreground",
  };
 
  return (
    <button
      className={cn(baseClasses, variantClasses[variant])}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

# 데이터 분석을 위한 간단한 클래스
import pandas as pd
from typing import List, Dict, Any
 
class DataAnalyzer:
    """데이터 분석 헬퍼 클래스"""
 
    def __init__(self, data: pd.DataFrame):
        self.data = data
        self.results: Dict[str, Any] = {}
 
    def calculate_statistics(self) -> Dict[str, float]:
        """기본 통계 계산"""
        return {
            'mean': self.data.mean(),
            'median': self.data.median(),
            'std': self.data.std(),
            'count': len(self.data)
        }
 
    def filter_outliers(self, threshold: float = 3.0) -> pd.DataFrame:
        """이상치 제거 (Z-score 기반)"""
        z_scores = np.abs(stats.zscore(self.data))
        return self.data[(z_scores < threshold).all(axis=1)]
 
# 사용 예시
analyzer = DataAnalyzer(df)
stats = analyzer.calculate_statistics()
print(f"평균: {stats['mean']:.2f}")

// 비동기 데이터 페칭 유틸리티
const fetchWithRetry = async (url, options = {}, retries = 3) => {
  const { timeout = 5000, ...fetchOptions } = options;
 
  for (let i = 0; i < retries; i++) {
    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), timeout);
 
      const response = await fetch(url, {
        ...fetchOptions,
        signal: controller.signal,
      });
 
      clearTimeout(timeoutId);
 
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
 
      return await response.json();
    } catch (error) {
      if (i === retries - 1) throw error;
 
      // 지수 백오프
      await new Promise((resolve) =>
        setTimeout(resolve, Math.pow(2, i) * 1000)
      );
    }
  }
};

-- 복잡한 분석 쿼리 예시
WITH user_stats AS (
  SELECT
    u.id,
    u.name,
    COUNT(DISTINCT o.id) as order_count,
    SUM(o.total_amount) as total_spent,
    AVG(o.total_amount) as avg_order_value,
    MAX(o.created_at) as last_order_date
  FROM users u
  LEFT JOIN orders o ON u.id = o.user_id
  WHERE o.status = 'completed'
    AND o.created_at >= NOW() - INTERVAL '1 year'
  GROUP BY u.id, u.name
)
SELECT
  name,
  order_count,
  total_spent,
  avg_order_value,
  CASE
    WHEN order_count >= 10 THEN 'VIP'
    WHEN order_count >= 5 THEN 'Premium'
    ELSE 'Standard'
  END as customer_tier
FROM user_stats
ORDER BY total_spent DESC
LIMIT 100;