[Observer API ํŒŒํ—ค์น˜๊ธฐ] 1. Observer API

โฐ 2024-06-11 (ํ™”) 16:26:00

screener
์‹œ๋ฆฌ์ฆˆ ๋ชจ์•„๋ณด๊ธฐ
Observer API ํŒŒํ—ค์น˜๊ธฐ

1 / 3

Table of Contents

  • 1. ๊ฐœ์š”




๊ฐœ์š”

ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด, ์ˆ˜ ๋งŽ์€ ์ด๋ฒคํŠธ๋“ค์„ ๋‹ค๋ฃจ๊ฒŒ ๋œ๋‹ค.

๋Œ€๋ถ€๋ถ„ ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ์— ๋”ฐ๋ฅธ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ์ง€๋งŒ, ๊ฐ„ํ˜น ์Šคํฌ๋กค์ด๋‚˜, ๋ฆฌ์‚ฌ์ด์ง•๊ฐ™์ด DOM์˜ ๋ณ€ํ™”์— ๋ฐ€์ ‘ํ•˜๊ฒŒ ์—ฐ๊ด€๋œ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ๊ธฐ๋„ ํ•œ๋‹ค.

์ด ๊ฒฝ์šฐ ์ผ๋ฐ˜์ ์ธ Event Driven(์ดํ•˜ ์ด๋ฒคํŠธ ๋“œ๋ฆฌ๋ธ) ๋ฐฉ์‹๋ณด๋‹ค, ๋ธŒ๋ผ์šฐ์ €์˜ Observer API๋ฅผ ์“ฐ๋ฉด ํ›จ์”ฌ ์ตœ์ ํ™”๋œ ์„ฑ๋Šฅ์˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ณธ ์‹œ๋ฆฌ์ฆˆ๋ฅผ ํ†ตํ•ด Observer API๋ฅผ ํƒ๊ตฌํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค.

Observer API

์˜ต์ €๋ฒ„

Observer API๋Š” ํŠน์ • ์ด๋ฒคํŠธ๋‚˜, DOM์˜ ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๊ฐ์ง€ํ•˜๊ณ , ์ด์— ๋”ฐ๋ผ ์›ํ•˜๋Š” ๋™์ž‘์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” API๋‹ค.

๋ธŒ๋ผ์šฐ์ €์˜ API์ด๋ฏ€๋กœ, ๋ฐ˜๋“œ์‹œ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

Observer API์˜ ์ข…๋ฅ˜๋Š” 5๊ฐ€์ง€๊ฐ€ ์กด์žฌํ•œ๋‹ค.

API์šฉ๋„
IntersectionObserver์š”์†Œ๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ๋ทฐํฌํŠธ ๊ฐ„์˜ ๊ต์ฐจ ์—ฌ๋ถ€๋ฅผ ๊ฐ์ง€ํ•จ
ResizeObserver์š”์†Œ์˜ width, height ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€
MutationObserverDOM ํŠธ๋ฆฌ์˜ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€
PerformanceObserverํŽ˜์ด์ง€ ์„ฑ๋Šฅ๊ณผ ๊ด€๋ จ๋œ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ์ง€
ReportingObserver๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ๊ณ  ๋ฐ ๋ฌธ์ œ ๊ฐ์ง€

์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ๋ณด๋‹จ, ํŽ˜์ด์ง€ ์š”์†Œ์™€์˜ ์ƒํ˜ธ์ž‘์šฉ๊ณผ ์—ฐ๊ด€๋˜์–ด์žˆ๋‹ค.

๊ฐ์ž๊ฐ€ ๊ฐ€์ง„ ์šฉ๋„์— ๋งž๊ฒŒ ์ ํ•ฉํ•œ ์˜ต์ €๋ฒ„๋ฅผ ํ™œ์šฉํ•  ๊ฒฝ์šฐ, ๋†’์€ ์ตœ์ ํ™”์™€ ์‹ ๋ขฐ์„ฑ์žˆ๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

PerformanceObserver์™€ ReportingObserver๋Š” ์šฉ๋„๋กœ ์ธํ•ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ๊ฑฐ์˜ ์“ธ ์ผ์ด ์—†๋‹ค.

Event Driven๊ณผ์˜ ์ฐจ์ด

์ด๋ฒคํŠธ ๋“œ๋ฆฌ๋ธ๋ณด๋‹ค ํ›จ์”ฌ ํšจ๊ณผ์ ์ธ ์ด๋ฒคํŠธ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ํ–ˆ๋Š”๋ฐ, ๊ณผ์—ฐ ์–ด์งธ์„œ ๊ฐ€๋Šฅํ•œ ๊ฒƒ์ผ๊นŒ?

IntersectionObserver๋ฅผ ์˜ˆ์‹œ๋กœ ๋“ค์–ด๋ณด์ž. ์ด ์˜ต์ €๋ฒ„๋Š” ์š”์†Œ๊ฐ€ ์‹ค์ œ ๋ทฐํฌํŠธ์— ๋ณด์ด๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฐ์ง€ํ•  ๋•Œ ๋งŽ์ด ์“ฐ์ธ๋‹ค.

์šฐ์„ , ์˜ต์ €๋ฒ„ ์—†์ด ์š”์†Œ๊ฐ€ ๋ทฐํฌํŠธ์— ํ‘œํ˜„๋๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๋ ค๋ฉด ์•„๋ž˜ ํ˜•ํƒœ์˜ ์ฝ”๋“œ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

TYPESCRIPT

1
2
3
document.addEventListener('scroll', () => {
  console.log('์Šคํฌ๋กค ์œ„์น˜ ํ™•์ธ ๋ฐ ๋™์ž‘');
});

์š”์†Œ๊ฐ€ ๋ทฐํฌํŠธ์— ํฌํ•จ๋˜๊ธฐ ์œ„ํ•ด์„  ๋ฐ˜๋“œ์‹œ ์Šคํฌ๋กค ์ž‘์—…์ด ์„ ํ–‰๋˜๋ฏ€๋กœ, document๋ผ๋Š” ์ „์—ญ ๊ฐ์ฒด์— ์Šคํฌ๋กค ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๊ฐ์ง€ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

์ด ๋ฐฉ๋ฒ•์˜ ๊ฒฝ์šฐ, ์•„๋ž˜์™€ ๊ฐ™์€ ๋‹จ์ ์ด ์žˆ๋‹ค.

  1. ์Šค์ฝ”ํ”„์— ๋น„ํ•ด ์ ์šฉ ๋ฒ”์œ„๊ฐ€ ๋„ˆ๋ฌด ๋„“๋‹ค. document์— ์ ์šฉ๋˜์—ˆ์œผ๋ฏ€๋กœ, ํ•ด๋‹น DOM์˜ ๊ด€์‹ฌ์‚ฌ์™€ ๊ด€๊ณ„์—†์ด ์Šคํฌ๋กค ์‹œ ํ•ญ์ƒ ์ž ์žฌ์ ์ธ ๋™์ž‘์ด ์ถ”๊ฐ€๋œ๋‹ค.
  2. ๋ฐ˜๋“œ์‹œ ์Šคํฌ๋กค์ด๋ผ๋Š” ์„ ํ–‰ ์ž‘์—…์„ ์š”๊ตฌํ•œ๋‹ค. ์–ด๋– ํ•œ ์ด์œ ๋กœ๋“  ์Šคํฌ๋กค ๋™์ž‘ ์—†์ด ๋ทฐํฌํŠธ์— DOM์ด ํ‘œํ˜„๋˜์–ด๋„, ์Šคํฌ๋กคํ•˜๊ธฐ ์ „๊นŒ์ง„ ๊ด€๋ จ ์ด๋ฒคํŠธ ์ฝ”๋“œ๊ฐ€ ๋™์ž‘ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค.
  3. ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ๊ฐ€ ์ง€์†์ ์œผ๋กœ ์‹คํ–‰๋œ๋‹ค. ๋‹จ์ˆœํžˆ ๋ฌธ์„œ๋ฅผ ์Šคํฌ๋กคํ•  ๋•Œ๋งˆ๋‹ค ์ด๋ฒคํŠธ๊ฐ€ ๊ณผ๋„ํ•˜๊ฒŒ ์‹คํ–‰๋˜๋ฏ€๋กœ, ๋ถˆํ•„์š”ํ•œ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ์‰ฝ๋‹ค.

IntersectionObserver์„ ์ ์šฉํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ํ‘œํ˜„๋œ๋‹ค.

TYPESCRIPT

1
2
3
4
5
6
7
8
9
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('Element is in view!');
    }
  });
});

observer.observe(document.getElementById('tag'));

์œ„ ์ฝ”๋“œ๋Š” ์ด๋ฒคํŠธ ๋“œ๋ฆฌ๋ธ๊ณผ ๋‹ฌ๋ฆฌ, DOM์ด ๋ทฐํฌํŠธ์™€ ๊ต์ฐจํ•˜๋Š” ์ˆœ๊ฐ„์—๋งŒ ์ด๋ฒคํŠธ๊ฐ€ ๋™์ž‘ํ•œ๋‹ค. ๋ถˆํ•„์š”ํ•œ ์ด๋ฒคํŠธ ๋‚ญ๋น„๊ฐ€ ์‚ฌ๋ผ์ง€๋Š” ์…ˆ์ด๋‹ค. ๊ด€๋ จ ์—ฐ์‚ฐ์ด ์ค„์–ด๋“ฌ์— ๋”ฐ๋ผ ๋” ๋‚˜์€ ํผํฌ๋จผ์Šค๋ฅผ ๊ธฐ๋Œ€ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋งˆ์น˜๋ฉฐ

๋‹ค์Œ ์žฅ๋ถ€ํ„ฐ IntersectionObserver๋ฅผ ์‹œ์ž‘์œผ๋กœ ๊ฐ ์˜ต์ €๋ฒ„์— ๋Œ€ํ•ด ์ž์„ธํžˆ ํŒŒํ—ค์ณ๋ณด์ž.


๐Ÿท๏ธ ํƒœ๊ทธ
# JavaScript
# TypeScript
# React
# Observer API
# IntersectionObserver
# ResizeObserver
# MutationObserver
# PerformanceObserver
# ReportingObserver

์ฝ์–ด์ฃผ์…”์„œ ๊ณ ๋งˆ์›Œ์š”!

๋„์›€์ด ๋˜์…จ๋‹ค๋ฉด, ๊ณต๊ฐ์ด๋‚˜ ๋Œ“๊ธ€์„ ๋‹ฌ์•„์ฃผ์‹œ๋Š” ๊ฑด ์–ด๋–ค๊ฐ€์š”?

๋ธ”๋กœ๊ทธ ์šด์˜์— ํฐ ํž˜์ด ๋ฉ๋‹ˆ๋‹ค.

https://hits.seeyoufarm.com/api/count/incr/badge.svg?count_bg=%23484848&icon=react.svg&icon_color=dodgerblue&title=view&title_bg=%23242424&url=https%3A%2F%2Fblog.itcode.dev%2Fposts%2F2024%2F06%2F12%2Fobserver-api-1