최신 포스트
배운 것과 시행착오를 꾸준히 기록합니다.
Development
어댑터 패턴 실전: 프론트엔드에서 실제로 써먹는 방법
API 스키마 변경, v1/v2 동시 지원, 외부 SDK 교체, 런타임 검증까지 프론트엔드에서 어댑터를 실제로 어디에 두고 어떻게 테스트하고 언제 걷어내는지 코드로 정리합니다.
#Adapter Pattern#Design Pattern#TypeScript+5
Frontend
Query String의 트레이드오프: URL에 상태를 담을 때 치르는 성능 비용
query string으로 상태를 관리하면 공유와 복원은 좋아지지만 리렌더 범위, 히스토리 오염, 캐시 파편화, 정적 최적화 손실 같은 비용이 따라옵니다. 각 비용의 원인과 처방을 코드와 함께 정리합니다.
#Query String#URL 상태 관리#Next.js+5
Frontend
메모이제이션을 남발하면 안 되는 이유와 큰 컴포넌트를 최적화하는 방법
useMemo와 useCallback을 습관적으로 붙이면 왜 대부분 효과가 없는지, 메모이제이션의 실제 비용은 무엇인지, 그리고 큰 컴포넌트는 메모이제이션 대신 어떤 구조로 풀어야 하는지 정리합니다.
#React#Performance#메모이제이션+4
Frontend
React 컴포넌트의 Render와 Commit은 정확히 무엇이 다를까
React의 업데이트가 Trigger, Render, Commit 세 단계로 나뉘는 이유와 useLayoutEffect·useEffect 타이밍, 브라우저 paint와의 경계, 성능 진단에서 이 구분이 왜 필요한지 정리합니다.
#React#Render Phase#Commit Phase+5