πŸ’» TIL 19 | λ¬΄ν•œ 슀크둀(Infinite Scroll)

hsk10271Β·2022λ…„ 4μ›” 24일
0

TIL

λͺ©λ‘ 보기
19/35
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개의 λŒ“κΈ€