[Next.js + 타입스크립트] 무한 스크롤(Infinite scroll) 구현해보기(feat. Intersection observer)
개요 무한스크롤을 구현하는 방법에는 스크롤의 높이와 클라이언트(화면)의 높이를 계산하는 스크롤 이벤트 기반 구현 방식도 있지만 (참고 사이트1,참고 사이트 2) 저는 IntersectionObserver 라는 WebAPI를 이용해서 무한스크롤을 구현해보았습니다. 스크롤 이벤트 기반 방식은 스크롤이 될 때마다 자바스크립트 엔진이 계속해서 함수를 호출하게 되는데 Intersection observer는 브라우저단에서만 동작하고 필요할 때만 자바스크립트 코드를 불러오므로 성능상에서도 이점이 있고 무한 스크롤 외에도 여러 곳에서 사용할 여지가 있는 확장성이 있는 API라는 생각이 들었기 때문입니다! 동작 방식 IntersectionObserver의 동작 방식은 매우 직관적이고 심플합니다. 관찰자(observer..
개발냥이/타입스크립트(Typescript)
2023. 7. 15. 12:02
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 프로그래머스
- 자바dp
- JPA
- Spring
- 리액트
- 타입스크립트
- JavaScript
- 형변환
- 이분탐색
- 백준
- dfs
- 자바bfs
- 자바
- Comparator
- java
- 해시맵
- SQLD
- 자바스크립트
- CS
- 알고리즘
- SQL
- 스프링부트
- 스프링
- Nest
- Algorithm
- 정렬
- DP
- BFS
- 자바트리
- Queue
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함