Frontend2 [React] Scroll event를 이용하여 Infinite scroll 구현하기 Infinite scroll을 구현하는 데에는 여러 방법이 있는데 아래 예시는 그 중 Scroll event를 이용하여 Hook을 만들었다. 현재 유저가 보고있는 View의 위치와 Document의 전체 길이를 비교하여 View가 Document의 가장 하단인지 확인한다. 가장 아래일 때 isFetching에 True를 세팅한다. ※ lodash의 throttle 함수를 이용하여 "Scroll" event가 과도하게 호출되는 것을 막는다. isFetching이 변경되면 이를 의존성 배열로 갖는 useEffect 함수가 실행된다. useEffect 함수 내에서는 isFetching이 True일 경우 매개변수로 전달된 Callback함수를 실행한다. Callback 함수는 Element를 추가하는 기능을 수.. 2023. 7. 2. [React] Redux Dev Tools, Development server 에서만 실행되게 설정하기 Redux Dev Tools는 디버깅에 매우 유용한 기능이지만 Redux 내 유저에게 공개되어서는 안되는 정보가 담겨있을 수 있어 배포 버전에서는 사용을 제한해야하는 경우가 있다. 이 때 아래와 같이 사용한다. // configStore.js import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: { }, devTools: process.env.NODE_ENV !== 'production' }, ); export default store; devTools: process.env.NODE_ENV !== 'production' 구문을 리듀서에 추가하여 설정할 수 있다. process.env.NODE_E.. 2023. 7. 2. 이전 1 다음