하루살이 개발일지

Redux의 정의 Redux는 JavaScript 애플리케이션의 상태(state)를 관리하는 라이브러리 이전 상태와 액션을 참조하여 새로운 상태를 생성하는 함수인 리듀서를 이용하여 작동 Redux가 필요한 이유 복잡한 JavaScript 애플리케이션에서 상태(state)를 관리하기는 쉽지 않음 Redux는 중앙 집중식 상태 관리를 통해 코드를 보다 예측 가능하고 유지보수하기 쉽게 만들어 줌 즉 Redux는 상태 변화를 예측 가능하고 일관된 방법으로 관리하게 해주며, 큰 규모의 어플리케이션에서 상태를 효과적으로 관리하는데 좋음 Redux의 기본 폴더구조 및 각 폴더와 파일의 역할 Redux의 기본 폴더구조 src/ actions/ index.js reducers/ index.js store.js Redux..

전개 - 버그 발생 React로 debounce와 throttle 함수를 공부하다가 갑자기 throttle 함수가 동작하지 않는 문제가 발생하였다. 문제가 되었던 코드는 다음과 같다. import { useEffect, useState } from "react"; import _ from "lodash"; export const Throttle = () => { const [count, setCount] = useState(0); // Throttle 사용 시 const throttledCountUp = _.throttle( () => setCount((prevCount) => prevCount + 1), 1000 ); const throttledCountDown = _.throttle(() => { s..

디바운스 & 스로틀이란 ? scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생함. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있음. 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화하여 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법 디바운스 [디바운스란?] 짧은 시간 간격으로 이벤트 연속해 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 하는 것 즉 짧은 시간 간격으로 발생하는 이벤트를 그룹화하여 마지막에 한 번만 이벤트 핸들러가 호출되도록 함 [사용 예시] 텍스트 입력 필드에서 input 이벤트가 짧은 시간 간격으로 연속..

호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후 호출되도록 타이머 함수를 사용해 함수 호출을 예약하는 것 타이머 함수 자바스크립트의 타이머 함수 생성 함수 : setTimeout, setInterval 제거 함수 : clearTimeout, clearInterval 타이머 생성 함수 setTimeout과 setInterval은 모두 일정 시간 경과 이후 콜백 함수가 호출되도록 타이머를 생성함 즉 생성한 타이머가 만료되면 콜백 함수가 호출됨 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가짐 → 두 가지 이상의 테스크를 동시에 실행할 수 없음 즉 자바스크립트 엔진은 싱글 스레드로 동작 이런 이유로 타이머 함수 setTimeout과 setInterval은 비동기 처리 방식으로 동..