이번주는 주로 css를 사용하여 프로젝트를 그리고
무한스크롤에 대해 찾아보고 공부 하며 적용해봤다.
물론 지금 까지 주로 사용하던 방법이 있긴하나
찾다보니 intersection Observer API라는 것을 찾았고
좋은 방법이라는것을 알게됬다.
장점
무한 스크롤을 구현할 때는 Scroll Event를 감지해서
유저가 화면 제일 끝에 도달했을 때 아이템을 더 불러오게끔
만들수도 있는데 굳이 Intersection Observer API를 사용하여 무한 스크롤을 구현하는 이유는 뭘까요?
- Scroll Event를 사용해서 구현할 때 사용하는 debounce & throttle 을 사용하지 않아도 됩니다..
- Scroll Event를 사용해서 구현할 때 구하는 offsetTop 값을 구할 때 는 정확한 값을 구하기 위해서 매번 layout을 새로 그리는데 이를 Reflow라 합니다. Intersection Observer를 사용하면 Reflow를 하지 않습니다.
- Scroll Event를 사용하는것 보다 비교적 이해및 사용하기가 쉽습니다.
일딴 전에 주로 사용하던 이벤트를 써 구현은 했다.
장점이 명확한 만큼 intersection Observer API을 사용하여 구현하는 방법도 공부하고 적용시켜야겠다.
마치며
지금까진 공부함에 있어 이해하는게 우선이였다면
내가 직접 모든 코드를 작성하며 생각하는 시간을
많이 가져야할것 같다.
이해는 됬는데 막상 작성할려니 막막할 때가 상당히 많은데
이 문제는 내가 직접 코드르 하나하나 생각하며 짜는 경험이
많이 부족한것이라는 생각을 하게됬다.
공부에 하나의 과정이라고 생각하고 멈추지 않고 꾸준히 하자
불안해하지말고 일딴 머든지 하자 머든지 하다보면 결국 내것이 될꺼다.
과정이 거의 끝나감에 있어 불안한 마음이 정말 많이 들지만..
꾸준히 무언가를 계속하면 좋은 결과가 있을꺼라고 믿는다.
i'm groot