시작

infinite scroll

  • 임시로 json 데이터를 가져와야되는 경우 https://jsonplaceholder.typicode.com/posts 사이트 사용하면 유용함
  • 스크롤 맨위 위치 + 클라이언트에게 보여지는 높이가 스크롤을 내린 값보다 커지는 경우 새로운 데이터를 불러오면됨

pagination

  • 페이지네이션 이론
    • 총 페이지 개수 계산 (totalCount / limit)
    • 현재 페이지의 그룹 계산 (currentPage / pageCount)
    • 현재 페이지 그룹의 첫번째/마지막 숫자 구하기 (마지막 숫자 = pageGroup * pagecount, 첫번째 숫자 = 마지막 숫자 (pagecount - 1)
    • 현재 페이지 이전 숫자 계산 (첫번째 숫자 - 1)
    • 현재 페이지 다음 숫자 계산 (마지막 숫자 + 1)
  • 첫번째 숫자가 0이 아닌 경우 prev 버튼이 보이고, 마지막 숫자가 총 페이지 개수 보다 작은 경우 next 버튼이 보이도록 button 요소를 추가하면 된다. 그리고 첫번째 숫자부터 마지막 숫자도 button 요소를 추가해 보여주면 된다
  • div 요소를 생성 + height를 100%로 지정해 화면을 가린 후 자식 요소로 modal 팝업 요소를 생성해 fixed로 위치 지정
  • window (document보다 상위에 있는 브라우저의 창을 나타나는 개체)에 click 이벤트를 주어 modal 요소를 클릭시 modal 이 사라지도록 하면됨

끝

😊