[JavaScript] ๋ฌดํ ์คํฌ๋กค ๊ตฌํํ๊ธฐ(Intersection Observer API)
ยท
Frontend/JavaScript
๋ฌดํ ์คํฌ๋กค(Infinite Scroll)์ด๋? ์ฌ์ฉ์๊ฐ ํ์ด์ง ํ๋จ์ ๋๋ฌํ์ ๋, ์ฝํ
์ธ ๊ฐ ๊ณ์ ๋ก๋๋๋ ์ฌ์ฉ์ ๊ฒฝํ(UX) ๋ฐฉ์์ด๋ค. ํ ํ์ด์ง ์๋๋ก ์คํฌ๋กค ํ๋ฉด ๋์์ด ์๋ก์ด ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ฒ ๋๊ณ ์ด๋ก ์ธํด ๋ง์ ์์ ์ฝํ
์ธ ๋ฅผ ์คํฌ๋กค ํด์ ๋ณผ ์ ์๋ค. ํ์ด์ง๋ค์ด์
์ด ์๋ ๋ฌดํ ์คํฌ๋กค๋ก ๊ตฌํํ๋ ค๋ ์ด์ โ ์ํ ๋ชฉ๋ก์์ ์ํ์ ๋ณด์ฌ์ฃผ๊ณ ์ ํ ๋ ํ์ด์ง๋ค์ด์
, ๋ฌดํ ์คํฌ๋กค ์ค ๋ฌด์์ด ์ฌ์ฉ์ ๊ฒฝํ์ ๋์ฑ ์ข๊ฒ ํ ์ ์์์ง ๊ณ ๋ฏผํ ๋์ ๋ชจ๋ฐ์ผ ํ๊ฒฝ์ ๊ณ ๋ คํด์ ๋ฌดํ ์คํฌ๋กค์ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค.(์ฐจํ์ ํ๋ก์ ํธ๋ฅผ ๋ฐ์ํ์ผ๋ก ๋ฆฌํฉํฐ๋ง ํ ๊ณํ๐๐ป) ๋ํ, ๋ค์ ์ํ์ ๋ณด๊ธฐ ์ํ ์ฌ์ฉ์์ ํด๋ฆญ์ ์ต์ํํ๊ณ ๋ ์ฝ๊ฒ ๋ค์ํ ์ํ์ ๋ณผ ์ ์์ ๊ฒ์ด๋ผ๊ณ ํ๋จํ๋ค. ๊ตฌํํ๋ ๊ณผ์ ๋ฌดํ ์คํฌ๋กค์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์คํฌ..