Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

3.6 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

Interaction to Next Paint (INP)

매 한 줄

"매 user input → 매 next visible paint 의 latency". 2024-03 의 의 의 FID 의 replace. 매 Core Web Vitals member. 매 < 200ms 'good', < 500ms 'needs improvement'.

매 핵심

매 measurement

매 매 page session 의 of 의 모든 interaction 의 worst (P98).
매 input delay + processing + presentation delay.

매 응용

SEO (Google ranking).
UX.
Form / button responsiveness.

💻 패턴

Measure

import { onINP } from 'web-vitals';
onINP(({ value, rating }) => {
  analytics.track('INP', { value, rating });  // 매 rating: 'good' | 'needs-improvement' | 'poor'
});

Optimize: yield to main thread

button.addEventListener('click', async () => {
  await scheduler.yield();  // 매 modern API
  // 매 매 chunk 의 의 의 yield
  for (let i = 0; i < items.length; i++) {
    if (i % 100 === 0) await scheduler.yield();
    process(items[i]);
  }
});

Web Worker (heavy work)

const worker = new Worker('heavy.js');
button.addEventListener('click', () => {
  worker.postMessage(data);
});
worker.onmessage = e => updateUI(e.data);

Debounce / throttle

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

input.addEventListener('input', debounce(handleSearch, 300));

React 18 useDeferredValue

function Search({ query }) {
  const deferredQuery = useDeferredValue(query);
  const results = expensiveCompute(deferredQuery);
  return <Results items={results} />;
}

Long Animation Frames API (debug)

new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long task', entry);
    }
  }
}).observe({ type: 'long-animation-frame', buffered: true });

Code splitting

const HeavyComponent = lazy(() => import('./HeavyComponent'));
// 매 only loaded on demand

매 결정 기준

상황	Approach
Heavy compute	Worker
Long task	scheduler.yield
Search input	Debounce + useDeferredValue
Initial bundle	Code split

기본값: 매 measure with web-vitals + 매 yield + 매 worker for heavy + 매 < 200ms target.

🔗 Graph

부모: Core Web Vitals Optimization (INP, LCP, CLS) · Google-Page-Experience-2025-Update
응용: GPU Acceleration (Compositing) · E-commerce-Optimization
Adjacent: Core Web Vitals Optimization (INP, LCP, CLS)

🤖 LLM 활용

언제: 매 web product. 매 SEO. 언제 X: 매 backend.

❌ 안티패턴

Synchronous heavy work on main thread: 매 INP 폭발.
No measurement: 매 invisible.
setTimeout(0) only: 매 still on main.

🧪 검증 / 중복

Verified (web.dev, web-vitals.js docs).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — INP + 매 yield / worker / debounce / React code

3.6 KiB Raw Blame History