Today I Learned

날짜별 업무 및 학습 회고입니다. 매일 무엇을 했고, 무엇을 배웠는지 기록합니다.

20267

2026-07-08

모바일 포인터 제스처와 서버 이미지 프록시

터치 드래그·리사이즈 안정화와 unoptimized 환경에서 이미지 프록시로 전송 바이트를 줄인 하루

  • 터치로 끌어도 페이지가 같이 스크롤되지 않게 드래그 동작을 손봤다
  • 이미지는 원본 통째가 아니라 필요한 크기만 보내도록 프록시를 붙였다
2026-07-07

중첩 UI 리렌더를 O(1)로 — read-model·external store·render count 테스트

불변 트리 에디터에서 한 줄만 고쳐도 전체가 다시 그려지는 문제를, 테스트로 먼저 고정한 뒤 정규화 projection과 id별 구독으로 행·컨테이너 리렌더를 줄인 과정

  • 불변 트리 patch는 조상도 새 ref를 받아 props 내리면 O(depth) 리렌더 — 정규화 entry + id별 구독으로 O(1)로 줄일 수 있다
  • entry 캐시는 입력 ref가 아니라 출력 값-동등으로 안정화해야 하고, 외부 store sync는 setState 직전 choke point에서 동기 실행한다
2026-07-06

번들 shared vendor, 크로스블록 선택, 플로팅 UI 좌표

webpack splitChunks 함정, 하이브리드 에디터 크로스블록 범위 연산, selectionchange·scroll anchor 패턴, Context 구독 분리

  • catch-all vendor에 chunks:all과 고정 name을 함께 쓰면 dynamic import가 shared 청크로 끌려 올라간다
  • 크로스블록 텍스트 연산은 범위 state 대신 getSelection 무상태 파생 + 경계 split 단일화가 안전하다
2026-07-03

perf는 3× median, prefetch는 skeleton과 세트

Lab trace outlier 구분, SSR prefetch query key 정합, CLS skeleton 예약, JSON-LD 서버 주입을 한날에 정리

  • 개발 서버 단일 Performance trace는 outlier가 흔해 N회 reload median으로 before/after를 비교해야 한다
  • SSR prefetch는 query key가 클라이언트와 1글자라도 다르면 cache miss이며 skeleton 높이 예약과 세트로 봐야 CLS가 난다
2026-07-01

긴 목록은 flatten → SSR 첫 slice → virtualizer

무한 스크롤과 리스트 가상화를 분리하고, SSR 정적 gate로 첫 HTML을 보장한 뒤 virtual list로 전환하는 패턴

  • 무한 스크롤은 데이터 노출 상한, 가상화는 DOM 상한을 각각 제어한다
  • nested 그룹 UI는 header/item row로 flatten한 뒤 virtualizer에 넣는다

20266

2026-06-28

WebSocket 스트리밍과 LCP 개선

에이전트 부분 응답 스트리밍과 랜딩 LCP 개선을 병행하며 배운 측정·UI·리소스 우선순위

  • WebSocket에서도 부분 결과를 스트리밍할 수 있다.
  • LCP 리소스의 우선순위가 실제 지표에 큰 영향을 준다.