Skip to content
Docs
패키지 목록

@hua-labs/utils

v1.1.3
Utilities
TypeScript

Common utility functions for HUA apps and packages.

$npm install @hua-labs/utils

유틸리티 카테고리

문자열 유틸

generateIdgenerateUUIDslugifytruncatetoCamelCasetoPascalCasetoSnakeCasetoKebabCasecapitalizetitleCase

유효성 검사

validateEmailvalidateUrlvalidatePhoneNumbervalidateNumberRangevalidateStringLength

성능 유틸

debouncethrottlememoizedelayretry

포맷터

formatDateformatNumberformatFileSizeformatTimeAgo

핵심 유틸리티: cn

Tailwind CSS 클래스를 안전하게 병합하는 유틸리티. clsx와 tailwind-merge 조합.

typescript
import { cn } from '@hua-labs/utils';

// 기본 사용
cn('px-4 py-2', 'bg-blue-500')
// => 'px-4 py-2 bg-blue-500'

// 조건부 클래스
cn('base-class', isActive && 'active-class', { 'disabled': isDisabled })
// => 'base-class active-class' (조건에 따라)

// Tailwind 충돌 해결
cn('px-4', 'px-6')
// => 'px-6' (tailwind-merge가 중복 해결)

// 컴포넌트에서 사용
function Button({ className, ...props }) {
  return (
    <button
      className={cn('px-4 py-2 rounded bg-primary', className)}
      {...props}
    />
  );
}

사용 예시

문자열 유틸

typescript
import { slugify, truncate, generateId, toCamelCase } from '@hua-labs/utils';

slugify('Hello World!')           // 'hello-world'
truncate('Long text here', 8)     // 'Long tex...'
generateId()                      // 'x7k9m2p4'
toCamelCase('hello_world')        // 'helloWorld'

유효성 검사

typescript
import { validateEmail, validateUrl } from '@hua-labs/utils';

validateEmail('test@example.com')   // true
validateUrl('https://example.com')  // true

성능 유틸

typescript
import { debounce, throttle, retry } from '@hua-labs/utils';

// Debounce - 마지막 호출 후 300ms 대기
const debouncedSearch = debounce((query: string) => {
  searchApi(query);
}, 300);

// Throttle - 100ms마다 최대 1회 실행
const throttledScroll = throttle(() => {
  updatePosition();
}, 100);

// Retry - 3번까지 재시도
const result = await retry(() => fetchData(), { maxRetries: 3 });

새니타이징

typescript
import { sanitizeInput, escapeHtml, maskEmailForLog } from '@hua-labs/utils';

sanitizeInput('<script>alert("xss")</script>')
// => 'alertxss'

escapeHtml('<div>Hello</div>')
// => '&lt;div&gt;Hello&lt;/div&gt;'

maskEmailForLog('user@example.com')
// => 'u***@example.com'

관련 패키지