본문 바로가기

디바운스2

검색 기능 구현(feat. 디바운스) 📌 구현목표- 검색창에서 입력이 바뀔 때마다 서버에 요청을 즉시 보내지 않고, 입력이 멈춘 뒤 일정 시간(300ms) 이후에 검색 요청을 보내기- 검색 결과를 부모 컴포넌트에 전달해서 리스트 렌더링 제어하기1. SearchBar 컴포넌트 타입 정의SearchBar는 공통 컴포넌트라 기존에는 onSearchResult의 파라미터 타입을 단순히 any[]로 지정해두었다. 하지만 any를 쓰면 TypeScript가 어떤 타입의 배열이 넘어오는지 정확하게 추론할 수 없다. 😢 Project[]를 받아야 할 컴포넌트에 실수로 Study[]를 넘겨도 오류 없이 실행되어 런타임 버그로 이어질 수 있기 때문에Discriminated Union을 사용했다! https://radlohead.gitbook.io/type.. 2025. 4. 7.
[코어자바스크립트] 5장. 클로저 [5장] 클로저1. 클로저의 의미 및 원리 이해클로저함수와 그 함수가 선언될 당시의 lexical envrionment의 상호관계에 따른 현상어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상→ 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상var outer = function () { var a = 1 var inner = function () { console.log(++a) } return inner}var outer2 = outer()console.log(outer2()) // 2console.log(outer2()) // 3inner 함수의 실행 결과가 아닌 inner함수.. 2024. 6. 17.