실무개발·2025년 12월 24일
초기 로딩 속도 0.5초 빨라지면 매출이 10% 오른다 (번들 사이즈 다이어트)
기능 추가할 때마다 늘어나는 번들 사이즈, 그대로 두면 사용자는 떠납니다. Code Splitting, Tree Shaking, Dynamic Import로 JS 다이어트하는 실제 기법.
#Performance#Optimization#Webpack#Vite
개발과 기술에 대한 이야기를 기록합니다.
기능 추가할 때마다 늘어나는 번들 사이즈, 그대로 두면 사용자는 떠납니다. Code Splitting, Tree Shaking, Dynamic Import로 JS 다이어트하는 실제 기법.
`useEffect`와 `useState`로 범벅된 비대해진 컴포넌트. Custom Hook으로 로직을 분리하여 UI와 비즈니스 로직을 깔끔하게 나누는 실제 리팩토링 가이드.
API 요청 상태를 관리할 때 불리언 플래그 여러 개를 쓰시나요? 'impossible state(불가능한 상태)'를 방지하고, if 문 도배를 없애는 Discriminated Unions 패턴.
습관적으로 모든 변수에 `useMemo`를 감싸고 있나요? 그게 오히려 성능을 망치고 있습니다. 메모이제이션 비용과 올바른 최적화 타이밍.
전역 상태 관리를 위해 Redux 대신 Context API를 선택했습니다. 하지만 `UserContext`에 모든 정보를 담자마자 앱 전체가 리렌더링되기 시작했습니다. Context 분리(Splitting) 전략.
멋진 히어로 이미지를 `<img>` 태그로 넣었더니 LCP 점수가 빨간색입니다. Next.js의 `Image` 컴포넌트가 어떻게 이미지 사이즈, 포맷, 로딩 시점을 자동 최적화하는지, 그리고 `sizes` 속성의 비밀을 파헤쳐봤습니다.
`window.addEventListener('scroll')`로 무한 스크롤을 구현하면 성능이 박살 납니다. Intersection Observer API로 리팩토링하여 CPU 사용량을 90% 줄이는 방법.
TypeScript를 배우다 보면 만나는 `Function<T>`. 외계어 같던 제네릭을 '투명 스티커'와 '자판기' 비유로 완벽하게 이해하고, `any`와의 차이점을 정리해봤습니다.
빨간 줄을 없애려고 습관적으로 `as unknown as Type`을 쓰시나요? `as`가 사실 컴파일러의 눈을 가리는 행위인 이유와 Type Guard를 통한 올바른 해결법.
`npm install`을 했는데 모듈을 못 찾는다고 합니다. 로컬에선 되는데 CI에서만 터지는 이유와 `package.json`의 `exports`, 그리고 TypeScript 설정까지 완벽 분석.
서비스가 조금 잘 되나 싶더니 Supabase에서 경고 메일이 날아옵니다. 'Disk Full', 'CPU 100%'. 무료 플랜(Free Tier)의 진짜 한계와 업그레이드 없이 버티는 최적화 팁.
DB 컬럼을 추가했는데 프론트엔드에서는 여전히 에러가 납니다. `supabase gen types`의 작동 원리와 자동화된 타입 동기화 파이프라인 구축 방법을 정리해봤습니다.
팀원과 동시에 DB 스키마를 수정했더니 `supabase db push`가 실패합니다. 마이그레이션 파일 충돌 원인과 `migration repair` 명령어로 해결하는 방법을 정리해봤습니다.
로컬에선 잘 되는데 배포만 하면 500 에러? Node.js와 Edge Runtime의 차이부터 Import Map 설정까지, Supabase Edge Function 배포 성공을 위한 체크리스트.
채팅 기능을 만들었는데 DB가 업데이트되어도 프론트엔드는 조용합니다. Supabase Realtime 구독이 먹통일 때 확인해야 할 'Replication' 설정과 RLS 필터링에 대해 정리해봤습니다.
테이블 RLS는 켰는데, 스토리지 파일 업로드가 막힙니다. 'new row violates row-level security policy' 에러의 진짜 원인인 `storage.objects` 정책 설정법을 정리해봤습니다.
회원가입 버튼을 눌렀는데 메일이 안 옵니다. 스팸함에도 없습니다. Supabase 무료 SMTP의 한계와 Resend를 연동하여 이메일 전송 성공률을 99%로 높이는 방법을 정리해봤습니다.
TypeScript 타입 에러가 개발 중에는 보이는데 빌드할 때는 무시되는 문제와 해결 방법을 정리했습니다.
개발 중 CORS 에러를 프록시로 해결하는 방법과 주의사항을 정리했습니다.
TypeScript/JavaScript에서 절대 경로 import 설정이 안 될 때의 원인을 '지도와 택시 기사' 비유로 설명합니다. CJS vs ESM 역사적 배경과 모노레포 설정, 팀 컨벤션까지 총정리.
