게시글을 보여줄 때 다음 페이지를 보는 방식에는 2가지가 있다.

첫 번째는 페이지네이션으로 흔히 1, 2, 3, 4 버튼이 있고 해당 버튼을 누르면 해당 페이지를 보여주는 형식이다.

두 번째는 무한 스크롤으로 페이지로 이동하는 버튼이 없고 사용자가 마지막 게시글을 읽을 때쯤 다음 게시글을 보여주는 형식이다.

사용자 입장에서 페이지를 이동하는 것보다 스크롤을 이동하면 자동적으로 다음 페이지를 보여주는 것이 좋을 것 같아서 무한 스크롤로 게시글, 채팅방 리스트를 보여주기로 결정했다.

무한 스크롤을 구현하기 위해서는 **IntersectionObserver**라는 Web API를 사용해야한다.

new IntersectionObserver(callback, option) 으로 IntersectionObserver 객체를 생성 할 수 있다.

option에는 root, rootMargin, threshold가 있다.

root

rootMargin

threshold

• 감시 대상이 어느정도 보이면 볼 수 있다고 취급할 것인지를 나타낸다.
• 만약 threshold가 0이라면 감시 대상의 하나의 픽셀이라도 보이면 볼 수 있다고 취급한다.
• 만약 threshold가 1이라면 감시 대상이 온전히 보이면 볼 수 있다고 취급한다.