[TIL🔥] Day23(9/8)

Introduction

오늘은 무한 스크롤 UI를 구현하는 방법에 대해 배웠다.
어려울 것 같다고 생각했는데 바닐라 JS를 반복해서 쓰니 훨씬 빠르고 쉽게 이해할 수 있었다...이게 다 3주간의 고생이 있었기 때문에 가능하다고 생각한다.
프로그래머스 KDT 최고 ><
scroll event 와 intersection observer을 적용하는 것이 매우 신기하고 재미있었다.
그와 더불어 로토 강사님의 고양이 사진들을 맘껏 감상할 수 있어서 배우는내내 행복했다~🐱❤️ 나만 없어 고양이...

오늘 새롭게 배운 것

무한 스크롤 Ul 구현하기
- Scroll Event 방식
- Intersection Observer 방식

📌 무한 스크롤 UI

무한 스크롤이란?

• 컨텐츠를 페이징하는 기법으로, 아래로 스크롤을 내리다가 마지막 요소를 볼 때쯤에 다음 컨텐츠를 불러오는 방식을 말한다.

무한 스크롤을 구현하는 방식

1. Window의 Scroll Event를 이용하는 방식
2. Intersection Observer 방식

Scroll Event

• window에 scroll event가 일어날 때마다 화면 전체의 height과 스크롤의 위치를 통해 컨텐츠의 끝에 도달했는지를 체크해서 처리
• scroll event가 일어날 때마다 특정 함수가 동작하므로 최적화 처리가 필요하다

window.addEventListener("scroll", () => {
    if ( window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      // 이벤트 발생 시 함수 구현
    }
  });

Intersection Observer

• 내가 타겟으로 지정한 DOM 객체가 지금 사용자의 화면에 보이는 요소인지 아닌지를 구별하는 방식
• 감시하고 있는 요소가 뷰포트에 들어가거나 나갈 때 또는 요청한 부분만큼 두 요소의 교차 부분이 변경될 때마다 특정 함수를 실행하도록 구현
• threshold 값으로 observe 대상이 얼마나 노출되어있는지에 따라 동작 여부 설정 가능
• observe를 이용해 타겟 요소 지정이 가능하고, unobserve를 이용해 타겟 요소 지정 해제가 가능하다

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

Comment

Scroll Event와 Intersection Observer의 차이를 정확히 알고
상황마다 유연하게 적용해야함이 중요함을 배웠다.
나의 사진들을 이용해서 혼자 힘으로 실습을 진행해봐야겠다.

그리고 오늘은 강의를 들으면서 놓친 부분이 없도록 세세하게 노션에 정리하면서 넘어갔다.
이전에는 강의를 한번 쭉 들은 다음에 이해가 가지않는 부분을 한번 더 보는 방식으로 공부했었는데 두가지 방식 모두 장단점이 있는 것 같다.
전자의 경우 시간은 오래 걸리지만, 내가 확실히 이해하지못한 부분을 정확히 짚고 넘어갈 수 있다.
후자의 경우는 반복해서 보다보니 이해가 잘 가긴하지만, 첫번째 볼 때 좀 집중을 덜하는 것 같은 느낌이다.
여러 방법을 시도해보면서 나에게 꼭 맞는 공부법을 찾아봐야겠다.

아 그리고 TMI지만 강의를 듣고 소화하는데 모든 시간을 쏟다보니 알고리즘 문제 풀이에 소홀해졌다ㅠㅠㅠ
그래서, 친구랑 내일부터 1일 1알고리즘 문제 풀기를 실천하기로 했다.
공개적으로 말함으로써 나의 의지를 불태워 볼 생각이다!!!!🔥🔥🔥

참고 사이트

• Intersection Observer API MDN