gnutils

v1.0.2

Published

9 months ago

A collection of useful utility functions

0High
0Medium
0Low

genians-dev

gnutils utils utilities helpers typescript

gnutils

TypeScript 유틸리티 라이브러리로, 웹 개발에 필요한 다양한 헬퍼 함수들을 제공합니다.

📦 설치

npm install gnutils

🔧 빌드

# 의존성 설치
npm install

# 라이브러리 빌드
npm run build

# 감시 모드로 빌드
npm run build:watch

# 타입 체크
npm run type-check

📚 사용법

Browser (IIFE)

<script src="dist/index.global.js"></script>
<script>
  // 전역 gnutils 객체로 접근
  const rgb = gnutils.hslToRgb([210, 50, 50]);
  const element = gnutils.$('#myElement');
</script>

ES Modules

import { hslToRgb, $, addClass } from 'gnutils';

const rgb = hslToRgb([210, 50, 50]);
const element = $('#myElement');
addClass(element, 'active');

CommonJS

const { hslToRgb, $, addClass } = require('gnutils');

const rgb = hslToRgb([210, 50, 50]);
const element = $('#myElement');
addClass(element, 'active');

🛠️ 유틸리티 구성

🎬 Animation

slideup(element: Node, duration: number): void - 요소를 위로 슬라이드
fadeout(element: Node, duration: number): void - 요소를 페이드아웃

🏷️ Attributes

attr(element: any, name: any, value?: any): any - 속성 설정/조회
hasAttr(element: any, name: string): any - 속성 존재 확인
removeAttr(element: any, name: string): any - 속성 제거
data(element: any, attribute: string): any - data 속성 조작

🎨 Classes

addClass(element: any, ...args: any[]): any - 클래스 추가
removeClass(element: any, ...args: any[]): any - 클래스 제거
removeClasses(element: any, cls: string): any - 클래스들 제거
replaceClass(element: any, ...args: any[]): any - 클래스 교체
hasClass(element: any, cls: string): any - 클래스 존재 확인
toggleClass(element: any, ...args: any[]): any - 클래스 토글

🌈 Color

hslToRgb([h, s, l]: Array<number>): Array<number> - HSL을 RGB로 변환
hslToHex([h, s, l]: Array<number>): string - HSL을 HEX로 변환
hexToHsl(color: string): Array<number> - HEX를 HSL로 변환
rgbToHsl(color: string): Array<number> - RGB를 HSL로 변환
rgbToHex(color: Array<number>): string - RGB를 HEX로 변환
hexToRgb(color: string): Array<number> - HEX를 RGB로 변환
hexPrefix(hexCode: number): string - HEX 접두사 추가
isHexPattern(color: string): boolean - HEX 패턴 검증
contrastColor(hex: string): string - 대비 색상 반환

📐 Dimensions

offset(element: any, coordinates?: any): any - 요소의 offset 위치
position(element: any, parent?: any): any - 요소의 position 위치

🎯 DOM

$(selector: any, context?: any): any - 단일 요소 선택
$$(selector: any, context?: any): any - 다중 요소 선택
fragment(html: any): any - HTML 문자열을 DOM 요소로 변환
empty(element: any): any - 요소 내용 비우기
html(parent: any, html?: any): any - HTML 내용 설정/조회
text(parent: any, text?: any): any - 텍스트 내용 설정/조회
val(parent: any, text?: any): any - input 값 설정/조회
prepend(parent: any, element: any): any - 요소 앞에 삽입
append(parent: any, element: any): any - 요소 뒤에 삽입
before(ref: any, element: any): any - 참조 요소 앞에 삽입
after(ref: any, element: any): any - 참조 요소 뒤에 삽입
remove(element: any): any - 요소 제거

🎭 Events

on(...args: any[]): Function - 이벤트 리스너 등록
off(targets: Array<any> | any, type: string, listener: any, useCapture: boolean): void - 이벤트 리스너 제거
once(...args: any[]): any - 한 번만 실행되는 이벤트 리스너
trigger(targets: any[] | Node, event: string | Event, detail?: any): any - 커스텀 이벤트 발생
createEvent(e: string | Event, bubbles: boolean, cancelable: boolean, detail: any): any - 이벤트 생성
toEventTargets(target: any): any - 이벤트 타겟으로 변환
isTouch(e: any): any - 터치 이벤트 확인
getEventPos(e: any, prop: string): any - 이벤트 위치 정보

🔍 Element Checks

isVoidElement(element: any): any - 빈 요소 확인
isVisible(element: any): any - 요소 가시성 확인
isInput(element: any): any - input 요소 확인
filter(element: any, selector: any): any - 요소 필터링
within(element: any, selector: any): any - 요소 내부 확인

📝 String Utils

hyphenate(str: string): any - camelCase를 kebab-case로 변환
camelize(str: string): any - kebab-case를 camelCase로 변환
trim(str: string): string - 공백 제거
startsWith(str: string, search: string): any - 문자열 시작 확인
endsWith(str: string, search: string): any - 문자열 끝 확인
includes(obj: any, search: any): boolean - 포함 여부 확인

🔍 Type Checks

hasOwn(obj: any, key: any): any - 객체 속성 확인
isFunction(obj: any): boolean - 함수 타입 확인
isObject(obj: any): boolean - 객체 타입 확인
isArray(obj: any): boolean - 배열 타입 확인
isPlainObject(obj: any): boolean - 순수 객체 확인
isWindow(obj: any): boolean - Window 객체 확인
isDocument(obj: any): boolean - Document 객체 확인
isNode(obj: any): boolean - Node 객체 확인
isElement(obj: any): boolean - Element 객체 확인
isNodeCollection(obj: any): boolean - NodeCollection 확인
isString(value: any): boolean - 문자열 타입 확인
isBoolean(value: any): boolean - 불린 타입 확인
isNumber(value: any): boolean - 숫자 타입 확인
isNumeric(value: any): boolean - 숫자형 문자열 확인
isEmpty(obj: any): boolean | number - 빈 값 확인
isUndefined(value: any): boolean - undefined 확인
isHtml(str: string): boolean | string[] - HTML 문자열 확인
isDate(value: any): boolean - Date 객체 확인

🔄 Type Conversions

toBoolean(value: any): boolean | any - 불린으로 변환
toFinite(value: any): number - 유한 숫자로 변환
toInteger(value: any): number - 정수로 변환
toNumber(value: any): number - 숫자로 변환
getNumber(value: any): number - 숫자 추출
toFloat(value: any): number - 실수로 변환
toArray(value: string): string[] - 배열로 변환
toNode(element: any): HTMLElement - Node로 변환
toNodes(element: any): any[] - Node 배열로 변환
toWindow(element: any): any - Window 객체로 변환
toList(value: any): any - 리스트로 변환
toMs(time: any): any - 밀리초로 변환
toDate(value: any): Date - Date 객체로 변환
toJson(str: string): any - JSON으로 변환

🔍 Validation

isEqual(value: any, other: any): any - 값 비교
normalizeMacFormat(mac: string): string - MAC 주소 형식 정규화
isMAC(macStr: string, sep?: string): boolean - MAC 주소 검증
isNetworkAndBroadcastAddr(ipStr: string): boolean - 네트워크/브로드캐스트 주소 확인
isIP(ipStr: string, version?: string, ipPattern?: string): boolean - IP 주소 검증
isIPv4Pattern(ipStr: string, ipPattern?: string, isSubnetMask?: boolean): boolean - IPv4 패턴 검증
isIPv6Pattern(ipStr: string, ipPattern?: string): boolean - IPv6 패턴 검증
isIPv4(ipStr: string): boolean - IPv4 주소 검증
isIPv4Exclusive(ipStr: string): boolean - IPv4 전용 주소 검증
isIPv6(ipStr: string): boolean - IPv6 주소 검증
isCidrIPv4(ipStr: string): boolean - CIDR IPv4 검증
isCidrIPv6(ipStr: string): boolean - CIDR IPv6 검증
isRangeIPv4(ipStr: string): boolean - IPv4 범위 검증
isRangeIPv6(ipStr: string): boolean - IPv6 범위 검증
isLongRangeIPv4(ipStr: string): boolean - 긴 IPv4 범위 검증
isLongRangeIPv6(ipStr: string): boolean - 긴 IPv6 범위 검증

📊 Array Utils

each(obj: any, cb: any): boolean - 배열/객체 순회
last(array: Array<any>): any - 마지막 요소 반환
clamp(number: number, min: number, max: number): any - 값 범위 제한
sortBy(array: Array<any>, prop: string): Array<any> - 속성으로 정렬
removeBy(array: Array<any>, predicate: Function): Array<any> - 조건으로 제거
uniqBy(array: Array<any>, prop: string): Array<any> - 속성으로 중복 제거
sumBy(array: Array<any>, prop?: string): Number - 속성으로 합계

🔧 Object Utils

extend(defaults: any, options: any): any - 객체 확장
objExtends(...args: any[]): any - 다중 객체 확장
objClone(obj: any): any - 객체 복제

🎲 Random

random(min: number, max: number): number - 랜덤 숫자 생성

🖱️ Drag & Drop

drag(element: HTMLElement): void - 드래그 기능
dragLayout(element: HTMLElement, boundary: Array<number>, events: { drag?: Function; dragStart?: Function; dragEnd?: Function }): Function - 레이아웃 드래그

🔍 Selectors

query(selector: any, context: any): any - 단일 요소 쿼리
queryAll(selector: any, context: any): any - 다중 요소 쿼리
find(selector: any, context: any): any - 요소 찾기
findAll(selector: any, context: any): any - 모든 요소 찾기
matches(element: any, selector: any): any - 선택자 매칭 확인
closest(element: any, selector: any): any - 가장 가까운 부모 요소
parent(element: any): any - 부모 요소
parents(element: any, selector?: any): any - 모든 부모 요소
children(element: any, selector?: any): any - 자식 요소들
next(element: any): any - 다음 형제 요소
prev(element: any): any - 이전 형제 요소
nextUntil(element: any, selector?: any): any - 선택자까지의 다음 형제들
siblings(element: any, selector?: any): any - 형제 요소들
escape(css: any): string - CSS 선택자 이스케이프

🎨 Styles

style(element: any, name: keyof CSSStyleDeclaration, value?: any): any - 스타일 설정/조회
styles(element: any, styles: { [key: string]: string | number }): void | any - 다중 스타일 설정
removeStyle(element: any, name: string | Array<string>): any - 스타일 제거
css(element: any, property: any, value?: any): any - CSS 속성 설정/조회
getUnit(property: string, value: any): any - CSS 단위 추출
getStyles(element: any, pseudoElt?: any): any - 계산된 스타일 조회
getStyle(element: any, property: any, pseudoElt?: any): any - 특정 스타일 조회
propName(name: string): any - CSS 속성명 정규화

📜 Scroll

scrollTop(element: any, top: number): void - 스크롤 위치 설정
scrollIntoView(element: any, offsetBy: number): any - 요소를 뷰로 스크롤
scrollParents(element: any, overflowRe?: RegExp): any - 스크롤 가능한 부모들
getViewport(scrollElement: any): any - 뷰포트 정보
getCenterX(): number - 중앙 X 좌표
getCenterY(): number - 중앙 Y 좌표
getPositionX(element: HTMLElement): number - 요소 X 위치
getPositionY(element: HTMLElement): number - 요소 Y 위치

🌐 Browser

isIE: boolean - IE 브라우저 확인
getBrowser(): string - 브라우저 정보 반환
getOS(): string - 운영체제 정보 반환

🔧 Utils

assign(target: any, ...args: Array<any>): any - 객체 할당
selInput: string - input 선택자
dayOfMonth(year: number, month: number): number - 월의 일수
dateDiff(date1: string | number | Date, date2: string | number | Date): number - 날짜 차이
byteSize(orgValue: number): string | number - 바이트 크기 변환
commaNum(num: number): string - 숫자에 콤마 추가
parseBundle(text: string, locale: string): string - 번들 텍스트 파싱
textToMultiLangs(text: string): { [key: string]: string } - 다국어 텍스트 변환
formatString(str: string, args: string[]): string - 문자열 포맷팅
copyToClipboard(text: string): void - 클립보드 복사
generateUUID(): string - UUID 생성
getByteSize(str: string): number - 문자열 바이트 크기

🔐 Base64

base64.base64UrlEncode(str: string): string - Base64 URL 인코딩
base64.base64UrlDecode(str: string): string - Base64 URL 디코딩

📦 빌드 출력

라이브러리는 여러 형식으로 빌드됩니다:

CommonJS (dist/index.js) - Node.js 환경용
ES Modules (dist/index.mjs) - 모던 번들러용
IIFE (dist/index.global.js) - 브라우저용 <script> 태그
TypeScript declarations (dist/index.d.ts, dist/index.d.mts)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

gnutils

📦 설치

🔧 빌드

📚 사용법

Browser (IIFE)

ES Modules

CommonJS

🛠️ 유틸리티 구성

🎬 Animation

🏷️ Attributes

🎨 Classes

🌈 Color

📐 Dimensions

🎯 DOM

🎭 Events

🔍 Element Checks

📝 String Utils

🔍 Type Checks

🔄 Type Conversions

🔍 Validation

📊 Array Utils

🔧 Object Utils

🎲 Random

🖱️ Drag & Drop

🔍 Selectors

🎨 Styles

📜 Scroll

🌐 Browser

🔧 Utils

🔐 Base64

📦 빌드 출력