javascript

[Javascript] Throttle 과 Debounce

Throttle과 Debounce의 등장 배경 Throttle 과 Debounce 는 DOM 이벤트를 제어하는 방법으로 자주 호출되는 이벤트의 실행 빈도를 줄여 성능상의 이점을 얻기 위해 사용한다. Throttle과 debounce를 사용할 수 있는 대표적인 상황은 아래와 같다. 스크롤링을 통한 데이터 노출 검색어 입력시 자동완성 예를 들어 스크롤 이벤트를 감지하여 API를 호출해 데이터를 가져오고자 하는 상황이라고 가정해보자. 이때, 사용자가 스크롤을 움직일 때마다 수많은 스크롤 이벤트가 발생할 것이고 이는 수많은 API 호출로 이어질 것이다. 매번 스크롤 이벤트에 대한 콜백이 발생하고 해당 콜백의 수행은 매우 큰 리소스를 차지하게 된다. 이는 결국 서비스의 성능과 사용자의 경험 저하를 야기하게 된다...

[Javascript] 변수, 호이스팅, TDZ

✨ 변수의 종류 let const var var는 한번 선언된 변수를 다시 선언할 수 있다. // ✅ var name = 'Mike'; console.log(name); // Mike var name = 'Jane'; console.log(name); // Jane // ❌ let name = 'Mike'; console.log(name); // Mike let name = 'Jane'; // error! (동일한 이름으로 재선언 불가) console.log(name); var는 선언하기 전에 사용할 수 있다. console.log(name); // undefined var name = 'Mike'; 위의 예제에서 에러가 발생하지 않는다. var는 아래처럼 동작하기 때문이다. var name; conso..

[Typescript] Advanced-Types & Utility-Types 정리

infer 타입변수를 참조하기 위해 사용 조건부 타입의 extends 절에서 infer 키워드 사용 가능 example type First = T extends [infer U, ...unknown[]] ? U : never; type SomeTupleType = [string, number, boolean]; type FirstElementType = First; // string example: infer 키워드 여러개 사용 type Unpacked = T extends (infer U)[] ? U : T extends (...args: any[]) => infer U ? U : T extends Promise ? U : T; type T0 = Unpacked; // string type T1 = U..