기술노트

나중에 JS로 추가한 버튼에 addEventListener가 안 먹는 이유와, 부모에 한 번만 걸어 모두 처리하는 이벤트 위임 패턴을 정리한다.

같은 사진을 JPEG 대신 WebP·AVIF로 바꾸면 용량이 절반 이하다. 포맷별 차이, picture 태그로 안전하게 폴백하는 법, 실무 선택 기준.

Seq Scan·Nested Loop·actual time·rows 추정 오차. EXPLAIN ANALYZE에서 진짜 병목을 찾는 읽기 순서.

복합 인덱스 (a,b)는 a로 시작하는 조건엔 쓰이지만 b만으론 못 탄다. 등호·범위·정렬을 고려한 순서 설계.

풀을 무작정 키우면 DB가 컨텍스트 스위칭으로 더 느려진다. 코어 수 기반 공식과 서버리스 환경의 함정.

"캐시 무효화는 컴퓨터과학 2대 난제." TTL·쓰기 시 무효화·캐시 스탬피드·일관성 트레이드오프를 실무 기준으로.

목록 1번 + 각 항목마다 1번씩 쿼리가 나가는 N+1은 성능 킬러다. eager loading·조인·in 절·DataLoader로 한 방에 줄인다.

인덱스가 있어도 Seq Scan을 하는 건 이유가 있다. 함수 가공·형변환·낮은 선택도·통계 부재 등 원인을 EXPLAIN으로 짚는다.

시간이 지날수록 메모리가 계속 오른다면 누수다. 전역 캐시·이벤트 리스너·클로저가 단골 범인. 힙 스냅샷 비교로 추적.

offset/limit은 구현이 쉽지만 뒤로 갈수록 느리고 데이터가 밀린다. 무한 스크롤·대용량엔 cursor 기반이 정답.

둘 다 호출 빈도를 줄이지만 목적이 다르다. 검색 자동완성은 debounce, 스크롤·리사이즈는 throttle. 차이와 구현.

next/image는 자동 리사이즈·포맷 변환·lazy·CLS 방지를 준다. 하지만 외부 도메인·정적 export·단순 아이콘엔 오히려 부담일 수 있다.