All Posts

이벤트 타입에 따라 payload 가 필수이기도, 아예 없어야 하기도 한 함수. 옵셔널 인자(?)로는 이걸 표현할 수 없다. Matt Pocock 의 영상을 보고 제네릭 + 조건부 타입 + named tuple 로 함수 시그니처 자체를 동적으로 바꾸는 패턴을 정리했다.

두 텍스트를 비교하는 PegDiff 를 짰다. 핵심은 diff 알고리즘을 한 줄도 안 짰다는 것 — diff·diff-match-patch 같은 라이브러리도 안 썼다. 비교 자체는 Monaco 의 DiffEditor 에 통째로 위임하고, 내가 짠 코드는 전부 diff *바깥*에 있다: 청크 네비게이션, 추가/삭제 통계, localStorage 영속, 그리고 Monaco 위젯을 깔끔하게 떼어내는 두 개의 war story.

예전에 nostrss.me에 JS 플레이그라운드를 한 번 짰었다. 이번엔 Pegboard의 peg-app으로 다시 짜면서 — 같은 iframe 샌드박스 뼈대인데도 광고·공유 localStorage·스모크 게이트·GA4·타입 진단이라는 제약이 실행 엔진, 에디터 선택, 공유 방식을 전부 다시 그었다. PegCode(ADR-0014) 구현 기록.

Excalidraw 기반 화이트보드 PegDraw 를 정적 export 페그보드에 심은 이야기. SSR 끄고 lazy-load 하는 건 시작일 뿐이고, 진짜 디테일은 모듈 스코프의 비대칭(asset path는 되는데 IndexedDB는 안 되는 이유), localStorage 대신 IndexedDB 를 고른 이유, 그리고 순수 코덱과 I/O 스토리지를 갈라놓은 구조에 있었다.

정적 export(SSG) 위에서 드래그앤드롭 칸반 보드 PegKanban을 구현하면서 마주친 두 가지 비-자명한 디테일을 정리한다. (1) DndContext에 id를 박지 않으면 next dev에서만 드러나고 정적 빌드에선 잠복하는 하이드레이션 불일치, (2) localStorage 키 하나를 데이터 계약으로 삼아 오프라인 AI 채팅이 자연어로 보드를 조작하게 만든 경로. 코드를 읽으며 결정과 트레이드오프를 풀어쓴다.