월요일
오랜만에 쓰는 일기장.... 무한스크롤을 구현했다.
스크롤바에 이벤트를 걸어 무한스크롤을 구현
처음 만들었을 때 사용한 방법
처음만들었던거 치고는 굉장히 쉽고 빠르게 만들었다. 하지만 인터넷의 많은 글을 보니 스크롤에 이벤트를 거는 방법을 추천하지 않는거같았다. 성능에 많은 영향을 끼친다고 한다.
이런 이슈에 대한 해결책으로 IntersectionObserver API
를 많이 사용한다. 따라서 IntersectionObserver API
를 이용하는 방법으로 변경했다.
IntersectionObserver API
인터넷에 있는 글들을 보면 다 너무 어렵게 설명하는데 구글 크롬 디벨로퍼 의 영상을 보면 아주 간단히 잘 설명해준다. 이 영상과 MDN문서 로 기본을 구현해봤다.
그리고 IntersectionObserver
를 컴포넌트 내부에서 구현하다 보니 간단한 로직인데도 불구하고 컴포넌트가 두꺼워지는 문제가 생겼다. 따라서 customHook
으로 만들어서 컴포넌트에서 분리했다. 분리함으로써 다른 프로젝트에서도 사용할 수 있게되는 재사용성
을 얻을 수 있었다.
기타..
html
의 meta
에 대해 조금 더 알게되었다.
이렇게 작성하면, slack
같은 곳에서 해당 링크를 보내면 설명란에 content
에 적은 내용이 나온다. 아래처럼
정리 링크
Last updated