hsb.horse
Tags
#typescript
태그 "typescript"가 붙은 콘텐츠 목록입니다.
- 용어집Biome
Biome는 JavaScript/TypeScript용 Rust 기반 포매터 겸 린터로, 코드 정렬과 정적 분석을 하나로 묶는다.
- 스니펫File System API 권한 확인
브라우저 File System API 권한을 확인하고 요청하는 함수. 읽기 전용과 읽기/쓰기 모드를 모두 지원합니다.
- 스니펫Node.js 파일 여부 확인
Node.js에서 경로가 파일인지 확인하는 Promise 기반 함수. 에러 시 false를 반환합니다.
- 스니펫React useSelection Hook
여러 항목 선택 상태를 관리하는 React 커스텀 훅. 전체 선택, 부분 선택, 개별 선택을 타입 안전하게 처리합니다.
- 스니펫SHA256 동기 구현 (WebCrypto API 비의존)
WebCrypto API를 사용하지 않는 순수 JavaScript SHA256 구현. Web Workers 등에서 crypto 객체를 사용할 수 없는 환경용.
- 스니펫TransformStream으로 텍스트 분할 처리
ReadableStream과 TransformStream을 사용하여 긴 텍스트를 지정된 크기의 청크로 분할하는 TypeScript 구현 예제.
- 스니펫TypeScript Non-null Assertion
undefined와 null을 제거하는 TypeScript 타입 가드 함수. 런타임 오류와 타입 안정성을 모두 보장한다.
- 스니펫TypeScript p-limit 구현
Promise 동시성을 제어하는 p-limit의 TypeScript 재구현. 의존성을 추가하지 않고 동시성 제어를 구현합니다.
- 스니펫TypeScript yocto-queue 구현
가벼운 큐 라이브러리 yocto-queue의 TypeScript 재구현. enqueue, dequeue, iterator 같은 기본 연산을 제공합니다.
- 스니펫TypeScript 배열 유틸리티
TypeScript 개발에서 자주 쓰는 배열 연산을 위한 타입 안전 유틸리티 모음. 빈 배열 생성, 청킹, null 필터링, 셔플을 다룹니다.
- 스니펫Uint32Array 헬퍼 함수
`new Uint32Array` 호출을 간결하게 만드는 TypeScript 래퍼 함수입니다. 오버로드를 사용하여 생성자의 모든 인터페이스를 지원합니다.
- 스니펫Uint8Array 합치기
여러 개의 Uint8Array를 하나로 병합하는 TypeScript 함수입니다. 바이너리 데이터 결합에 유용합니다.
- 스니펫Uint8Array 헬퍼 함수
new Uint8Array 호출을 간결하게 만드는 TypeScript 래퍼 함수. 배열, ArrayBuffer, 길이 지정의 모든 패턴을 지원합니다.
- 스니펫동적 import 캐싱
동적 import를 캐싱하는 가벼운 TypeScript 구현. 같은 경로에 대한 여러 import를 하나의 Promise로 처리합니다.
- 스니펫이미지 확장자 정규식
파일명에서 이미지 형식을 판별하는 JavaScript/TypeScript 정규식 패턴. png, webp, jpg, jpeg, avif, gif 지원.
- 스니펫Bulk Import with Fallback from Pairwise COPY to Individual Inserts
대량 관계 데이터를 먼저 bulk import하고, 스키마 제약 조건에 맞지 않는 행만 개별 insert로 처리하여 속도와 성공률을 모두 달성하는 패턴입니다.
- 스니펫dataset를 이용한 멱등 DOM 옵저버 설정
data 속성을 사용해 MutationObserver 중복 등록을 방지하는 간단한 패턴. 전역 레지스트리 불필요, 이식성이 높다.
- 스니펫계층적 DOM 관찰 전략
앱이 준비되면 세밀한 옵저버로 단계적으로 전환하는 패턴. SPA 콘텐츠 스크립트와 서드파티 DOM 통합에 폭넓게 응용할 수 있다.
- 스니펫네이티브 UI 요소를 복제하여 스타일 상속하기
cloneNode로 호스트 앱의 기존 버튼을 복제한 후 아이콘과 텍스트만 교체하여 시각적 일관성을 유지하는 경량 패턴. 난독화된 CSS와 싸울 필요 없음.
- 스니펫바이트 예산이 있는 2단계 저장소 워크
path/size 스캔 → 구조 분석 → 필요한 청크만 읽기 → 파싱 순서로 분리하여 대규모 저장소에서도 메모리 제한을 제어하기 쉽게 만드는 설계 패턴.
- 스니펫빌드 타임 메시지 ID 해시 스토어
빌드 타임에 메시지 ID와 컨텍스트를 해싱하여 단축·정규화하는 TypeScript 함수. 번역 키에 문자 제한이 있는 플랫폼에서 유용하다.
- 스니펫서브 배치와 배치별 타임아웃을 갖춘 워커 풀
대량 데이터를 작은 서브 배치로 나눠 워커에 전송하여 메모리 압박을 줄이고 각 배치에 타임아웃을 설정해 이상을 조기 감지하는 패턴.
- 스니펫엔티티 내장 쿨다운 경고 억제
반복 경고 억제 로직을 쿼터 엔티티 자체에 내장하는 패턴. 속도 제한 알림이나 과금 경고와 같은 빈번한 경고를 적절히 제어합니다.
- 스니펫캐시 우선, 라이브 페치 오케스트레이션 패턴
캐시의 빠른 경로와 원격의 느린 경로를 조합한 오케스트레이션. 캐시 히트/미스, 레이턴시, 최종 결과를 메트릭으로 계측하고, 부작용은 외부에 위임한다.
- 스니펫프로퍼티 추출 헬퍼 함수
객체에서 지정된 프로퍼티만 추출하는 함수를 생성합니다. 중첩된 mapBy와 배열 변환에서 타입 안전한 프로퍼티 추출을 한 줄로 작성할 수 있습니다.
- 블로그TypeScript Monorepo 최적해를 정리하는 2026년판
pnpm workspace, Turborepo, TypeScript Project References, Biome, WXT의 역할을 정리해, 범용의 무난해와 4 패키지 구성으로의 실무해를 나누어 정리했다.
- 블로그@hsblabs/web-stream-extras를 출시했다
브라우저와 Node.js에서 ReadableStream<Uint8Array> 를 다루기 위한 작은 TypeScript 유틸리티 라이브러리. 바이트 변환 헬퍼, 트랜스폼 스트림, Web Crypto API 기반 스트림 암호화까지 포함한다.
- 블로그Web Crypto로 브라우저에서 바이트 스트림 암호화하기
Web Crypto는 강력한 암호 프리미티브를 제공하지만 스트림용 인터페이스는 없다. @hsblabs/web-stream-extras 의 encryption 서브패스로 ReadableStream<Uint8Array> 를 암호화하는 방법, 파일 암호화, 스트림별 키 관리, 파이프라인 합성까지 정리한다.
- 블로그같은 Web Streams 보일러플레이트를 계속 쓰는 데 지쳤다
ReadableStream<Uint8Array> 유틸리티를 반복해서 다시 작성하다가 @hsblabs/web-stream-extras로 묶게 된 이유. 계속 반복되던 세 가지 패턴, ByteTransformStream 기반 클래스, Web Crypto 기반 스트림 암호화까지 정리한다.
- 블로그Astro 프로젝트에 개발 전용 Live 에디터 구현하기
Astro에서 개발 모드 전용 브라우저 에디터를 구현하는 방법. Vite 미들웨어와 React를 사용하여 프로덕션 빌드에 전혀 영향을 주지 않으면서 개발 중 콘텐츠 관리를 편리하게 만드는 절차를 정리.
- 스니펫crypto.randomUUID의 Polyfill
crypto.randomUUID 함수의 폴리필 구현. 모든 브라우저에서 지원되므로 새로 구현할 필요는 없지만, UUID v4의 작동 원리를 배우기 위한 참고 자료로 유용하다.
- 스니펫TypeScript에서 경량 Result 타입 구현
try-catch를 사용하지 않는 에러 핸들링 패턴. data와 error를 분리한 Result 타입으로 타입 안전하게 에러를 처리한다.
- 스니펫시간 기반 시맨틱 버전 생성
빌드 시각을 버전 번호로 자동 생성하는 TypeScript 함수. Chrome 확장 프로그램 등에서 버전 상한이 있는 경우에 유용함.
- 스니펫지연 초기화 객체
getter를 사용해 첫 접근 시에만 값을 생성하는 TypeScript 패턴. 메모리 캐시보다 경량인 지연 평가.
- 블로그TypeScript에서 CRC32 해시 구현
CRC32 해시 알고리즘을 TypeScript로 구현하는 순서. 룩업 테이블을 사용한 고속화 기법과 실제 사용 예를 정리.
- 블로그TransformStream으로 줄 단위 텍스트 분할 구현하기: LineSplitTransform
스트림에서 받은 바이너리 데이터를 줄 단위로 분할하는 TransformStream 구현. 로그 파일과 텍스트 스트림의 점진 처리에 유용하다.
- 블로그값을 ReadableStream으로 변환하는 TypeScript 유틸리티 함수
String이나 객체 등을 ReadableStream으로 변환하는 유틸리티 함수. Blob을 거치지 않고 임의 타입으로 스트림을 다루는 구현을 정리했다.
- 블로그TypeScript에서 CIDR 범위의 IP 주소 결정 구현
CloudFront Function 등 외부 모듈을 사용할 수 없는 환경용으로 CIDR 범위 내의 IP 주소 판정을 자체 구현. 비트 연산을 사용한 클래스 구문의 구현을 정리.
- 블로그generate-project-summary.py를 Bun + TypeScript로 다시 구현한 이야기
Python으로 작성된 프로젝트 구조 요약 스크립트를 Bun + TypeScript로 다시 구현했다. 저장소 전체를 LLM에 읽히기 위한 실행 파일 설계와 구현을 정리한다.
- 블로그해상도로 미디어 파일을 정렬하는 TypeScript 구현
영상이나 이미지를 해상도(너비 × 높이) 기준으로 정렬하는 간결한 TypeScript 구현. Twitter 미디어 정렬에 활용할 수 있다.
- 블로그TypeScript로 로토6·로토7 추첨 숫자 생성하기
메르센 트위스터를 사용해 로토6·로토7 번호를 생성하는 TypeScript 구현. 의사난수 생성기의 실전 예시.
- 블로그IAM 인증이 켜진 API Gateway에 TypeScript로 요청하기
AWS SDK for JavaScript의 SigV4를 사용해 로컬 환경의 TypeScript 코드에서 IAM 인증이 적용된 API Gateway로 요청을 보내는 구현 방법.
- 블로그HTMLVideoElement에서 이미지를 생성하는 TypeScript 구현
Canvas와 VideoElement를 사용하여 동영상의 현재 프레임을 이미지로 추출하는 TypeScript 구현. Promise 기반으로 blob 생성하는 방법을 정리.
- 블로그이체 문자 선택기를 사용한 Steganography의 TypeScript 구현
Unicode의 이체자 셀렉터를 활용해, 외형에는 보이지 않는 비밀의 캐릭터 라인을 텍스트에 임베드하는 스테가노그래피 기법의 TypeScript 구현.
- 블로그처음 만드는 Vite 플러그인 구현: 빌드 메타데이터 자동 생성
Vite Plugin API를 사용해 Vite 빌드 라이프사이클에 커스텀 처리를 끼워 넣는 방법. 시간 기반 시맨틱 버전을 생성하는 플러그인 구현으로 정리했다.
- 블로그Twitter 동영상 URL에서 크기 정보를 추출하는 TypeScript 구현
Twitter(X) 동영상 URL에 포함된 해상도 정보를 정규표현식으로 추출하는 TypeScript 구현. URL 패턴과 크기 추출 방법을 정리했다.