Eyes0n / POB_hayanMind

hayanMind Infinite Sccroll

🎥 Infinite Scroll 영상

📝 과제 구현 목록

• 무한 스크롤 구현
  • Intersection Observer 커스텀 훅을 사용한 무한 스크롤 기능 구현
  • 스크롤이 중간 쯤 내려왔을 때 API요청 (데이터가 끊기지 않고 렌더링되기 위함)
  • 마지막 page 도달 후(fetch의 응답값이 빈 배열인 경우) 다음 요청을 하지 않도록 분기 처리 및 'loading...'보이지 않도록 함

👯‍♂️ 팀원

• 라끄베르 김남주
• 잠 좀 자고싶은 박현찬

⚙️ 설치 및 실행

1. Clone

   git clone https://github.com/skawnkk/hayanMind.git
   

2. Install NPM packages

   yarn install
   

3. Start

   yarn start
   

🧬 프로젝트 구조

  src/
  ㄴ components/
    ㄴ Card.js
    ㄴ InfiniteCardList.js

  ㄴ hook/
    ㄴ useObserver.js

  ㄴ styles/
    ㄴ GlobalStyle.js
    ㄴ Theme.js

  ㄴ utils/
   ㄴ fetches.js

  ㄴ App.js
  ㄴ config.js
  ㄴ index.js
  

🧳 Packages

• CRA
• react-hooks
• styled-components
• styled-reset