resizeObserver 정리 및 결과물

JS의 5가지 Observer 중 ResizeObserver에 대해 알아보자.

감시하는 DOM 요소의 크기 변화를 감지하는 Observer이고, 생성자와 3가지 함수가 있다.

생성자는 다음과 같은 형식이다.

new ResizeObserver(callback)

콜백함수는 다음과 같은 형식이다.

function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

첫번째 인자는 ResizeObserver가 감시하는 모든 DOM 객체고, 두번째 인자 observer는 ResizeObserver 그 자체를 의미한다.

콜백함수에서 각 인자에 대해 여러가지 처리를 해줄 수 있다.

3가지 함수는 다음과 같다.
disconnect()
observe(target) / observe(target, options)
unobserve(target)

observe와 unobserve는 한가지 DOM 요소에 대해 Observer를 등록하거나 해제한다.
disconnect()는 Observer에 등록된 모든 DOM 요소를 해제한다.

ResizeObserver를 통해 three.js로 만든 큐브를 브라우저 창 크기에 따라 리렌더링하는 코드를 짜보았다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js and DOM Interaction</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
        #overlay {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="overlay">This is a DOM element using ResizeObserver</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        animate();

        const resizeObserver = new ResizeObserver(() => {
            const width = window.innerWidth;
            const height = window.innerHeight;

            camera.aspect = width / height;
            camera.updateProjectionMatrix();

            renderer.setSize(width, height);
        });

        resizeObserver.observe(document.body);
    </script>
</body>
</html>