본문 바로가기

Programming

 (19)
디바운스와 스로틀 디바운스 (Debounce)디바운스는 이벤트가 발생한 후 일정 시간 동안 추가적인 이벤트가 발생하지 않을 때만 최종적으로 이벤트 핸들러를 실행하는 기법입니다. 예를 들어, 사용자가 입력을 마칠 때까지 기다렸다가 마지막 입력에서만 API를 호출하는 경우에 유용합니다. 작동 원리이벤트가 발생하면 타이머를 시작합니다.이벤트가 다시 발생하면 타이머를 리셋합니다.타이머가 만료되면 이벤트 핸들러를 실행합니다.예제 코드function debounce(callback, delay) { let timerId; return event => { if(timerId)clearTimeout(timerId); timerId = setTimeout(callback, de..
Web Worker Web Worker는 웹 브라우저에서 제공하는 기능 중 하나로, 메인 스레드와는 별개의 백그라운드 스레드에서 스크립트를 실행할 수 있게 해주는 API입니다. 이를 통해 복잡하고 시간이 많이 소요되는 작업을 메인 스레드와 독립적으로 처리할 수 있으며, 이는 웹 애플리케이션의 응답성과 성능을 향상시킬 수 있습니다. 주요 특징 멀티 스레딩 지원: JavaScript는 전통적으로 싱글 스레드로 작동합니다. Web Worker를 사용하면 별도의 스레드에서 스크립트를 실행할 수 있으며, 이는 복잡한 계산이나 대량의 데이터 처리 작업을 백그라운드에서 수행할 수 있게 해줍니다. 메인 스레드의 비동기 처리 가능: Web Worker를 사용하면 메인 스레드가 UI 업데이트나 사용자 인터랙션 처리에 집중할 수 있습니다. 이..
객체에서의 in 연산자 사용 시 주의사항 객체에서의 in 연산자 사용 in 연산자는 객체의 자체 속성뿐만 아니라, 그 객체가 상속받은 모든 속성을 확인합니다. const person = { name: 'John' }; console.log('name' in person); // true console.log('toString' in person); // true 여기서 person 객체는 name 속성만을 직접 가지고 있지만, toString 메서드는 person 객체의 프로토타입 체인 상에 존재합니다. 따라서 'toString' in person은 true를 반환합니다. 이러한 상황에서 객체의 자체 속성만을 확인하고 싶다면 hasOwnProperty() 메서드를 사용해야 합니다. console.log(person.hasOwnProperty('..
자바스크립트에서 객체와 배열 다루기 객체의 속성 확인하기 const operators = { '+': (a, b) => a + b, '-': (a, b) => a - b, '*': (a, b) => a * b, '/': (a, b) => a / b }; let token = '+'; if (token in operators) { console.log(`연산자 ${token}이(가) 존재합니다.`); } else { console.log(`연산자 ${token}이(가) 존재하지 않습니다.`); } 배열 요소 순회하기 const array = [1, 2, 3, 4, 5]; // for문 사용 for (let i = 0; i < array.length; i++) { console.log(array[i]); } // forEach 사용 array..
JS 문자열 반복문 for 루프: 문자열의 각 문자에 접근할 수 있습니다. let str = "hello"; for (let i = 0; i < str.length; i++) { console.log(str[i]); } for...of 루프: ES6에서 도입된 for...of 루프를 사용하여 문자열의 각 문자에 접근할 수 있습니다. let str = "hello"; for (let char of str) { console.log(char); }
JS 실수에서 정수부분만 가져오기 JavaScript에서 Math.trunc() 함수는 주어진 숫자의 정수 부분만을 반환하며, 소수점 이하를 무시합니다. 이 기능은 데이터를 처리하거나 계산을 수행할 때 특정 수치의 정수 부분만 필요할 경우에 특히 유용합니다. console.log(Math.trunc(4.9)); // 4 console.log(Math.trunc(-4.9)); // -4 console.log(Math.trunc(0.123)); // 0 console.log(Math.trunc(-0.123)); // -0
HTML Self-Closing Tags HTML에서 "self-closing" 태그는 종료 태그가 필요 없는 태그를 의미합니다. 이러한 태그들은 일반적으로 내용을 포함하지 않으며, 단일 태그로 사용됩니다. HTML5에서는 이러한 태그들을 "void elements"라고 부릅니다. 이러한 태그들은 시작 태그만 있고, 별도의 종료 태그가 없으며 일반적으로 내용을 포함하지 않습니다. 예를 들어, 이미지나 줄바꿈을 나타내는 태그는 내용이 필요 없습니다. HTML 파서는 이러한 태그를 만나면 자동으로 태그가 종료된 것으로 처리합니다. HTML5에서의 Self-Closing 태그 예시 이것은 예시 문장입니다. 새로운 줄입니다. HTML5에서는 self-closing 태그에 /를 추가하는 것이 필수는 아닙니다 (예: 대신 사용 가능). 그러나 JSX, X..
JS 배열 다루기: 원본을 변경하지 않는 메서드 (Non-Destructive) 원본 배열을 변경하지 않는 메서드들 concat() 하나 이상의 배열을 현재 배열에 연결하여 새 배열을 반환합니다. const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const newArray = array1.concat(array2); // array1 ['a', 'b', 'c'] // array2 ['d', 'e', 'f']; // newArray ['a', 'b', 'c', 'd', 'e', 'f'] slice() 배열의 일부분을 얕게 복사하여 새 배열로 반환합니다. const fruits = ['apple', 'banana', 'orange']; const citrus = fruits.slice(1, 3); // fruits ['ap..

티스토리툴바