자바스크립트 썸네일형 리스트형 바닐라 자바스크립트와 리액트 훅으로 디바운스(Debounce) 구현하기 디바운스란 어떤 함수를 연속적으로 호출할 때, 실제 호출되기 전까지 지연 시간을 두어 마지막 함수만 호출되도록 하는 방법입니다. 짧은 시간 안에 너무 많은 함수 호출이 발생하면 성능에 영향을 미칠 수 있기 때문에, 이러한 방법을 이용하여 함수가 호출되는 속도를 제한할 필요가 있습니다. 이번 글에서는 디바운스를 구현하는 두 가지 사례를 알아보겠습니다. 첫 번째로 바닐라 자바스크립트를 이용해서 디바운스 함수를 작성해보겠습니다. 다음으로는 리액트 훅으로 디바운스를 구현해보겠습니다. Debouncing width JavaScript 예를 들어 검색어를 입력하면 검색 결과가 자동으로 화면에 출력되는 기능이 있다고 하겠습니다. 간단하게 생각하면 입력 이벤트가 발생할 때마다 서버로 검색 조건에 맞는 데이터를 요청하고.. 더보기 [자바스크립트] 데이터 타입 숫자로 바꾸는 두 가지 방법 문자열을 숫자로 바꿔야 하는 경우가 상당히 자주 있습니다. Javascript에서 문자열을 숫자로 변경하는 두 가지 방법을 알아보겠습니다. parseInt와 parseFloat 함수 사용하기 두 내장 함수를 이용하면 손쉽게 문자열을 숫자로 변경할 수 있습니다. const numStr = "1144"; console.log(typeof numStr, numStr); const num = parseInt(numStr); console.log(typeof num, num); const floatStr = "29.35"; console.log(typeof floatStr, floatStr); const float = parseFloat(floatStr); console.log(typeof float, float.. 더보기 자바스크립트 this 키워드는 무엇을 가리키나 자바스크립트 this 키워드에 대해서 알아보겠습니다. 이 키워드는 경우에 따라서 가리키는 대상이 다릅니다. - 일반 함수 호출 시에는 전역 객체를 가리킵니다. 즉, window 객체를 가리킵니다. - 메서드 호출 시에는 메서드를 호출한 객체를 가리킵니다. 한 가지 기억해야 하는 점은 this keyword는 해당 키워드가 정의된 함수/메서드가 실제로 호출될 때까지는 값이 할당되지 않는다는 것입니다. 콘솔을 열고 this 키워드를 출력해보면 다음과 같이 window 객체를 확인할 수 있습니다. console.log(this); 일반 함수 안에서 호출하면 무엇을 가리키는지 보겠습니다. function greeting(name) { console.log(`안녕하세요. 저는 {name}입니다.`); consol.. 더보기 이전 1 다음
