[Kream 클론 프로젝트] 상품 더보기 기능

목표

offset/limit parameter를 사용한 상품 더보기 기능 구현

과정

1. 상품 더보기 기능

상품 목록 하단의 더보기 버튼을 누를 때마다 상품을 8개씩 더 로딩해오는 기능을 구현하기위해 예전에 배웠던 query parameter와 offset/limit 개념을 활용했다. offset과 limit을 설정해두면 데이터 요청 후 받아온 결과값에 순서를 부여해서 offset부터 limit까지의 데이터만 보여줄 수 있도록 페이징 처리가 가능해진다. 이렇게 상품 로딩 기능을 구현하는 방식은 크게 두가지로, limit을 고정하고 offset을 조정해서 버튼을 누를 때마다 limit 만큼의 새로운 데이터를 볼 수 있게 하는 방법과 offset을 고정하고 limit을 조정해서 첫 상품부터 limit만큼 추가된 전체 리스트를 보여주는 방법이 있는데, 나는 더보기 기능을 구현해보고 싶어서 후자의 방식으로 코드를 작성했다.

코드🔻

// (...)
const OFFSET = 0;

const ItemList = () => {
  const [limit, setLimit] = useState(8);

  const loadQueryString = `&offset=${OFFSET}&limit=${limit}`;
  const loadMore = () => {
    if (limit > 64) {
      alert('상품이 더 이상 없습니다!');
    } else {
      setLimit(limit + 8);
    }
  };

  useEffect(() => {
// (...)
    fetch(
      `${BASE_URL}products?${categoryString}${priceString}${shoeSizeString}${clothString}&search=${userInput}&sort=${optionValue}${loadQueryString}`,
      {
        method: 'GET',
      }
    )
      .then(res => res.json())
      .then(data => {
        setProductsList(data.product_list);
      });
  }, [
  // (...)
    loadQueryString,
  ]);

// (...)
};
export default ItemList;

결과🔻

2. 페이지 상단 이동 기능
더보기 기능을 구현하고 나니 버튼을 눌렀을 때 상품 목록이 추가되어 Nav bar나 카테고리를 클릭하려면 다시 페이지 상단으로 스크롤해가야하는 번거로움이 생겨버렸다. 간단하게 다시 상단으로 되돌아갈 수 있도록 scroll back to top 버튼을 만들어두고, 사용자의 스크롤을 감지해서 특정 좌표 아래로 커서가 이동되었다면 버튼을 보여주는 기능을 추가했다.

코드🔻

// (...)
const ItemList = () => {
 // (...)
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', () => {
      const isTop = window.scrollY < 500;
      setIsScrolled(!isTop);
    });
  }, []);

  const handleGoToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  return (
    <ContentWrapper>
      <Content>
      // (...)
      </Content>
      {isScrolled && <GoToTopBtn onClick={handleGoToTop}>&uArr;</GoToTopBtn>}
    </ContentWrapper>
  );
};
export default ItemList;

결과🔻

회고

지난 프로젝트에서 다뤄보지 못했던 기능들을 구현해보는 것이 목표였던만큼 이번 프로젝트에서는 생소한 개념을 공부하고 적용해야하는 일이 많았다. 내가 잘 모르는 부분을 계속 맞닥뜨리다보니 조급하고 불안한 마음이 들기도 했지만 이제 하나의 웹사이트가 어떻게 구성되어있고 어떤 방식으로 동작하는지 확실히 알게된 것 같아 뿌듯하다. 1차 프로젝트때에 비해 작업 속도도 훨씬 빨라져서 우리가 완성하게될 사이트가 어떤 모습이어야할지 좀 더 고민해보는 시간을 가질 수 있었던 것도 너무 좋았다.
다만 이번 프로젝트에서는 그동안 다뤄보지 못했던 git rebase를 사용해야했고, 상품 리스트 페이지를 다른 팀원분과 같이 작업하다보니 git과 관련해 이것저것 문제가 많이 발생하기도 했는데, 그동안 작업했던 것들을 날려버릴까봐 심장 떨리는 순간이 많았지만 여러 문제를 해결해나가며 git flow에 대해 더 깊이 이해할 수 있게 되어서 지금 생각해보면 오히려 다행이었던 것 같다. 이제 위코드의 커리큘럼을 거의 다 마치고 취업 준비를 앞두고 있는데, 이곳에서 겪었던 모든 시행착오들이 나를 더 당당한 개발자로 만들어 주기를 바란다🥳