{"id":851,"date":"2025-02-07T18:59:04","date_gmt":"2025-02-07T09:59:04","guid":{"rendered":"https:\/\/blog.mydepot.kr\/?p=851"},"modified":"2025-02-07T18:59:05","modified_gmt":"2025-02-07T09:59:05","slug":"%ec%9b%b9-%ea%b0%9c%eb%b0%9c%ec%9e%90%eb%a5%bc-%ec%9c%84%ed%95%9c-observer-api-%ec%99%84%eb%b2%bd-%ea%b0%80%ec%9d%b4%eb%93%9c","status":"publish","type":"post","link":"https:\/\/blog.mydepot.kr\/?p=851","title":{"rendered":"\uc6f9 \uac1c\ubc1c\uc790\ub97c \uc704\ud55c Observer API \uc644\ubcbd \uac00\uc774\ub4dc"},"content":{"rendered":"\n

\uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub2e4 \ubcf4\uba74 DOM \uc694\uc18c\uc758 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\uace0 \ub300\uc751\ud574\uc57c \ud558\ub294 \uc0c1\ud669\uc774 \uc790\uc8fc \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uacfc\uac70\uc5d0\ub294 \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub098 \ud3f4\ub9c1 \ubc29\uc2dd\uc73c\ub85c \uc774\ub97c \ucc98\ub9ac\ud588\uc9c0\ub9cc, \ud604\ub300 \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub294 \ub354 \ud6a8\uc728\uc801\uc778 \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ubc14\ub85c Observer API\ub4e4\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

<\/h2>\n\n\n\n

1. ResizeObserver<\/h2>\n\n\n\n

ResizeObserver\ub294 DOM \uc694\uc18c\uc758 \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud569\ub2c8\ub2e4. \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778\uc774\ub098 \ub3d9\uc801 \ub808\uc774\uc544\uc6c3\uc5d0\uc11c \ud2b9\ud788 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n\n\n\n
const observer = new ResizeObserver(entries => {\n  entries.forEach(entry => {\n    console.log('\ud06c\uae30\uac00 \ubcc0\uacbd\ub428:', entry.target);\n    console.log('\uc0c8\ub85c\uc6b4 \ud06c\uae30:', entry.contentRect);\n  });\n});\n\n\/\/ \uad00\ucc30 \uc2dc\uc791<\/em>\nobserver.observe(document.querySelector('.my-element'));<\/code><\/code><\/pre>\n\n\n\n
\uc2e4\uc81c \ud65c\uc6a9 \uc608\uc2dc<\/h3>\n\n\n\n
\/\/ \ucc28\ud2b8 \ud06c\uae30 \uc790\ub3d9 \uc870\uc808<\/em>\nconst chart = document.querySelector('.chart');\nconst resizeObserver = new ResizeObserver(entries => {\n  const [entry] = entries;\n  const { width, height } = entry.contentRect;\n  \n  updateChartDimensions(width, height);\n});\n\nresizeObserver.observe(chart);<\/code><\/code><\/pre>\n\n\n\n
2. IntersectionObserver<\/h2>\n\n\n\n
IntersectionObserver\ub294 \uc694\uc18c\uac00 \ubdf0\ud3ec\ud2b8\ub098 \ud2b9\uc815 \ubd80\ubaa8 \uc694\uc18c\uc640 \uad50\ucc28\ud558\ub294 \uac83\uc744 \uac10\uc9c0\ud569\ub2c8\ub2e4. \ubb34\ud55c \uc2a4\ud06c\ub864, \uc774\ubbf8\uc9c0 \uc9c0\uc5f0 \ub85c\ub529 \ub4f1\uc5d0 \ud65c\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n\n\n\n
const observer = new IntersectionObserver(entries => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      console.log('\uc694\uc18c\uac00 \ud654\uba74\uc5d0 \ubcf4\uc784');\n    }\n  });\n}, {\n  threshold: 0.5 \/\/ 50% \uc774\uc0c1 \ubcf4\uc77c \ub54c<\/em>\n});\n\nobserver.observe(document.querySelector('.target'));<\/code><\/code><\/pre>\n\n\n\n
\uc2e4\uc81c \ud65c\uc6a9 \uc608\uc2dc: \uc774\ubbf8\uc9c0 \uc9c0\uc5f0 \ub85c\ub529<\/h3>\n\n\n\n
const lazyImages = document.querySelectorAll('img[data-src]');\n\nconst imageObserver = new IntersectionObserver(entries => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      const img = entry.target;\n      img.src = img.dataset.src;\n      imageObserver.unobserve(img);\n    }\n  });\n});\n\nlazyImages.forEach(img => imageObserver.observe(img));<\/code><\/code><\/pre>\n\n\n\n
3. MutationObserver<\/h2>\n\n\n\n
MutationObserver\ub294 DOM \ud2b8\ub9ac\uc758 \ubcc0\ud654\ub97c \uac10\uc9c0\ud569\ub2c8\ub2e4. \uc18d\uc131 \ubcc0\uacbd, \uc790\uc2dd \uc694\uc18c \ucd94\uac00\/\uc81c\uac70 \ub4f1\uc744 \ubaa8\ub2c8\ud130\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n\n\n\n
const observer = new MutationObserver(mutations => {\n  mutations.forEach(mutation => {\n    console.log('\ubcc0\ud654 \uc720\ud615:', mutation.type);\n    console.log('\ubcc0\ud654\ub41c \uc694\uc18c:', mutation.target);\n  });\n});\n\nobserver.observe(targetNode, {\n  attributes: true,      \/\/ \uc18d\uc131 \ubcc0\ud654 \uac10\uc9c0<\/em>\n  childList: true,      \/\/ \uc790\uc2dd \uc694\uc18c \ubcc0\ud654 \uac10\uc9c0<\/em>\n  subtree: true         \/\/ \ud558\uc704 \uc694\uc18c \ubaa8\ub450 \uac10\uc9c0<\/em>\n});<\/code><\/code><\/pre>\n\n\n\n
\uc2e4\uc81c \ud65c\uc6a9 \uc608\uc2dc: \ub3d9\uc801 \ud3fc \uac80\uc99d<\/h3>\n\n\n\n
const form = document.querySelector('form');\n\nconst formObserver = new MutationObserver(mutations => {\n  mutations.forEach(mutation => {\n    if (mutation.type === 'attributes' && \n        mutation.attributeName === 'data-valid') {\n      updateFormValidation(mutation.target);\n    }\n  });\n});\n\nformObserver.observe(form, {\n  attributes: true,\n  subtree: true,\n  attributeFilter: ['data-valid']\n});<\/code><\/code><\/pre>\n\n\n\n
4. PerformanceObserver<\/h2>\n\n\n\n
PerformanceObserver\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5 \uc9c0\ud45c\ub97c \ubaa8\ub2c8\ud130\ub9c1\ud569\ub2c8\ub2e4. \ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc\uac04, \ub9ac\uc18c\uc2a4 \ud0c0\uc774\ubc0d \ub4f1\uc744 \uce21\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n\n\n\n
const observer = new PerformanceObserver(list => {\n  const entries = list.getEntries();\n  entries.forEach(entry => {\n    console.log('\uc131\ub2a5 \uc9c0\ud45c:', entry.name);\n    console.log('\uc18c\uc694 \uc2dc\uac04:', entry.duration);\n  });\n});\n\nobserver.observe({\n  entryTypes: ['navigation', 'resource']\n});<\/code><\/code><\/pre>\n\n\n\n
\uc2e4\uc81c \ud65c\uc6a9 \uc608\uc2dc: \uc131\ub2a5 \ubaa8\ub2c8\ud130\ub9c1<\/h3>\n\n\n\n
const performanceObserver = new PerformanceObserver(list => {\n  const entries = list.getEntries();\n  \n  entries.forEach(entry => {\n    if (entry.entryType === 'largest-contentful-paint') {\n      console.log('LCP:', entry.startTime);\n    }\n    if (entry.entryType === 'layout-shift') {\n      console.log('CLS:', entry.value);\n    }\n  });\n});\n\nperformanceObserver.observe({\n  entryTypes: ['largest-contentful-paint', 'layout-shift']\n});<\/code><\/code><\/pre>\n\n\n\n
\ube0c\ub77c\uc6b0\uc800 \uc9c0\uc6d0 \ud604\ud669<\/h2>\n\n\n\n
\uac01 Observer API\uc758 \ube0c\ub77c\uc6b0\uc800 \uc9c0\uc6d0 \ud604\ud669\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n