느린 화면은
기능이 아무리 좋아도 안 씁니다

일하는 방식

트러블슈팅 기록

1. N+1 쿼리 — 목록 1건에 쿼리 41번문제: 주문 목록 20건을 부르는데 SELECT가 41번 나갔습니다.접근: 지연 로딩된 연관 엔티티를 JOIN FETCH로 한 번에 가져오도록 바꿨습니다.결과: 41 → 2 쿼리, 목록 응답 780ms → 120ms.
2. 이미지 디코딩이 메인 스레드를 잡음문제: 목록을 빠르게 내리면 프레임이 12%까지 떨어졌습니다.접근: 디코딩을 워커로 옮기고 화면 밖 이미지는 미리 만들지 않게 했습니다.결과: 프레임 드랍 12% → 0.4%, 저가형 기기에서도 60fps 유지.
3. 폰트 때문에 첫 화면이 1.9초 늦음문제: 웹폰트 4종을 모두 받고 나서야 글자가 보였습니다.접근: 실제 쓰는 글리프만 서브셋하고 fallback을 먼저 그리게 했습니다.결과: 폰트 720KB → 88KB, LCP 2.8s → 0.9s.
4. 결제 중복 — 같은 주문이 두 번문제: 네트워크가 끊겼다 붙으면 결제가 두 번 잡혔습니다.접근: 요청마다 멱등키를 붙이고, 완료 표시를 성공 응답 이후로 옮겼습니다.결과: 월 300건 → 11건, 정산 오차 0.
5. 배포하면 가끔 흰 화면문제: 배포 직후 접속한 사용자만 빈 화면을 봤습니다.접근: 원인은 캐시된 HTML이 사라진 청크를 부르는 것. 파일명 해시와 이전 버전 보존 기간을 두었습니다.결과: 배포 직후 오류 보고 0건.
6. 3만 행 테이블에서 필터가 8초문제: 필터를 바꿀 때마다 화면이 멈췄습니다.접근: 가상 스크롤로 그리는 행을 줄이고 필터링을 워커로 옮겼습니다.결과: 8s → 60ms, 스크롤 중에도 입력이 먹힘.
7. 타임존 때문에 하루가 밀림문제: 자정 근처 주문이 전날로 기록됐습니다.접근: 서버는 UTC로 통일하고 표시할 때만 지역 시간으로 바꿨습니다.결과: 날짜 관련 문의가 사라졌습니다.
8. 새 항목

프론트엔드 — 주력

백엔드 · 데이터

인프라 · 측정