API를 연동해서 키워드 검색 등을 구현할 때 콘솔에 한 글자, 한 글자 정성스럽게 찍히는 것을 경험해보았을 것이다. (하게 될 것이다.) 이런 경우 API는 매 타이핑마다 호출이 되고 이는 곧 리소스 낭비와 성능 저하로 이어진다.이럴 때 자주 발생하는 이벤트들을 적절히 Filtering 해야할 필요가 있다. Debounce와 Throttle 기법은 이러한 이벤트들을 Flitering하는 기법의 종류이다.💡 먼저 Debounce는- 회원가입 필드 유효성 검사- 키워드 검색 혹은 자동 완성 기능에서 API 함수 호출 횟수를 최대한 줄이고 싶을때많이 사용된다.왜 저런 상황에 많이 사용되느냐?일정 시간 동안 연속적으로 발생했던 이벤트들 중 마지막만 실행시켜 과도한 호출이나 렌더를 막아 주기 때문이다.?..
javascript
콜백 패턴에 대해 알기 전에 동기와 비동기에 대해 짚고 넘어가자. 동기 비동기 순차적으로 실행 한 작업이 완료 되어야 다음 작업 시작 장점: 프로그램의 흐름을 이해하고 예측하기 쉬움 단점: 작업이 끝나기를 기다리는 동안 다른 작업을 수행할 수 없어 효율성 떨어짐 각각 독립적으로 실행 완료를 기다리지 않고 다른 작업 시작 장점: 효율적으로 작동하며 여러 작업을 동시에 처리 단점: 프로그램의 흐름을 추적하고 관리가 복잡함 비동기 코드가 어려운 이유 일반적인 js코드 작성 방식은 동기식 (자바스크립트는 위에서 아래로 순차적으로 코드를 실행하기 때문) 비동기는 내부적으로 비동기 메커니즘 ( 예: 이벤트루프 )을 통해서 도익와는 다른 방식으로 처리 개발자는 코드를 동기적으로 작성하지만, 비동기 코드는 시스템의 내..
버블링과는 반대로 최상위 요소에서 시작하여 발생한 요소로 내려가는 과정 addEventListener 함수의 세 번째 인자로 true를 설정함으로써 이벤트 캡처링을 활성화 (세번째 인자의 기본 값은 false로 이벤트 캡처링을 활성화 할건지 여부를 정한다.) 일반적이지 않으며 특별한 경우에 사용한다. ( 하위 요소의 이벤트 처리 방지) DIV1 코드의 addEventListener 세번째 인자에 true로 설정한다. 그 다음 버튼을 클릭하면 버블링과 다르게 DIV1에 대한 alert만 뜨게 된다. ex) 버튼을 클릭하면 button alert 대신 '로그인을 먼저 해주세요' 라는 alert이 먼저 뜨게 하고 싶다. 그럴때 button을 감싸고 있는 최상위 요소 div에 이벤트리스너를 추가하면서 세번째 인..
이벤트가 가장 깊은 요소에서 시작하여 점차 상위 요소들로 전파되는 과정 웹 브라우저에서 이벤트를 처리하는 기본 메커니즘 각 Div1 , Div2, button 을 클릭했을때 alert이 뜨게 만들어본다. 그 후 제일 안쪽에 있는 button을 클릭하면 button에 대한 alert, Div2에 대한 alert, Div1에 대한 alert이 차례로 뜬다. 이것이 이벤트 버블링. 실제 이벤트가 발생한 요소부터 시작해서 트리를 따라 상위 요소들로 전파 됨. 이 과정은 보통 해당 요소의 부모 요소에서 시작해서 최상위 요소인 body, html에 도달할 때 까지 계속 된다. 장점 중복 감소 - 하위 요소에서 발생하는 이벤트를 상위에서 한 번에 처리 동적인 요소 처리 - 페이지가 로드된 이후 추가되는 요소에 대해서..
기본형 데이터와 다른 메모리 할당 매커니즘을 가지고 있어 데이터 가변성을 나타내고 있다. 참조형 데이터의 종류에는 아래와 같다. object array, function, RegExp, Set / WeakSet Map / WeakMap 1. let a = { name: "Kim" } 이라는 객체 선언 변수 영역 변수명 a 주소 @201 데이터 영역 (Stack) 주소 201 202 데이터 @401~? "Kim" 데이터 영역 (Heap) 주소 401 402 이름 name 데이터 @202 객체의 경우 여러개의 변수와 값을 모아놓은 그룹이기 때문에 기본형과는 다르게 데이터 영역 주소 201에 모든 데이터 값을 저장할 수가 없다. 또 특이하게 주소 201의 데이터에 ~? 라고 표시가 되어있는데 이는 이 객체가 ..
데이터 타입에는 기본형 타입, 참조형 타입이 있으며 이 방식은 저장 방식, 접근 방식, 복사 방식에서 차이를 보인다. 이번에 알아볼 기본형 타입은 변경할 수 없는 불변성을 가지고 있으며 아래의 종류와 같은 타입이 포함 된다. string nunber boolean null undefined symbol Bigint 위 타입들의 데이터를 복사할때는 값 자체가 복사된다. 그럼 기본형 데이터가 메모리 할당될 때 어떤 일이 일어나는지 알아보자. 1. 여기 let a= 1; 이라고 선언하는 순간 변수 영역과 데이터 영역에 저장된다. 변수영역 변수명 a 주소 @201 데이터 영역 주소 201 202 데이터 1 이렇게 변수 영역에서는 식별자를 위한 공간으로, 데이터 영역에서는 실제 값을 저장하는 역할을 하여 서로가 ..
직접 정리 해보려했는데 설명해야하는 양이 많아 어떻게 정리해야하지..하던 도중 아주 잘 정리된 포스트 발견! https://blog.gamguma.dev/post/2022/04/js_execution_context JS Execution Context (실행 컨텍스트) 란? | 감구마 개발블로그 코어자바스크립트를 읽고 얻은 지식 중 실행 컨텍스트, 콜스택 | JS Execution Context, JS CallStack blog.gamguma.dev 너무 알기 쉽게, 잘 설명해주셔서 빠르게 이해할 수 있는데 도움이 되었다.
function createCounter() { let count = 0; } 현재 count 변수는 Closure가 적용되기 전이라 자유 변수 function createCounter () { let count = 0; return function (){- 익명 함수가 호출 될 때 마다 현재 count값을 1씩 증가시킨다. count += 1; return count; } } const myCounter = createCounter(); console.log(myCounter());// 1 console.log(myCounter());// 2 console.log(myCounter());// 3 이때 익명 함수가 Clousure의 핵심 Closure 덕분에 count +=1의 count 변수가 상태를 ..
