자바스크립트 "Resize Observer API"

Resize Observer API는 개발자가 요소 콘텐츠 크기 또는 테두리 상자 크기의 변경 사항을 추적할 수 있는 최신 웹 브라우저의 비교적 새로운 API입니다. 이 API는 응답형 웹 디자인에 특히 유용합니다. 개발자가 폴링이나 비용이 많이 드는 레이아웃 계산과 같은 비효율적이고 해키한 솔루션에 의존하지 않고도 페이지 요소의 크기 변경에 응답할 수 있기 때문입니다.

​

다음은 Resize Observer API를 사용하여 요소 크기의 변경 사항을 추적하는 간단한 예입니다.

​

<div id="element-to-watch">

<!-- content -->

</div>

​

<script>

const elementToWatch = document.getElementById('element-to-watch');

const observer = new ResizeObserver(entries => {

for (let entry of entries) {

console.log(`Element resized to ${entry.contentRect.width}px wide`);

}

});

​

observer.observe(elementToWatch);

</script>

​

이 예제에서는 먼저 `id`가 `element-to-watch`인 `div` 요소를 만듭니다. 그런 다음 새 `ResizeObserver` 개체를 만들고 관찰된 요소의 크기가 변경될 때마다 호출되는 콜백 함수를 전달합니다. 이 콜백 함수는 요소의 새 너비를 콘솔에 기록합니다.

​

마지막으로 관찰자 개체에서 `observe` 메서드를 호출하여 `elementToWatch` 요소를 전달합니다. 이는 관찰자에게 요소의 크기 변화를 관찰하기 시작하도록 지시합니다.

​

사용자가 브라우저 창의 크기를 조정하거나 `element-to-watch` 요소의 크기를 변경하면 요소의 새 크기에 대한 정보가 포함된 `ResizeObserverEntry` 개체의 배열과 함께 콜백 함수가 호출됩니다. 이 예에서는 새 너비를 콘솔에 기록하지만 실제 애플리케이션에서는 이 정보를 사용하여 페이지 레이아웃을 업데이트하거나 다른 요소의 크기를 조정하거나 요소의 새 크기에 기반으로 다른 작업을 트리거할 수 있습니다.

​

ResizeObserver API는 브라우저 창 크기 또는 페이지 콘텐츠의 변화에 적응할 수 있는 반응형 동적 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 그러나 새로운 기술과 마찬가지로 코드를 철저하게 테스트하고 이전 브라우저와의 잠재적인 성능 또는 호환성 문제를 인식하는 것이 중요합니다.