본문 바로가기

분류 전체보기

 (84)
레이아웃 시프트 란? 레이아웃 시프트(Layout Shift)는 웹 페이지의 시각적 안정성을 측정하는 개념으로, 웹 페이지 로딩 중 또는 상호작용하는 동안에 요소들이 예상치 못하게 움직이는 것을 말합니다. 이러한 움직임은 사용자 경험을 저해할 수 있습니다. 레이아웃 시프트는 주로 이미지, 광고, 동적으로 로딩되는 콘텐츠 등이 페이지에 늦게 로드되거나 페이지의 다른 부분과 상호작용할 때 발생합니다. 사용자가 버튼을 클릭하려고 할 때 갑자기 위치가 바뀌어 버튼을 놓치게 되는 경우가 이에 해당할 수 있습니다. 웹 개발에서는 이를 최소화하기 위해 이미지의 크기를 미리 지정하거나, 폰트의 경우 미리 로컬에 캐싱하는 등의 방법을 사용합니다.
디바운스와 스로틀 디바운스 (Debounce)디바운스는 이벤트가 발생한 후 일정 시간 동안 추가적인 이벤트가 발생하지 않을 때만 최종적으로 이벤트 핸들러를 실행하는 기법입니다. 예를 들어, 사용자가 입력을 마칠 때까지 기다렸다가 마지막 입력에서만 API를 호출하는 경우에 유용합니다. 작동 원리이벤트가 발생하면 타이머를 시작합니다.이벤트가 다시 발생하면 타이머를 리셋합니다.타이머가 만료되면 이벤트 핸들러를 실행합니다.예제 코드function debounce(callback, delay) { let timerId; return event => { if(timerId)clearTimeout(timerId); timerId = setTimeout(callback, de..
promise.all & promise.allsettled 이해하기 Promise.all Promise.all 메서드는 여러 개의 프로미스를 포함하는 배열을 인자로 받아, 모든 프로미스가 성공적으로 이행(resolve)될 때까지 기다립니다. 모든 프로미스가 성공적으로 이행되면, 각 프로미스의 결과를 모아 배열로 반환합니다. 동작 원리 프로미스 배열을 받아 각각의 프로미스가 이행될 때까지 기다립니다. 모든 프로미스가 성공적으로 이행되면, 각 프로미스의 결과를 모은 배열을 최종 결과로 반환합니다. **하나라도 거부(reject)**되면, Promise.all은 즉시 거부됩니다. 그리고 첫 번째 거부된 프로미스의 에러를 반환합니다. Promise.all([ Promise.resolve('A'), Promise.resolve('B') ]).then(results => { con..
Web Worker Web Worker는 웹 브라우저에서 제공하는 기능 중 하나로, 메인 스레드와는 별개의 백그라운드 스레드에서 스크립트를 실행할 수 있게 해주는 API입니다. 이를 통해 복잡하고 시간이 많이 소요되는 작업을 메인 스레드와 독립적으로 처리할 수 있으며, 이는 웹 애플리케이션의 응답성과 성능을 향상시킬 수 있습니다. 주요 특징 멀티 스레딩 지원: JavaScript는 전통적으로 싱글 스레드로 작동합니다. Web Worker를 사용하면 별도의 스레드에서 스크립트를 실행할 수 있으며, 이는 복잡한 계산이나 대량의 데이터 처리 작업을 백그라운드에서 수행할 수 있게 해줍니다. 메인 스레드의 비동기 처리 가능: Web Worker를 사용하면 메인 스레드가 UI 업데이트나 사용자 인터랙션 처리에 집중할 수 있습니다. 이..
setTimeout의 정확성 settimeout 함수를 아래처럼 실행하면 지정한 시간 이후에 콜백함수를 실행합니다. setTimeout(function() { console.log("3초가 지났습니다."); }, 3000); setTimeout(function() { console.log("5초가 지났습니다."); }, 5000); setTimeout(function() { console.log("7초가 지났습니다."); }, 7000); 만약, 동일한 시간으로 설정한 settimeout 함수 여러개를 호출하게 된다면 지정한 시간에 맞춰 모든 콜백 함수가 지정한 시간에 맞게 실행이 될까요? // 현재 시간을 기준으로 로그를 찍기 위한 초기 시간 const startTime = Date.now(); // 1초 후에 실행되는 여러 se..
객체에서의 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); }

티스토리툴바