PRPL 파이프라인

#33PerformanceHard

PRPL 패턴의 네 단계를 시뮬레이션하는 PRPLPipeline을 구현하세요. PRPL은 Push, Render, Pre-cache, Lazy-load의 약자로, 저사양 디바이스와 느린 네트워크에서도 최적의 초기 로딩을 제공하기 위한 패턴입니다.

단계별 동작

push(criticalIds): 임계 자원들을 푸시 (loaded에 추가, 로그 기록)
render(routeId): 초기 라우트 렌더링 — push가 호출된 이후에만 가능
precache(otherIds): 자주 방문되는 라우트를 백그라운드에서 캐싱 — push와 render 모두 이후에만 가능
lazy(id): 라우트가 렌더링된 이후에만 호출 가능 — 자원을 loaded에 추가

API

class PRPLPipeline {
  push(criticalIds: string[]): void;
  render(routeId: string): void;
  precache(otherIds: string[]): void;
  lazy(id: string): void;
  getLog(): string[];        // ['push:a,b', 'render:home', 'precache:x', 'lazy:y']
  isLoaded(id: string): boolean;
}

요구사항

순서 위반 시 Error/Exception을 던지세요 (render 전 precache, render 전 lazy, push 전 render)
같은 라우트로 render를 두 번 호출하면 오류
getLog()는 호출된 순서대로 이벤트를 기록합니다 (push:, render:, precache:, lazy: 접두사 사용, 다중 ID는 쉼표로 결합)
isLoaded(id)는 push/precache/lazy로 추가된 모든 자원에 대해 true

학습 포인트

단계별 상태 머신 구현
임계 자원과 비임계 자원의 로딩 순서 관리
사전조건(precondition) 검증 기반 API 설계

언어:

TypeScript

Java

Kotlin

C++