개발 계획

1. 게시물 리스트 페이지 구현

제휴 맺기 게시판은 사장님들끼리 제휴 정보를 공유하고, 제휴를 맺을 수 있도록 하는 게시판이다.

완성된 디자인에 따라 제휴 맺기 게시판을 구현해보았다.

개발 기록

Infinite Scrolling

게시물들을 리스트로 화면에 뿌려줄 때, 모바일 환경의 사용자들을 고려하여 Infinite Scrolling 기법을 택했다.

import { useInView } from "react-intersection-observer";

useInView는 observer를 활용한 React hook이다.

페이지 최하단에 div 태그의 useInview 요소를 배치하고, 해당 컴포넌트가 사용자 화면에 노출되면 True값을 반환한다.

그걸 이용해서, 사용자가 마지막 요소(useInView 요소)를 보고 있고, 로딩 중이 아닐 시에 현재 페이지 넘버에 1을 더해서 다음 페이지로 설정하도록 했다.