๐Ÿ’ป ๋ฌดํ•œ ์Šคํฌ๋กค(Infinite Scroll)

hsk10271ยท2022๋…„ 4์›” 24์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
19/50
post-thumbnail

์ด๋ฒˆ ์ฑ•ํ„ฐ๋Š” ๋ฌดํ•œ ์Šคํฌ๋กค์— ๋Œ€ํ•ด ๋‹ค๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค.
โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ“ƒ ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

๋ฌดํ•œ ์Šคํฌ๋กค(Infinite Scroll)

์ปจํ…์ธ ๋ฅผ ํŽ˜์ด์ง• ํ•˜๋Š” ๊ธฐ๋ฒ• ์ค‘ ํ•˜๋‚˜๋กœ, ์•„๋ž˜๋กœ ์Šคํฌ๋กคํ•˜๋‹ค๊ฐ€ ์ปจํ…์ธ ์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋ฅผ ๋ณผ ๋•Œ ๋‹ค๋ฅธ ์ปจํ…์ธ ๊ฐ€ ์žˆ์œผ๋ฉด ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ์‹์ด๋‹ค.

๊ตฌํ˜„ ๋ฐฉ๋ฒ•

  • window์˜ scroll ์ด๋ฒคํŠธ๋ฅผ ํ†ตํ•ด ์ฒ˜๋ฆฌ

window.innerHeight + window.scrollY >= document.body.offsetHeight ์ฝ”๋“œ์ฒ˜๋Ÿผ ์Šคํฌ๋กค์ด ํ™”๋ฉด์˜ ๋งˆ์ง€๋ง‰์— ๋‹ฟ์•˜๋Š”์ง€ ์ฒดํฌํ•œ๋‹ค.

  • Intersection Observer๋กœ ์ฒ˜๋ฆฌ

๐Ÿค” Intersection Observer??
๋Œ€์ƒ ์š”์†Œ์™€ ์ƒ์œ„ ์š”์†Œ, ๋˜๋Š” ๋Œ€์ƒ ์š”์†Œ์™€ ์ตœ์ƒ์œ„ ๋ฌธ์„œ์˜ ๋ทฐํฌํŠธ๊ฐ€ ์„œ๋กœ ๊ต์ฐจํ•˜๋Š” ์˜์—ญ์ด ๋‹ฌ๋ผ์ง€๋Š” ๊ฒฝ์šฐ ์ด๋ฅผ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๊ฐ์ง€ํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜๋‹จ์„ ์ œ๊ณต

์‰ฝ๊ฒŒ ๋งํ•˜์ž๋ฉด ์–ด๋– ํ•œ ๋” ๊ฐ์ฒด๊ฐ€ ์‹œ์•ผ์— ๋‹ฟ์•˜๋Š”์ง€ ์•ˆ ๋‹ฟ์•˜๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

Intersection Observer์€ ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•œ๋‹ค.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) { //entry๊ฐ€ ํ™”๋ฉด์— ๋ณด์ด๋‚˜์š”?
      if (this.state.totalCount > this.state.datas.length) {
        onScrollEnded();
      }
    }
  });
},{
    threshold: 0.5, // ์‹ค์ œ๋กœ ์–ผ๋งˆ๋งŒํผ ๋ณด์˜€๋‚˜์š”!~
  }
}

observer.unobserve(element); // ํŠน์ • ๋Œ€์ƒ ์š”์†Œ์— ๋Œ€ํ•œ ์ฃผ์‹œ๋ฅผ ํ•ด์ œ
observer.observe(element); // ์ฃผ์–ด์ง„ ๋Œ€์ƒ ์š”์†Œ๋ฅผ ์ฃผ์‹œ

๐ŸŒ ๊ถ๊ธˆํ•œ ๋‚ด์šฉ

๐Ÿค APP๊ณผ Main์„ ๋ถ„๋ฆฌํ•˜๋Š” ์ด์œ 

๋ฒŒ์จ ๋ฐ”๋‹๋ผJS๋ฅผ ๋ฐฐ์šด์ง€ 2์ฃผ์ •๋„๊ฐ€ ์ง€๋‚ฌ๋‹ค. ๊ฐ•์˜๋ฅผ ๋“ฃ๋˜ ๋„์ค‘์— ๊ฐ•์‚ฌ๋‹˜์ด app๊ณผ main์„ ๋ถ„๋ฆฌํ•ด์„œ ๋งŒ๋“œ๋Š” ์ด์œ ๋ฅผ ํ•œ๋ฒˆ ์ƒ๊ฐํ•ด๋ณด๋ผ๊ณ  ํ•˜์…”์„œ ๋”ฐ๋กœ ์ƒ๊ฐํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ด ๋ณด์•˜๋‹ค.

ํด๋” ๊ตฌ์กฐ
๐Ÿ“œ index.html
๐Ÿ“ฆ src
โ”ฃ ๐Ÿ“œ App.js
โ”— ๐Ÿ“œ main.js

//  index.html
<body>
  <script src='/src/main.js', type='module'></script>
</body>

// main.js
import App from './App.js'
export default function main(){
  // App ์ƒ์„ฑ(์„ ์–ธ)
  new App()
}

// App.js
export default function App(){
    // ๊ธฐ๋Šฅ ์‹คํ–‰
}

๋‚ด๊ฐ€ ๊ณ ๋ฏผํ•ด ๋ณธ ๊ฒฐ๊ณผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•ด์„œ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ํŽธํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ(?) ์ด๋‹ค. ์•„๋ฌด๋ž˜๋„ ๋‘๊ฐœ์˜ ํŒŒ์ผ์„ ํ•˜๋‚˜๋กœ ๊ด€๋ฆฌํ•˜๋‹ค ๋ณด๋ฉด ํ๋ฆ„์ด ๊ผฌ์ผ ์ˆ˜ ์žˆ๋‹ค๊ณ  ๋Š๊ปด์กŒ๋‹ค. ์ฆ‰ ๋ณต์žก๋„๊ฐ€ ์ฆ๊ฐ€ํ•˜๊ณ  ์„œ๋กœ ๋งŽ์ด ์—ฐ๊ด€๋˜์–ด ์žˆ์„ ์ˆ˜๋ก ์˜์กด๋„๊ฐ€ ์ปค์ง€๊ธฐ ๋•Œ๋ฌธ์— ์„ ์–ธํ•˜๋Š” ๊ณณ๊ณผ ์‹คํ–‰ํ•˜๋Š” ๊ณณ์€ ๋ถ„๋ฆฌํ•˜์—ฌ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ํŽธํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

๊ฐ•์‚ฌ๋‹˜์ด ๋ง์”€ํ•ด์ฃผ์‹  ๋‹ต๋ณ€
์ปดํฌ๋„ŒํŠธ์˜ ์„ ์–ธ๋ถ€์™€ ์‹คํ–‰๋ถ€๋ฅผ ๋ถ„๋ฆฌ์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ!

๐Ÿ˜ฐ ์–ด๋ ค์› ๋˜ ๋‚ด์šฉ

  • Intersection Observer

๐Ÿ”ฅ ์˜ค๋Š˜์˜ ๋Š๋‚€์ 

๋ฌดํ•œ ์Šคํฌ๋กค์—์„œ Intersection Observer์ด๋ผ๋Š” ๊ฒƒ์„ ์ฒ˜์Œ ์•Œ์•˜๋‹ค. Intersection Observer์ด ํŽธํ•ด๋ณด์ด์ง€๋งŒ ์Šคํฌ๋กค, ํ˜น์€ ํŽ˜์ด์ง€๋กœ ์ฒ˜๋ฆฌ ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์œผ๋‹ˆ ์‚ฌ์šฉ์ž๊ฐ€ ํŽธํ•  ๊ฒƒ ๊ฐ™์€ ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ฒ˜๋ฆฌํ•ด์•ผ ๊ฒ ๋‹ค๊ณ  ๋‹ค์งํ•˜์˜€๋‹ค.

App.js์™€ main.js๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ์ด์œ ๋ฅผ ์ƒ๊ฐํ•ด๋ณด์•˜์ง€๋งŒ ์ด์œ ์— ๋Œ€ํ•ด ํ™•์‹ ํ•˜์ง€ ๋ชปํ•˜๊ฒ ๋‹ค. '์•„๋งˆ ์ด๋Ÿด ๊ฒƒ์ด๋‹ค..'๋กœ ์ถ”์ธกํ•˜์˜€์ง€๋งŒ ๋‹ค๋ฅธ ๋ถ„๋“ค์˜ ์ƒ๊ฐ๋„ ๊ถ๊ธˆํ•˜๋‹ˆ ์ด ๊ธ€์„ ๋ณด์‹ ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ๋‹ฌ์•„์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹น.๐Ÿ‘

๋“œ๋””์–ด! ๋ฐ€๋ฆฐ ๊ฐ•์˜๋ฅผ ๋ชจ๋‘ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค! ๋‹ค์‹œ ์ผ์ƒ์œผ๋กœ ๋Œ์•„์™”์œผ๋‹ˆ ๋‹ฌ๋ ค๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค! ์•„์ž์•„์ž

๐Ÿ—ฃ ์˜ค๋Š˜์˜ TMI

์ด์ œ ๋‚ ์”จ๊ฐ€ ์ง„์งœ ๋ด„์ด๋‹ค!
๊ฝƒ๊ฐ€๋ฃจ๋ฅผ ๋‚ ๋ ค~~ ๐ŸŒธ๐ŸŒธ

Refer

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค
IntersectionObserver

์˜ค๋Š˜์˜ ๋‚ด์šฉ ์ •๋ฆฌ

๋ฐ๋ธŒ์ฝ”์Šค Day25

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€