디바운싱(Debouncing)과 쓰로틀링(Throttling)의 개념과 차이

웹 개발을 하다 보면 스크롤 이벤트, 검색창 입력, 윈도우 리사이즈 같은 이벤트가 너무 자주 호출되어 성능이 저하되는 경우가 많은데, 이럴 때 유용하게 쓰이는 기술이 바로 디바운싱(Debouncing)과 쓰로틀링(Throttling)이다. 이번 글에서는 두 개념의 차이와 구현 방법을 알아보고자 한다!! 1. 디바운싱(Debouncing)란?디바운싱은 이벤트가 연속해서 발생할 때, 마지막 이벤트가 끝난 후 일정 시간 동안 대기한 후에 함수를 실행하는 방식이다.즉, 사용자가 입력을 멈춘 뒤에만 함수를 실행한다.활용 예시검색창에서 사용자가 타이핑을 멈춘 뒤 API 호출창 크기 변경이 끝난 후 레이아웃 계산버튼 클릭 방지 (더블 클릭 방지)동작 예시이벤트: A ---- A ---- A ----(300ms 대기)..

• format_list_bulleted 코딩/JavaScript
• · 2025. 8. 12.
• textsms

JavaScript 호이스팅이란?

1. 호이스팅이란?자바스크립트 엔진이 실행 전에 변수·함수의 “선언부”를 스코프의 최상단으로 미리 등록하는 과정이다. 실제 코드 위치가 이동하지 않고, 메모리 안에서 이름표가 먼저 만들어지는 것뿐이다.2. 호이스팅을 왜 하는지한 번만 스캔해 두 단계로 실행하기 위해서이다.① 준비 단계(Creation Phase): 스코프 안에서 선언을 수집해 메모리에 올린다.② 실행 단계(Execution Phase): 위에서부터 한 줄씩 코드를 실행한다.이렇게 하면 런타임에 선언 순서를 검사하는 비용이 줄어든다. 엔진은 “이미 어떤 식별자가 존재하는지”를 알고 시작하므로 이름 충돌, 스코프 체인 탐색을 빠르게 처리할 수 있다.3. 변수 호이스팅3-1. varconsole.log(a); // undefinedvar a ..

• format_list_bulleted 코딩/JavaScript
• · 2025. 8. 7.
• textsms

JavaScripts 클로저(Closure)란

오늘은 클로저에 대해서 코딩을 하면서 자주 쓰곤 하지만, 말로 설명을 할 자신이 없기에 글로 정리해보고자 한다. 클로저란?클로저 (Closure) 는 영어로 "닫힘", "폐쇄"라는 의미를 갖고 있는데, JS에서는주변 상태(렉시컬 환경)에 대한 참조와 함께 생성된 함수의 조합을 의믜한다. 즉, 내부 함수가 외부 함수의 변수(스코프)에 접근할 수 있도록 만든 구조로, 함수가 생성될 때마다 해당 함수는 자신이 선언된 당시의 환경을 기억하며, 이때 클로저가 함께 생성된다. 그렇다면 클로저는 언제 사용되는지 알아보자. 클로저는 언제 사용될까?클로저는 외부 변수의 상태를 유지하거나 은닉하면서, 함수가 종료된 후에도 해당 변수에 계속 접근해야 할 때 사용된다. 그럼 실제 상황별로 예시를 통해 살펴보자. 1. 변수..

• format_list_bulleted 코딩/JavaScript
• · 2025. 8. 6.
• textsms