기술적 실험, 문제 해결, 구현 과정
Privy로 구글 로그인 기반 지갑을 만들고, Supabase 닉네임 매핑과 Base Sepolia로 실제 송금까지 구현한 과정
@next/bundle-analyzer로 병목을 찾고, dynamic import와 이미지 lazy loading으로 주요 페이지 번들을 최대 54% 줄인 과정을 정리했다.
도면 목록/상세 모달 작업 중 발생한 간헐적 렉을 추적한 결과, 앱 로직이 아니라 Chrome DevTools(Network 탭) 관찰 오버헤드가 원인이었던 과정을 정리했다.
Web3 송금 UX의 문제를 토스에서 영감받아 해결하려 한 이야기. 기획부터 기술 선택까지.
삭제 API처럼 data가 빈 객체로 고정될 때 object, {}, Record<string, never> 중 무엇을 선택해야 하는지 실무 기준으로 정리
드래그 중 간헐적으로 발생한 Maximum update depth exceeded 에러를 추적하며, 고빈도 이벤트와 상태 동기화 타이밍 문제를 rAF(requestAnimationFrame) 기반으로 정리한 경험을 기록했다.
첫 저장 직후 위치가 틀어지고 두 번째부터 정상 동작하던 버그를 추적한 결과, 좌표 포맷 문제가 아니라 tempId -> realId 매핑 누락이 원인이었다.
Vercel Pro 구독 후 빌드 시간이 빠르게 소진되길래 원인을 파악하고, Preview 빌드를 필요할 때만 수동으로 띄우는 방식으로 바꿨다. Alias로 고정 도메인까지 만들어서 백엔드 협업도 편해졌다.
Closure의 개념, 목적(변수 은닉, 반복문 변수 캡처), IIFE 패턴, 그리고 사용 시 주의사항을 정리했다.
React Element의 개념, DOM 렌더링 과정, 그리고 업데이트 방식을 정리했다.
Next.js App Router와 MDX를 활용해 정적 블로그를 구축한 과정을 정리했다.