Today I Learned

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

20267

2026-07-14

개발 환경 정비에서 만난 범용 개념들: 셸 인용·모노레포 배포·CI 러너·가드 설계

도구·인프라를 정비하며 마주친 셸 단어 분리, workspace 배포 재작성, CI 러너 불일치, fail-open 가드를 범용 개념으로 정리한 TIL

  • 셸 변수에 담긴 경로는 공백이 있으면 인용 없이 쓸 때 여러 인자로 쪼개져 명령이 조용히 깨진다
  • 모노레포 내부 의존은 workspace 프로토콜로 링크하고 배포 시 실제 버전으로 치환하는 매니저로 올려야 한다
2026-07-13

별빛 그래프·SW 캐시·Playwright triage·ESLint guardrail

Canvas 별 노드, Service Worker SWR·generation 보안, CI flaky 분류, 디자인시스템 ESLint guardrail을 하루에 정리한 TIL

  • Canvas 노드 장식은 ID 해시로 안정화하고 globalAlpha·shadowBlur는 그리기 직후 반드시 복구한다
  • Playwright CI 빨간색은 retry 결과로 flaky와 deterministic failed를 먼저 갈라야 한다
2026-07-12

JSON-LD·3국어 i18n·문서 그래프 — 하루에 맞춘 콘텐츠 파이프라인

검색 노출용 JSON-LD 리치화, .{locale}.md 파이프라인, next-intl Link 수정, BFS 로컬 그래프, knowledge publish까지 한 축으로 정리한 TIL

  • 다국어는 번역뿐 아니라 id=`type:slug:locale` 포맷을 DB·검색·sitemap 전 구간에서 grep해야 한다
  • localePrefix always에서는 내부 이동에 plain next/link를 쓰면 bare href가 /ko로 301된다 — 예외 없이 i18n Link
2026-07-11

홈 히어로 scroll-driven 내러티브 연출

GSAP 없이 sticky scrolly·CSS keyframes·view-timeline으로 TIL→Knowledge 승격 데모와 파이프라인 섹션을 구현한 하루

  • sticky scrolly는 래퍼 높이만큼 스크롤 시간축을 만들고, phase는 진행도에서 파생하면 JS가 얇아진다
  • 히어로 라이브 데모는 clip-path steps 와이프 + animation-delay만으로 루프를 만들 수 있다
2026-07-10

Modal peek 스택과 CSS layer 패키지

단일 dialog 안 document push와 @layer 기반 editor CSS 분리로 peek UX·테마 커스터마이징을 맞춘 하루

  • gallery→peek는 dialog를 새로 열기보다 같은 shell에서 documentId만 바꾸는 편이 연속적이다
  • async resolve는 (newId, oldContent) 중간 프레임을 render-time reset으로 막아야 한다
2026-07-09

계층형 문서 네비와 viewer 번들 분리

page push/peek navigator와 read-only viewer entry 분리로 포트폴리오 데모 깊이와 번들을 동시에 맞춘 하루

  • 문서 그래프는 page 블록 + push/peek navigator 계약으로 flat editor와 분리하는 편이 낫다
  • peek·embed는 editor와 DOM은 같아도 import graph가 달라야 viewer 번들이 작아진다
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-05

블록 에디터 순서·협업·키보드 계약

fractional ordering, optimistic rebase, IME defer, keyboard undo 위임, scoped popover, Jest ESM shim 등 범용 패턴 정리

  • sibling 순서는 integer index보다 fractional position key + neighbor anchor + tie-break가 concurrent insert에 유리하다
  • optimistic UI는 inverse patch 없이는 rebase할 수 없고, remote seq가 merge 권위여야 한다
2026-07-04

문서는 host SoT, 에디터는 focused guest

블록 문서 편집기에서 host/guest 경계, React 외부 스토어 스냅샷, undo 2-스택, HTML5 드래그·선택/복사를 처음 읽는 사람 기준으로 정리

  • 문서 의미는 host 패치가 소유하고 리치텍스트 엔진은 포커스 블록의 guest로만 둔다
  • useSyncExternalStore 스냅샷에 ms timestamp만 쓰면 같은 ms mutation에서 리렌더가 드롭된다 — 단조 revision이 필요
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-30

직접 업로드 계약, CSS 토큰 테마, 하이드레이션 경계

presigned URL 4단계 업로드, @layer 기반 토큰 테마의 단일 생성기, fr 레이아웃과 마운트 후 하이드레이션에서 배운 공통 원칙

  • presigned URL 업로드는 presign→PUT→complete→create 4단계 계약이고, complete 통지를 빠뜨리면 백엔드가 업로드를 인지하지 못한다.
  • CSS 토큰 테마는 @layer(우선순위)·@scope(범위)·light-dark()(모드)를 분리하고, 런타임·빌드 CSS를 하나의 생성기로 단일화해야 어긋나지 않는다.
2026-06-29

서버리스 환경의 검색 백엔드 선택

서버리스에서 무엇을 함수 안/밖에 둘지와, 교체 가능한 검색을 provider 계약으로 감추는 법

  • 상주해야 하는 검색 엔진은 서버리스 함수에 못 올리고, 사전 빌드한 인메모리 인덱스로 대체할 수 있다.
  • 런타임에 읽는 빌드 산출물은 번들 파일 추적에 명시해야 콜드 스타트에서 누락되지 않는다.
2026-06-28

WebSocket 스트리밍과 LCP 개선

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

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

WebSocket 스트리밍 실험

WebSocket 핸드셰이크·재연결·heartbeat 설계와 스트리밍 타이밍 관측에서 배운 점

  • 연결 유지 비용을 고려해 heartbeat를 설계해야 한다.