observer (2) 썸네일형 리스트형 PerformanceObserver를 활용해 간단한 LCP 측정기 구현 오늘은 웹 페이지의 로딩 성능을 평가하는 중요한 지표 중 하나인 LCP를 `PerformanceObserver`를 사용해 간단한 LCP 측정기를 만들어 보겠습니다.PerformanceObserver란 📖`PerformanceObserver`는 웹 페이지의 성능 데이터를 감지하고 분석하는 API입니다.브라우저가 기록하는 다양한 성능 데이터를 실시간으로 수집할 수 있습니다.구문new PerformanceObserver(callback) 관찰된 성능 이벤트가 기록될 때 호출되는 콜백입니다. entryTypesPerformanceObserver를 사용할 때, `observe()` 메서드를 통해 감지할 항목을 설정할 수 있습니다.Entry Type설명paintfirst-paint, first-contentful.. 옵저버 패턴 알아보기 옵저버 패턴이란? 📖객체의 상태 변화를 관찰하는 옵저버(Observer)들이 있고, 관찰 대상이 되는 객체(Subject)가 상태 변화가 있을 때 옵저버들에게 알리는 디자인 패턴입니다. ❗간단하게 설명하면어떤 데이터나 상태의 변화가 일어났을 때, 실시간으로 구독자들에게 알려주는 방식 `Subject (주체)` : 상태를 보유하고 있고, 변화가 일어났을 때 옵저버들에게 알리는 역할`Observer (옵저버)` : 주체의 상태 변화를 감지하고 그에 따라 행동 옵저버 패턴 직접 만들어보기 📖subject.jsconst createSubject = () => { const observers = new Map(); const addObserver = (key, observer) => { if(!obs.. 이전 1 다음
