폼 제출시 연속으로 클릭하면 여러번 호출되어 중복으로 등록되는 경우가생겨 Lodash 라이브러리를 사용하기로 했다 Lodash 모듈화, 성능 및 기타 기능을 제공하는 자바스크립트 유틸리티 라이브러리 https://lodash.com/ Throttle와 Debounce Throttle throttle(func, [wait=0], [options={}]) =>throttle은 콜백 함수(func)를 일정 주기(wait) 내에 한 번만 호출한다. 특히 scroll, mousemove 이벤트와 같이 짧은 시간에 굉장히 많이 실행되는 이벤트에 사용한다. 스로틀링(Throttling)은 함수가 지정된 시간 동안 최대 한 번 호출되도록 하는 프로그래밍 방법이다 스로틀링은 함수를 호출할 수 있는 최대 횟수를 조절한다 ..

let pageCount = 5; if (lastNum > total) { pageCount = total % 5; }​ let pageCount = 5; if (lastNum > total) { pageCount = total % 5; } 5개씩 보여지는 Pagination Pagination의 맨앞에 들어가는 버튼이다. 5개씩 잘라서 만든다 첫 번째 Page 1번 두 번째 Page 6번 세 번째 Page 11번 네 번째 Page 16번 첫 번째 페이지 = 현재 페이지 - (현재페이지 % 5) + 1 마지막 페이지 = 현재 페이지 - (현재페이지 % 5) + 5 공식을 같게된다 만약 마지막 페이지인 5 번을 누르면 onClick함수로 인해 바로 6으로 되어 버리는 현상이 발생하고 화살표만으로 다음페이지..

페이지 네이션이란 한정된 네트워크 자원을 효율적으로 활용하기 위해 특정한 정렬 기준에 따라 데이터를 분할하여 가져오는 것이다 1. 오프셋 기반 페이지네이션(Offset-based Pagination) - DB의 offset쿼리를 사용하여 ‘페이지’ 단위로 구분하여 요청/응답 2. 커서 기반 페이지네이션(Cursor-based Pagination) - Cursor 개념을 사용하여 사용자에게 응답해준 마지막 데이터 기준으로 다음 n개 요청/응답 1. Offset-based Pagination 백엔드에서는 만약 MySQL 에서라면 간단하게 OFFSET 쿼리와 LIMIT 쿼리에 콤마를 붙여 '건너 뛸' row 숫자를 지정하여 페이지네이션을 구현한다. 즉, 페이지 단위로 구분한다. 요청한 데이터를 바로 조회하는 ..

useEffect useEffect는 컴포넌트들이 render와 paint 된 후 실행되고. 비동기적(asynchronous) 으로 실행된다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게된다 리액트 앱에서 렌더링이 트리거 됨 (dependency 수정됨) 리액트가 컴포넌트를 렌더링함 브라우저가 화면을 새로 그림 useEffect가 백그라운드에서 실행됨 useEffect 안에서 DOM 노드 ref를 조작함 리렌더링, 이펙트가 DOM을 수정하는 동안 잠시 화면이 빔. 브라우저가 화면을 새로 그림 import { useEffect, useState } from "react"; function App() { const..