패키지 목록
예전에 쓰던 코드를 모아 둔 40개 패키지
React 컴포넌트·훅
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| audio-components | sync-store 기반 오디오 플레이어 컴포넌트와 상태 | 브라우저 |
| checkbox-group | 선택 상태를 제출 시점에만 올려보내는 체크박스 그룹 컴포넌트 | 브라우저 |
| in-view | IntersectionObserver 기반 뷰포트 진입 감지 컴포넌트와 훅 | 브라우저 |
| is-overflowing | 엘리먼트 내용의 가로/세로 오버플로우 감지 훅 | 브라우저 |
| pagination | Instance Hook 패턴 기반 React 페이지네이션 | 브라우저 |
| query-view | TanStack Query 상태 매트릭스를 뷰 슬롯으로 투영하는 레이어 | 브라우저 |
| reset-boundary | deps 변경 시 key 기반 remount로 상태를 초기화하는 컴포넌트 | 브라우저 |
| with-defaults | 컴포넌트에 기본 props를 미리 채워 선택 prop으로 만드는 HOC | 범용 |
DOM·CSS 브라우저 API
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| highlight-kit | CSS Custom Highlight API 기반 텍스트 하이라이트 core와 React 어댑터 | 브라우저 |
| intl-layer | 브라우저 Intl API를 위한 locale 결정·포맷터 레이어 | 브라우저 |
| scope-style | CSS @scope + @layer로 컴포넌트 서브트리에 스타일을 한정 | 브라우저 |
| scroll-end | 네이티브 scrollend 이벤트 기반 스크롤 종료·sticky 감지 훅 | 브라우저 |
| scroll-spy | scroll-target-group과 IntersectionObserver 폴백 기반 scroll-spy | 브라우저 |
상태·저장소
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| local-storage-manager | 타입 안전한 localStorage 관리 유틸리티 | 브라우저 |
| sync-store | framework-agnostic 싱글턴 store와 useSyncExternalStore 바인딩 | 범용 |
| use-like-store | sync-store 기반 찜 목록 store와 React 훅 | 브라우저 |
비동기·서버
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| airtable | Effect 기반 Airtable API 클라이언트 | 범용 |
| async-context | AsyncLocalStorage 기반 타입 안전 컨텍스트와 Next.js route 래퍼 | Node |
| cors-image-proxy | open proxy를 막는 cross-origin 이미지 CORS 프록시 핸들러 | Edge, Node |
| iterate-paginated | 페이지네이션 API를 아이템 단위 async iterable로 평탄화 | 범용 |
| rw-lock | single-threaded async 환경을 위한 Readers–Writer Lock | 범용 |
인증·신원
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| authorization | 표준 Request/Response 기반 HTTP Basic 인증 전략 | 범용 |
| web-identity | Passkeys·FedCM·Digital Credentials·DBSC 등 Web Identity API 통합 | 브라우저 |
이미지·미디어
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| fast-draw-image | Canvas용 논블로킹 크로스브라우저 이미지 렌더링 | 브라우저 |
| get-file-type-from-buffer | 매직 넘버로 버퍼의 파일 형식을 판별 (Effect) | Node |
| heif | 브라우저에서 HEIC/HEIF를 JPEG·PNG·WebP로 변환 | 브라우저 |
| image-first-frame | 애니메이션 이미지(GIF·WebP·APNG)의 첫 프레임을 Blob으로 추출 | 브라우저 |
| logo-soup-utils | 로고들을 지각적으로 같은 크기로 맞추는 정규화 알고리즘 | 범용 |
| save-image | Effect 기반 이미지 다운로드 후 형식을 판별해 저장 | Node |
| vtt-to-json | WebVTT 자막을 중복 제거된 cue 배열로 파싱 | 범용 |
날짜·포맷 유틸
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| dayjs-utils | dayjs 기반 시간대 판정(TimeRange)과 날짜 커서(DateNavigator) | 범용 |
| lane-assignment | 캘린더에서 겹치는 이벤트를 레인(행)에 배치하는 알고리즘 | 범용 |
| utils | 난수·휴대폰 번호 파싱·시간 포맷 등 작은 유틸 | 범용 |
개발 도구
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| box-sizing-audit | content-box → border-box 마이그레이션 토글-비교 감사 도구 (Playwright) | Node |
| msw-devtools | MSW 핸들러 응답을 런타임에 조작하는 devtools 패널 | 브라우저, Node |
Lab (도메인 모델·게임)
| 패키지 | 설명 | 실행 환경 |
|---|---|---|
| mole | 두더지 잡기 게임 엔진 (스포너·타이머·점수·랭킹) | 범용 |
| shopping | XState 기반 장바구니·쿠폰·주문 도메인 모델 | 범용 |
| stacked-pr | gh stack을 인메모리 자료구조로 모델링한 Stacked PR 구현 | 범용 |
| sudoku | 스도쿠 퍼즐 생성·풀이·게임 엔진 | 범용 |
| wordle | 워들 게임 로직·공유 코드 인코딩·타이머 | 범용 |