core-web

Browser and web platform utilities for modern web applications

현대적인 웹 애플리케이션을 위한 브라우저와 웹 플랫폼 유틸리티

Installation

Installs the package and its peer dependency

패키지와 필수 의존성을 설치하세요:

npm install @dooboostore/core-web reflect-metadata

pnpm add @dooboostore/core-web reflect-metadata

Demo example

DEMO EXAMPLE

데모 예제

DOM Manipulation

Essential DOM element manipulation and query utilities

필수 DOM 요소 조작과 쿼리 유틸리티들

ElementUtils

DOM element manipulation utilities

DOM 요소 조작 유틸리티

import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';

// HTML to fragment
const fragment = ElementUtils.htmlToFragment('<div>Hello</div>', { document });
const html = ElementUtils.toInnerHTML(fragment, { document });

// Query selector
const element = ElementUtils.querySelector(document.body, '.my-class');

OTHER FUNCTIONS기타 함수

loadImage(src: string): Promise<HTMLImageElement>Load image from URL (Promise)URL에서 이미지 로드 (Promise)
loadImage(src: string, callback: LoadImageCallbackType): voidLoad image from URL (callback)URL에서 이미지 로드 (콜백)
loadAudio(src: string): Promise<HTMLAudioElement>Load audio from URL (Promise)URL에서 오디오 로드 (Promise)
loadAudio(src: string, callback: LoadAudioCallbackType): voidLoad audio from URL (callback)URL에서 오디오 로드 (콜백)
replaceWith(targetElement: Element, replaceElement: Element): voidReplace element요소 교체
nodeList(documentFragment: DocumentFragment): Node[]Get node list from DocumentFragmentDocumentFragment에서 노드 리스트 가져오기
cloneNodeList(documentFragment: DocumentFragment): Node[]Clone node list from DocumentFragmentDocumentFragment에서 노드 리스트 복제
querySelectorAll(element: Element | {start, end}, selector: string): Element[]Query all elements with selector셀렉터로 모든 요소 쿼리
selectorElements(selector: string, element?: Element | Document): Element[]Select elements by selector셀렉터로 요소 선택
selectorNodes(selector: string, element?: Element | Document): Node[]Select nodes by selector셀렉터로 노드 선택
removeAttribute(element: Element, attrs: string[]): voidRemove multiple attributes여러 속성 제거
setAttribute(element: Element, attrs: string[]): voidSet multiple attributes여러 속성 설정
setAttributeAttr(element: Element, attrs: Attr[]): voidSet attributes from Attr arrayAttr 배열로 속성 설정
getAttributeToObject(element: Element): anyGet all attributes as object모든 속성을 객체로 가져오기
getStyleToObject(element: HTMLElement): anyGet all styles as object모든 스타일을 객체로 가져오기

NodeUtils

Node manipulation utilities

노드 조작 유틸리티

import { NodeUtils } from '@dooboostore/core-web/node/NodeUtils';

// Node operations
NodeUtils.appendChild(parentNode, childNode);
NodeUtils.replaceNode(targetNode, newNode);
NodeUtils.addNode(targetNode, newNode);

// Clone node
const cloned = NodeUtils.cloneNode(element, true);

OTHER FUNCTIONS기타 함수

removeAllChildNode(node)Remove all child nodes모든 자식 노드 제거
findNodes(rootNode, filter)Find nodes with filter필터로 노드 찾기

Browser Storage

Browser storage and data persistence utilities

브라우저 저장소와 데이터 지속성 유틸리티들

StorageUtils

LocalStorage and SessionStorage utilities

LocalStorage와 SessionStorage 유틸리티

import { StorageUtils } from '@dooboostore/core-web/storage/StorageUtils';

StorageUtils.setLocalStorageItem('key', 'value', window);
const value = StorageUtils.getLocalStorageItem('key', window);

OTHER FUNCTIONS기타 함수

setLocalStorageItem(k: string, v: string | any, window: Window): voidSet localStorage item (auto JSON.stringify for objects)localStorage 항목 설정 (객체는 자동 JSON.stringify)
setSessionStorageItem(k: string, v: string | any, window: Window): voidSet sessionStorage item (auto JSON.stringify for objects)sessionStorage 항목 설정 (객체는 자동 JSON.stringify)
getLocalStorageItem(k: string, window: Window): string | nullGet localStorage itemlocalStorage 항목 가져오기
getSessionStorageItem(k: string, window: Window): string | nullGet sessionStorage itemsessionStorage 항목 가져오기
cutLocalStorageItem(k: string, window: Window): string | nullGet and remove localStorage itemlocalStorage 항목 가져오고 제거
cutSessionStorageItem(k: string, window: Window): string | nullGet and remove sessionStorage itemsessionStorage 항목 가져오고 제거
removeLocalStorageItem(k: string, window: Window): voidRemove localStorage itemlocalStorage 항목 제거
removeSessionStorageItem(k: string, window: Window): voidRemove sessionStorage itemsessionStorage 항목 제거
getLocalStorageJsonItem<T>(k: string, window: Window): T | undefinedGet and parse JSON from localStoragelocalStorage에서 JSON 가져오고 파싱
getSessionStorageJsonItem<T>(k: string, window: Window): T | undefinedGet and parse JSON from sessionStoragesessionStorage에서 JSON 가져오고 파싱
cutLocalStorageJsonItem<T>(k: string, window: Window): T | undefinedGet JSON from localStorage and removelocalStorage에서 JSON 가져오고 제거
cutSessionStorageJsonItem<T>(k: string, window: Window): T | undefinedGet JSON from sessionStorage and removesessionStorage에서 JSON 가져오고 제거
clearLocalStorage(window: Window): voidClear all localStorage모든 localStorage 지우기
clearSessionStorage(window: Window): voidClear all sessionStorage모든 sessionStorage 지우기

Cookie management utilities

쿠키 관리 유틸리티

import { CookieUtils } from '@dooboostore/core-web/cookie/CookieUtils';

const value = CookieUtils.get('cookieName');
CookieUtils.set('cookieName', 'value', { path: '/' });
CookieUtils.remove('cookieName', { path: '/' });

OTHER FUNCTIONS기타 함수

names(doc?)Get all cookie names모든 쿠키 이름 가져오기
make(name, value, option?)Make cookie string쿠키 문자열 만들기

Browser APIs

Browser window and platform APIs

브라우저 윈도우와 플랫폼 API들

ClipBoardUtils

Clipboard read/write operations

클립보드 읽기/쓰기 작업

import { ClipBoardUtils } from '@dooboostore/core-web/clipboard/ClipBoardUtils';

const text = await ClipBoardUtils.readText(window);
await ClipBoardUtils.writeText('Hello World', window);

OTHER FUNCTIONS기타 함수

read(window)Read clipboard items클립보드 항목 읽기
write(data, clipboard?)Write clipboard items클립보드 항목 쓰기

WindowUtils

Window event handling utilities

윈도우 이벤트 처리 유틸리티

import { WindowUtils } from '@dooboostore/core-web/window/WindowUtils';

const resize$ = WindowUtils.eventObservable(window, 'resize');
resize$.subscribe(event => {
  console.log('Window resized:', event);
});

OTHER FUNCTIONS기타 함수

eventObservable<K>(window: Window, type: K, options?): Observable<WindowEventMap[K]>Create Observable from Window eventsWindow 이벤트에서 Observable 생성

Data Conversion

Web-specific data format conversion utilities

웹 전용 데이터 형식 변환 유틸리티

ConvertUtils

Image and data conversion utilities

이미지와 데이터 변환 유틸리티

import { ConvertUtils } from '@dooboostore/core-web/convert/ConvertUtils';

const blob = await ConvertUtils.toBlob(imageBitmap, { type: 'image/png' });
const base64 = await ConvertUtils.toBase64(imageFile, { type: 'image/jpeg' });
const compressed = await ConvertUtils.compressImageToBase64(image, { 
  maxWidth: 800, 
  type: 'image/jpeg',
  quality: 0.8 
});

OTHER FUNCTIONS기타 함수

coreConvertUtils: CoreConverUtilsRe-export of core conversion utilities코어 변환 유틸리티 재내보내기
toObjectUrl(data: File | Blob): stringConvert File or Blob to Object URLFile 또는 Blob을 Object URL로 변환
isImageConvertConfig(data: any): booleanType guard for ImageConvertConfigImageConvertConfig 타입 가드
toFile(imageBitmapOrCanvas, config: {filename, type?, quality?}): Promise<File>Convert image to File이미지를 File로 변환
toImageBitmap(target: File | Blob | HTMLImageElement | Canvas): Promise<ImageBitmap>Convert to ImageBitmapImageBitmap으로 변환
toBlobURL(imageBitmapOrCanvas, config: {type?, quality?}): Promise<string>Convert to Blob URLBlob URL로 변환

Utilities

Additional web development utilities

추가 웹 개발 유틸리티들

DownloadUtils

File download utilities

파일 다운로드 유틸리티

import { DownloadUtils } from '@dooboostore/core-web/download/DownloadUtils';

DownloadUtils.download(window, '/path/to/file.pdf', 'document.pdf');
DownloadUtils.csvDownload(window, data, { headers: ['name', 'age', 'email'] });

OTHER FUNCTIONS기타 함수

download(window: Window, url: string, filename?: string): voidDownload file from URLURL에서 파일 다운로드
csvDownload<T>(window: Window, datas: T[], config: {includeHeader?, headers}): voidDownload data as CSV file데이터를 CSV 파일로 다운로드

EventUtils

Event handling with Observable pattern

Observable 패턴으로 이벤트 처리

import { EventUtils } from '@dooboostore/core-web/event/EventUtils';

const click$ = EventUtils.htmlElementEventObservable(button, 'click');
click$.subscribe(event => {
  console.log('Button clicked!', event);
});

OTHER FUNCTIONS기타 함수

htmlElementEventObservable<K>(element: HTMLElement | Document, type: K, options?): Observable<Event>Create Observable from HTMLElement or Document eventsHTMLElement 또는 Document 이벤트에서 Observable 생성

ValidUtils

Browser and environment validation utilities

브라우저와 환경 검증 유틸리티

import { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';

if (ValidUtils.isBrowser()) {
  console.log('Running in browser');
}

if (ValidUtils.isMobile(window)) {
  console.log('Mobile device');
}

OTHER FUNCTIONS기타 함수

coreValidUtils: CoreValidUtilsRe-export of core validation utilities코어 검증 유틸리티 재내보내기
hasParentWindow(win: Window): booleanCheck if window has parent window윈도우에 부모 윈도우가 있는지 확인
isSocialNetworkServiceInappBrowser(): booleanCheck if SNS in-app browser (Facebook, Instagram, etc.)SNS 인앱 브라우저 확인 (Facebook, Instagram 등)
isWkWebview(): booleanCheck if iOS WKWebViewiOS WKWebView 확인
isiPhone(): booleanCheck if iPhone deviceiPhone 기기 확인
isAndroidWebview(): booleanCheck if Android WebViewAndroid WebView 확인

StyleCssUtils

CSS manipulation and style utilities

CSS 조작과 스타일 유틸리티

import { StyleCssUtils } from '@dooboostore/core-web/stylecss/StyleCssUtils';

const value = StyleCssUtils.getPropertyValue('--primary-color', { el: element, window });
StyleCssUtils.setPropertyValue('--primary-color', '#007bff', element);
const styles = StyleCssUtils.getComputedStyle({ el: element, window });

OTHER FUNCTIONS기타 함수

getPropertyEntries(config)Get all CSS property entries모든 CSS 속성 항목 가져오기

AnimationFrameUtils

Animation frame utilities with FPS control

FPS 제어를 포함한 애니메이션 프레임 유틸리티

import { AnimationFrameUtils } from '@dooboostore/core-web/animation/AnimationFrameUtils';

const animation$ = AnimationFrameUtils.dividePerFpsObservable({ fps: 60, window });
animation$.subscribe(() => {
  // Run animation at 60 FPS
});

OTHER FUNCTIONS기타 함수

fps(params: FpsConfigParamType, callback: (value) => void): SubscriptionExecute callback at specified FPS with subscription지정된 FPS로 콜백 실행 (구독 반환)
dividePerFpsObservable({fps, window}): Observable<number>Create Observable that emits at specified FPS지정된 FPS로 방출하는 Observable 생성

DocumentUtils

Document manipulation utilities

Document 조작 유틸리티

import { DocumentUtils } from '@dooboostore/core-web/document/DocumentUtils';

const elements = DocumentUtils.querySelectorAllByAttributeName(document, 'data-id');
const event$ = DocumentUtils.eventObservable(document, 'click');

OTHER FUNCTIONS기타 함수

querySelectorAllByAttributeName(document: Document | Element, attributeName: string): {element, value}[]Query all elements by attribute name속성 이름으로 모든 요소 쿼리
eventObservable<K>(document: Document, type: K, options?): Observable<Event>Create Observable from Document eventsDocument 이벤트에서 Observable 생성

LocationUtils

URL and location utilities

URL과 위치 유틸리티

import { LocationUtils } from '@dooboostore/core-web/location/LocationUtils';

const hash = LocationUtils.hash(window);
const params = LocationUtils.pathQueryParams(window);
const queryObj = LocationUtils.pathQueryParamsObject(window);

OTHER FUNCTIONS기타 함수

hash(window: Window): stringGet hash without # symbol# 기호 없이 해시 가져오기
hashPath(window: Window): stringGet hash path without query string쿼리 문자열 없이 해시 경로 가져오기
hashSearch(window: Window): stringGet hash query string해시 쿼리 문자열 가져오기
hashQueryParams(window: Window): Map<string, string>Get hash query params as Map해시 쿼리 파라미터를 Map으로 가져오기
hashQueryParamsObject(window: Window): {[key: string]: string}Get hash query params as object해시 쿼리 파라미터를 객체로 가져오기
path(window: Window): stringGet pathname경로명 가져오기
pathQueryParams(window: Window): Map<string, string>Get path query params as Map경로 쿼리 파라미터를 Map으로 가져오기
pathQueryParamsObject(window: Window): {[key: string]: string}Get path query params as object경로 쿼리 파라미터를 객체로 가져오기

ScriptUtils

Dynamic script loading utilities

동적 스크립트 로딩 유틸리티

import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';

const scriptUtils = new ScriptUtils();
await scriptUtils.loadScript('https://example.com/library.js');

OTHER FUNCTIONS기타 함수

loadScript(src: string): Promise<void>Dynamically load external script외부 스크립트 동적으로 로드

CanvasUtils

Canvas manipulation and drawing utilities

Canvas 조작 및 그리기 유틸리티

import { CanvasUtils } from '@dooboostore/core-web/element/CanvasUtils';

const ctx = canvas.getContext('2d');
CanvasUtils.Context2D.resetTransform(ctx);
const fontSize = CanvasUtils.fontSize(ctx, { text: 'Hello', maxWidth: 200, maxHeight: 50 });

OTHER FUNCTIONS기타 함수

Context2D.resetTransform(context: CanvasRenderingContext2D): voidReset canvas transformation matrix캔버스 변환 행렬 초기화
fontSize(ctx, config: {text, maxWidth, maxHeight, fontOption?}): numberCalculate optimal font size for text텍스트에 최적인 폰트 크기 계산
textMetrics(context: CanvasRenderingContext2D, text: string): TextMetricsGet text metrics텍스트 측정값 가져오기

ImageUtils

Image manipulation utilities

이미지 조작 유틸리티

import { ImageUtils } from '@dooboostore/core-web/image/ImageUtils';

// Image utilities for web platform
const imageData = ImageUtils.processImage(imageElement);

HttpDomParserFetcher

HTTP fetcher with DOM parsing capabilities

DOM 파싱 기능이 있는 HTTP fetcher

import { HttpDomParserFetcher } from '@dooboostore/core-web/fetch/HttpDomParserFetcher';

const fetcher = new HttpDomParserFetcher();
const dom = await fetcher.fetchAndParse('https://example.com');