/BLOG · 2026 • 8 POSTS NOTES ON DEFINING PROBLEMS

Pick a
thread.

어려운 부분을 어떻게 정의했는지에 대한 노트. 캔버스·성능·상태·마이그레이션 — 실무에서 부딪힌 결정을 글로 남깁니다.

# Canvas 1

★ 라이브러리 한계를 만났을 때 — SVG 아핀 변환으로 무한 캔버스 만들기

react-zoom-pan-pinch의 캔버스 크기 제한에 부딪힌 날, viewBox와 3×3 행렬로 처음부터 다시 설계한 이야기. 60fps를 유지하기 위한 trade-off들.

# React 1

비동기 응답이 화면을 덮어쓸 때 — 자체 캐시 훅 설계기

탭/필터를 빠르게 누르면 늦은 응답이 최신 화면을 덮어쓰는 race condition. Closure + Map + Symbol 토큰으로 in-flight 식별하는 훅을 만들었다.

# Performance 1

Lighthouse 52점에서 87점까지 — 번들을 반으로 깎는 4단계

측정 → 진단 → 동적 임포트 → 폰트 서브셋. 추측하지 않고 숫자로 푸는 성능 개선의 한 사례.

# Migration 1

ASP.NET 레거시를 6주에 Next.js로 — 기능 삭제 없이

흰 화면 깜빡임 없는 SPA로 옮기되 기존 동작은 100% 유지. 페이지 단위 우선순위와 위험 관리, 그리고 마이그레이션의 사회학.

# State 2

도메인마다 같은 필터 로직을 다시 쓰지 않기 — Zustand 팩토리

Admin에서 반복되는 필터 store를 제네릭 팩토리로 추상화. 도메인은 타입 인자로만, 액션과 selector는 자동으로.

7 min →2025.11.18

결제 플로우를 상태머신으로 모델링하기

Stripe 결제는 happy path만 다루면 안 된다. 취소·실패·중단·중복 경로를 명시적으로 다루는 단계별 상태 설계.

# Animation 1

GSAP를 SPA에서 안전하게 — context().revert() 패턴

라우팅마다 새로 mount되는 GSAP 애니메이션은 메모리 누수의 단골 손님. context로 묶고, unmount 시 revert.

# Editor 1

TipTap에 12개의 커스텀 확장을 얹기

Admin CMS 에디터에서 필요한 커스텀 노드 / 마크 / 명령어들. ProseMirror 모델을 이해하는 데 도움된 멘탈 모델 정리.