Blog

개발 경험과 기술적인 고민들을 기록합니다.

태그로 필터링

Accessibility

Anthropic API

CS

CVA

Claude API

Claude Code

Cost Optimization

Deep Dive

Design System

Developer Tools

FSD

Frontend

Git

GitHub

Heuristics

History

Hooks

JavaScript

LLM

MathCanvas

Memoization

Meta Tooling

Metrics

Mobile

Next.js

Optimization

Performance

Product Design

React

Reconciliation

Refactoring

Supabase

System Design

TailwindCSS

Tip

Tutorial

TypeScript

UI/UX

UX

VS Code Extension

Vanilla JS

Virtual DOM

Vue

Web Accessibility

Web Development

axe-core

i18n

iframe

npm CLI

shadcn/ui

렌더링 최적화

성능 최적화

주니어 개발

회고

완성된 요리 말고 레시피만 보내자 — 학생 학습 기록 용량을 줄인 이야기

MathCanvas에서 학생의 조작 기록(런 히스토리)이 한 명당 3~5MB씩 서버로 나가고 있었다. 지금은 문제가 없지만 학급·학교가 겹치면 기가바이트가 될 수 있는 구조. 매번 전체를 복사하던 저장 방식을 '바뀐 것만 기록'으로 바꾸고, 3D 교구의 완성 데이터를 걷어내(레시피만 저장) 3.7MB를 9.3KB로 줄인 과정.

성능 최적화

주니어 개발

표준을 문서가 아니라 코드로 배포하기 — bumpist-code 개발기

규칙 문서는 아무도 안 읽는다. 그래서 프론트엔드 표준을 'Claude가 작업 전에 자동으로 읽고 실행하는 스킬'로 만들어 npx 한 줄로 배포했다. submodule → copy → npm CLI 로 세 번 갈아탄 배포 방식 고민과, E403·E404·E401 을 오가던 npm 인증 지옥까지.

Developer Tools

Web Accessibility

누적 토큰에서 회당 평균으로 — 메트릭의 정의가 기능보다 중요했던 순간

Claude Code Skills Panel 의 토큰 추적 기능은 v0.40 에서 도입됐지만 진짜 가치를 낸 건 v0.44.6 에서 메트릭을 다시 정의한 순간이었다. 같은 데이터, 같은 코드, 완전히 다른 사용자 인지.

VS Code Extension

Claude Code 슬래시 커맨드 30개를 외우다가 결국 도구를 만들었다 — Claude Code Skills Panel 개발기

기억할 커맨드가 30개를 넘어가면서 시작된 페인 포인트. 7일 만에 v0.20에서 v0.44.6까지 45개 릴리즈를 거치며 4개 IDE · 4개 언어로 배포한 1인 사이드 프로젝트의 압축 사이클.

VS Code Extension

Developer Tools

세션당 LLM 비용을 ~10× 줄인 4단 게이트 — claude-distill 의 비용 모델 설계

매 세션 자동 실행되는 Stop hook 의 비용 부담을 4단 게이트(재귀 가드 → dedup → 휴리스틱 → Haiku)로 사전 차단. 본 추출 호출 비율을 ~10% 로 줄여 세션당 평균 비용을 ~$0 가까이 만든 설계.

Cost Optimization