hsb.horse
Snippets
스니펫
짧은 코드 조각과 실행 메모를 빠르게 재사용할 수 있게 정리한 목록입니다.
스니펫 태그- 이미지 확장자 정규식
파일명에서 이미지 형식을 판별하는 JavaScript/TypeScript 정규식 패턴. png, webp, jpg, jpeg, avif, gif 지원.
- SHA256 동기 구현 (WebCrypto API 비의존)
WebCrypto API를 사용하지 않는 순수 JavaScript SHA256 구현. Web Workers 등에서 crypto 객체를 사용할 수 없는 환경용.
- TransformStream으로 텍스트 분할 처리
ReadableStream과 TransformStream을 사용하여 긴 텍스트를 지정된 크기의 청크로 분할하는 TypeScript 구현 예제.
- TypeScript Non-null Assertion
undefined와 null을 제거하는 TypeScript 타입 가드 함수. 런타임 오류와 타입 안정성을 모두 보장한다.
- Uint32Array 헬퍼 함수
`new Uint32Array` 호출을 간결하게 만드는 TypeScript 래퍼 함수입니다. 오버로드를 사용하여 생성자의 모든 인터페이스를 지원합니다.
- Uint8Array 헬퍼 함수
new Uint8Array 호출을 간결하게 만드는 TypeScript 래퍼 함수. 배열, ArrayBuffer, 길이 지정의 모든 패턴을 지원합니다.
- Uint8Array 합치기
여러 개의 Uint8Array를 하나로 병합하는 TypeScript 함수입니다. 바이너리 데이터 결합에 유용합니다.
- CloudFormation 템플릿에서 parameter.json 생성하기
aws cloudformation validate-template 과 jq 를 조합하여, 환경 변수를 반영한 parameters.json 을 자동 생성하는 스니펫.
- CSS href 속성 선택자 사용법
a 요소의 href 속성에 대해 전방 일치·후방 일치·부분 일치 등의 속성 선택자를 사용하는 CSS 스니펫.
- File System API 권한 확인
브라우저 File System API 권한을 확인하고 요청하는 함수. 읽기 전용과 읽기/쓰기 모드를 모두 지원합니다.
- TypeScript 배열 유틸리티
TypeScript 개발에서 자주 쓰는 배열 연산을 위한 타입 안전 유틸리티 모음. 빈 배열 생성, 청킹, null 필터링, 셔플을 다룹니다.
- React useSelection Hook
여러 항목 선택 상태를 관리하는 React 커스텀 훅. 전체 선택, 부분 선택, 개별 선택을 타입 안전하게 처리합니다.
- avifenc으로 이미지를 일괄 AVIF로 변환하기
jpg/jpeg/png 를 재귀적으로 탐색하여 avifenc 으로 .avif 로 변환하는 Bash 스니펫.
- 동적 import 캐싱
동적 import를 캐싱하는 가벼운 TypeScript 구현. 같은 경로에 대한 여러 import를 하나의 Promise로 처리합니다.
- Finder에서 저장 용량 표시
macOS Finder에서 키보드 단축키로 저장 용량 표시를 전환합니다.
- Node.js 파일 여부 확인
Node.js에서 경로가 파일인지 확인하는 Promise 기반 함수. 에러 시 false를 반환합니다.
- TypeScript p-limit 구현
Promise 동시성을 제어하는 p-limit의 TypeScript 재구현. 의존성을 추가하지 않고 동시성 제어를 구현합니다.
- TypeScript yocto-queue 구현
가벼운 큐 라이브러리 yocto-queue의 TypeScript 재구현. enqueue, dequeue, iterator 같은 기본 연산을 제공합니다.
- 빌드 타임 메시지 ID 해시 스토어
빌드 타임에 메시지 ID와 컨텍스트를 해싱하여 단축·정규화하는 TypeScript 함수. 번역 키에 문자 제한이 있는 플랫폼에서 유용하다.
- Bulk Import with Fallback from Pairwise COPY to Individual Inserts
대량 관계 데이터를 먼저 bulk import하고, 스키마 제약 조건에 맞지 않는 행만 개별 insert로 처리하여 속도와 성공률을 모두 달성하는 패턴입니다.
- 캐시 우선, 라이브 페치 오케스트레이션 패턴
캐시의 빠른 경로와 원격의 느린 경로를 조합한 오케스트레이션. 캐시 히트/미스, 레이턴시, 최종 결과를 메트릭으로 계측하고, 부작용은 외부에 위임한다.
- 네이티브 UI 요소를 복제하여 스타일 상속하기
cloneNode로 호스트 앱의 기존 버튼을 복제한 후 아이콘과 텍스트만 교체하여 시각적 일관성을 유지하는 경량 패턴. 난독화된 CSS와 싸울 필요 없음.
- dataset를 이용한 멱등 DOM 옵저버 설정
data 속성을 사용해 MutationObserver 중복 등록을 방지하는 간단한 패턴. 전역 레지스트리 불필요, 이식성이 높다.
- 엔티티 내장 쿨다운 경고 억제
반복 경고 억제 로직을 쿼터 엔티티 자체에 내장하는 패턴. 속도 제한 알림이나 과금 경고와 같은 빈번한 경고를 적절히 제어합니다.
- Go 데이터 타입별 메모리 크기
Go의 각 데이터 타입이 차지하는 메모리 크기 목록과 메모리 효율적인 코딩을 위한 실용적인 팁.
- 계층적 DOM 관찰 전략
앱이 준비되면 세밀한 옵저버로 단계적으로 전환하는 패턴. SPA 콘텐츠 스크립트와 서드파티 DOM 통합에 폭넓게 응용할 수 있다.
- 프로퍼티 추출 헬퍼 함수
객체에서 지정된 프로퍼티만 추출하는 함수를 생성합니다. 중첩된 mapBy와 배열 변환에서 타입 안전한 프로퍼티 추출을 한 줄로 작성할 수 있습니다.
- 바이트 예산이 있는 2단계 저장소 워크
path/size 스캔 → 구조 분석 → 필요한 청크만 읽기 → 파싱 순서로 분리하여 대규모 저장소에서도 메모리 제한을 제어하기 쉽게 만드는 설계 패턴.
- 서브 배치와 배치별 타임아웃을 갖춘 워커 풀
대량 데이터를 작은 서브 배치로 나눠 워커에 전송하여 메모리 압박을 줄이고 각 배치에 타임아웃을 설정해 이상을 조기 감지하는 패턴.
- Biome npm-scripts 설정
Biome 도입 시 설정하는 npm-scripts의 정석 패턴. lint와 format을 check 명령어로 실행한다.
- 지연 초기화 객체
getter를 사용해 첫 접근 시에만 값을 생성하는 TypeScript 패턴. 메모리 캐시보다 경량인 지연 평가.
- man 페이지를 텍스트 파일로 저장
macOS/Linux에서 man 명령어의 출력을 파일에 저장하는 방법. col -b로 제어 문자를 제거하여 가독성 있는 텍스트를 만든다.
- npm에서 tarball 다운로드
npm pack와 pnpm info를 사용해 npm 패키지의 tarball(.tgz)을 다운로드하는 방법. npm, yarn, pnpm 각각의 방법을 소개.
- 시간 기반 시맨틱 버전 생성
빌드 시각을 버전 번호로 자동 생성하는 TypeScript 함수. Chrome 확장 프로그램 등에서 버전 상한이 있는 경우에 유용함.
- TypeScript에서 경량 Result 타입 구현
try-catch를 사용하지 않는 에러 핸들링 패턴. data와 error를 분리한 Result 타입으로 타입 안전하게 에러를 처리한다.
- crypto.randomUUID의 Polyfill
crypto.randomUUID 함수의 폴리필 구현. 모든 브라우저에서 지원되므로 새로 구현할 필요는 없지만, UUID v4의 작동 원리를 배우기 위한 참고 자료로 유용하다.
- gzip 커맨드 치트시트
파일 압축·압축 해제·옵션 지정 등, gzip 커맨드의 기본적인 사용법을 정리한 스니펫.