빠짐없음 강제하기 — union에 경우를 추가했을 때 컴파일러가 알려주게 만들기
assertNever, satisfies Record, 패턴 매칭 라이브러리 세 계층 중 무엇을 언제 쓸지와, catch-all 기본 분기가 누락을 숨기는 이유
Frontend 카테고리의 지식 문서입니다.
assertNever, satisfies Record, 패턴 매칭 라이브러리 세 계층 중 무엇을 언제 쓸지와, catch-all 기본 분기가 누락을 숨기는 이유
Record가 약속하는 totality, 검사하지 않는 type predicate, 실행 시점이 다른 wrapper의 ReturnType, sanitizer로 착각하는 excess property check처럼 구현이 지키지 않는 것을 타입이 약속하는 패턴들
파생 가능한 값은 저장하지 않고, 라이브러리가 이미 소유한 union은 복사하지 않고, 그래도 남는 client 상태만 union으로 만드는 순서와, 상태에 action을 넣으면 안 되는 이유
같은 코드가 저장소 설정에 따라 통과하기도 실패하기도 하는 이유와, 타입 계약을 만들기 전에 실효 tsconfig·lockfile 컴파일러 버전을 한 번 고정해 두는 절차
허용값 목록을 타입과 값 두 곳에 각각 적는 대신 값 하나만 정답의 출처로 두고 타입을 계산해 내는 기법, 그리고 widening 때문에 이 보호가 에러 없이 사라지는 함정
const 선언에 타입 파라미터를 붙일 수 없다는 제약을 우회해, 제네릭 함수 안에서 context를 만들고 컴포넌트들이 클로저로 붙잡게 하는 패턴과 렌더 중 호출 시 조용히 리마운트되는 함정
Dog가 Animal의 하위 타입일 때 Dog[]와 (x: Dog) => void도 그 관계를 물려받는지, 어느 방향으로 물려받는지를 정하는 규칙과, strictFunctionTypes를 켜도 메서드 문법에 구멍이 남는 이유
오프라인에서 발생한 사용자 명령을 IndexedDB에 보존하고 재접속·새로고침 뒤 안전하게 재전송하는 React outbox 전략
마크다운 본문 이미지에 빌드 시점에 실제 픽셀 치수를 주입해 레이아웃 이동과 고정 비율 크롭을 동시에 없애는 원리
폴리필을 모든 브라우저에 넣지 않고, 기능이 없는지 실제로 감지해 부족한 브라우저에만 로드하는 기법 — 최신 브라우저 비용이 거의 0이 된다
한 화면의 상호작용이 여러 개 동시에 안 먹히면 보통 개별 버그가 아니라 클라이언트 JS가 실행되지 못해 하이드레이션이 통째로 불발된 단일 근본원인이다
옛 브라우저 지원은 두 개의 다른 일이다 — 새 문법을 옛 문법으로 바꾸는 트랜스파일과, 없는 API를 코드로 채우는 폴리필. 트랜스파일러는 문법만 바꾸고 런타임 함수는 만들지 않는다
즉시 반영을 위해 staleTime을 낮추면 트래픽이 폭증한다. staleTime은 신선도 SLA로 유지하고 쓰기 후 invalidateQueries로 그 순간만 강제 refetch하는 이유와 방법
세션 로딩이 끝나기 전에는 보호 API를 치지 않고, authResolved와 로그인 여부를 함께 보는 쿼리 enabled 패턴
UI는 track/identify/reset만 알고, 뒤에서 GTM·PostHog 등 여러 분석 싱크로 이벤트를 팬아웃하는 얇은 계층
JSON-LD·FAQPage 등 구조화 데이터는 화면에 보이는 텍스트와 같은 사실만 담아야 한다는 규칙과 단일 소스 패턴
workspace:* 로 내부 패키지를 링크하고 배포 시 실제 버전으로 치환하는 모노레포 퍼블리시 메커니즘
frontmatter related·wikilink 인덱스를 BFS로 N홉 이내 이웃만 모아 force-graph로 시각화하는 패턴
localePrefix always 환경에서 내부 링크는 next-intl Link로만 이동해야 로케일이 유지된다
같은 slug 문서를 .{locale}.md 파일명으로 구분하고 로더·DB·검색·SEO id를 type:slug:locale로 맞추는 패턴
무한 스크롤·window virtualizer에서 bootstrap·React·N-frame reassert가 경쟁하지 않게 단일 corrective scroll로 통합하는 패턴
Cursor·Lovable·Granola 등 2026 화제 스타트업 10곳의 랜딩페이지를 Playwright로 실측 캡처·분석해 도출한 웹디자인 트렌드
GSAP 없이 scroll-timeline·sticky stage·pure CSS keyframes로 제품 스토리를 스크롤에 동기화하는 zero-JS 내러티브 패턴
단일 modal shell 안에서 documentId 스택을 push/pop하며 gallery→peek→related를 이어주는 탐색 패턴
블록 문서 그래프에서 page 블록·push/peek navigator·breadcrumb으로 자식 문서를 탐색하는 패턴
리치텍스트 editor와 read-only viewer entry를 분리해 peek·embed 경로에서 PM/dnd 번들을 제거하는 패턴
SSR에서 peek+after()로 TTFB 없이 blur placeholder를 warm하는 stale-while-populate 패턴
내장 이미지 최적화가 꺼진 환경에서 Route Handler로 리사이즈·webp 변환·CDN+LRU 캐시를 구성하는 패턴
불변 트리에서 정규화 read-model과 id별 useSyncExternalStore 구독으로 중첩 UI 리렌더를 O(depth)에서 O(1)로 줄이는 CQRS projection 패턴
하이브리드 블록 에디터에서 여러 블록에 걸친 native 선택에 delete·mark·insert를 무상태 파생과 host 패치로 처리하는 패턴
자주 바뀌는 큰 상태를 넓은 Context value에 넣으면 memo가 무력화되는 이유와 좁은 Provider 분리 패턴
catch-all vendor에 고정 name과 chunks:all을 쓰면 dynamic import가 무력화되고 모든 엔트리가 거대 shared vendor를 받는 이유와 처방
로컬 optimistic apply와 inverse patch로 pending 큐를 롤백·재적용하며 원격 변경과 수렴하는 클라이언트 동기화 패턴
Radix Popover Portal이 CSS scope ancestor를 벗어날 때 인라인 렌더로 에디터 스코프 스타일을 유지하는 방법
문서 의미는 host가 소유하고, 리치텍스트 엔진은 포커스된 블록에만 잠시 마운트되는 guest로 두는 편집기 아키텍처
HTML을 청크로 flush하는 Streaming SSR이 FCP·LCP·SI·CLS에 미치는 영향과 LCP 청크 배치 기준
편집을 do/inverse 쌍으로 기록하고 undo·redo 스택 두 개로 상태를 왕복하는 히스토리 모델
useSyncExternalStore는 Object.is로 스냅샷을 비교하므로, 내용이 바뀌었는데도 같은 값이면 리렌더를 영원히 놓친다
가로 캐러셀에서 보이지 않는 슬라이드 이미지 fetch를 막고 LCP 후보만 eager 로드하는 패턴
Next.js App Router에서 schema.org JSON-LD를 서버 page.tsx에 주입하는 패턴과 XSS sanitize
서버에서 React Query 등 캐시를 채워 client auth→API waterfall을 줄이는 패턴과 query key 정합
긴 목록에서 뷰포트 근처 행만 DOM에 렌더해 메모리·레이아웃 비용을 일정하게 유지하는 기법
@layer·@scope·light-dark()와 커스텀 프로퍼티로 우선순위·범위·모드를 분리해 토큰 테마를 일관되게 만드는 방법
서버 렌더 HTML과 클라이언트 첫 렌더가 어긋나는 원인과, 클라이언트 전용 상태를 안전하게 적용하는 전략
debounce, AbortController, 최신 요청 id로 out-of-order 응답을 방어하는 비동기 UI 패턴
frontmatter 단일 소스에서 sitemap·RSS·OG·JSON-LD를 빌드타임에 결정적으로 생성하는 원칙
LCP가 측정되는 방식과 개선 방법
브라우저 리소스 우선순위와 fetchpriority 활용