[JavaScript] ๋ฌดํ•œ ์Šคํฌ๋กค ๊ตฌํ˜„ํ•˜๊ธฐ(Intersection Observer API)
ยท
Frontend/JavaScript
๋ฌดํ•œ ์Šคํฌ๋กค(Infinite Scroll)์ด๋ž€? ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€ ํ•˜๋‹จ์— ๋„๋‹ฌํ–ˆ์„ ๋•Œ, ์ฝ˜ํ…์ธ ๊ฐ€ ๊ณ„์† ๋กœ๋“œ๋˜๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX) ๋ฐฉ์‹์ด๋‹ค. ํ•œ ํŽ˜์ด์ง€ ์•„๋ž˜๋กœ ์Šคํฌ๋กค ํ•˜๋ฉด ๋์—†์ด ์ƒˆ๋กœ์šด ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๊ฒŒ ๋˜๊ณ  ์ด๋กœ ์ธํ•ด ๋งŽ์€ ์–‘์˜ ์ฝ˜ํ…์ธ ๋ฅผ ์Šคํฌ๋กค ํ•ด์„œ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ํŽ˜์ด์ง€๋„ค์ด์…˜์ด ์•„๋‹Œ ๋ฌดํ•œ ์Šคํฌ๋กค๋กœ ๊ตฌํ˜„ํ•˜๋ ค๋Š” ์ด์œ โ“ ์ƒํ’ˆ ๋ชฉ๋ก์—์„œ ์ƒํ’ˆ์„ ๋ณด์—ฌ์ฃผ๊ณ ์ž ํ•  ๋•Œ ํŽ˜์ด์ง€๋„ค์ด์…˜, ๋ฌดํ•œ ์Šคํฌ๋กค ์ค‘ ๋ฌด์—‡์ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋”์šฑ ์ข‹๊ฒŒ ํ•  ์ˆ˜ ์žˆ์„์ง€ ๊ณ ๋ฏผํ•œ ๋์— ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์„ ๊ณ ๋ คํ•ด์„œ ๋ฌดํ•œ ์Šคํฌ๋กค์„ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.(์ฐจํ›„์— ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋ฆฌํŒฉํ„ฐ๋ง ํ•  ๊ณ„ํš๐Ÿ™‡๐Ÿป) ๋˜ํ•œ, ๋‹ค์Œ ์ƒํ’ˆ์„ ๋ณด๊ธฐ ์œ„ํ•œ ์‚ฌ์šฉ์ž์˜ ํด๋ฆญ์„ ์ตœ์†Œํ™”ํ•˜๊ณ  ๋” ์‰ฝ๊ฒŒ ๋‹ค์–‘ํ•œ ์ƒํ’ˆ์„ ๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ํŒ๋‹จํ–ˆ๋‹ค. ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ • ๋ฌดํ•œ ์Šคํฌ๋กค์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์Šคํฌ..
_์„ฑํ˜ธ_
'Intersection Observer API' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก