모노레포 workspace 프로토콜과 배포 재작성
workspace:* 로 내부 패키지를 링크하고 배포 시 실제 버전으로 치환하는 모노레포 퍼블리시 메커니즘
Frontend 카테고리의 지식 문서입니다.
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 활용