본문 바로가기
[자바스크립트] 디바운싱과 쓰로틀링 자바스크립트에서 디바운싱과 쓰로틀링은 이벤트 핸들링과 관련된 기술입니다. 이 두 기술은 이벤트를 제어하여 불필요한 호출을 줄이고 성능을 향상시키는 데 도움을 줍니다. 1. 디바운싱 디바운싱은 이벤트 핸들러가 여러 번 호출되는 것을 방지하는 기술입니다. 예를 들어, 사용자가 검색 창에 글자를 입력하는 경우, 검색 결과가 동적으로 업데이트되는 이벤트 핸들러가 실행됩니다. 그러나 사용자가 글자를 연속해서 타이핑하는 경우, 검색 결과가 불필요하게 많이 업데이트되어 성능 문제를 일으킬 수 있습니다. 디바운싱은 일정 시간 동안 이벤트를 무시하고 마지막 이벤트만을 처리합니다. 예를 들어, 사용자가 검색 창에 글자를 입력할 때, 디바운싱을 적용하여 일정 시간(예: 500ms) 동안 대기한 후 마지막 입력에 대한 검색 .. 2023. 3. 11.
[자바스크립트] DocumentFragment 성능 개선 방법 DocumentFragment는 Document의 일종으로, DOM 요소들의 컨테이너 역할을 합니다. 일반적으로 DocumentFragment는 하나 이상의 DOM 요소를 생성하고, 그것들을 메모리에서만 관리하기 위해 사용됩니다. DocumentFragment는 Document와는 다르게, 자체적으로 유효한 DOM 구조를 가지지 않습니다. 즉, DocumentFragment에는 자식 요소들이 있지만, 부모 요소는 존재하지 않습니다. 이러한 특징 때문에 DocumentFragment는 메모리에서만 관리되기 때문에, 실제 DOM 구조에는 영향을 주지 않으면서도 빠르게 처리할 수 있는 장점이 있습니다. 1. 예제 코드 DocumentFragment는 다음과 같은 방법으로 생성됩니다. const fragment.. 2023. 3. 11.
[자바스크립트] 부모 노드, 자식 노드, 형제 노드 찾기 자바스크립트에서는 DOM(Document Object Model)을 통해 HTML 문서의 요소(element)를 조작할 수 있습니다. 부모 노드, 형제 노드, 자식 노드를 찾는 방법은 다음과 같습니다. 1. 부모 노드 찾기 부모 노드는 parentNode 속성으로 찾을 수 있습니다. 예를 들어, 아래 HTML 코드가 있다고 가정해봅시다. 부모 노드 이 때, 부모 노드를 찾기 위해서는 다음과 같이 코드를 작성할 수 있습니다. const parent = document.querySelector('#parent'); const parentNode = parent.parentNode; console.log(parentNode); // 요소 2. 형제 노드 찾기 형제 노드는 previousSibling과 next.. 2023. 3. 11.
[자바스크립트] 객체 합치기 JavaScript에서 객체를 합치는 방법은 다양합니다. 이 중에서 가장 일반적인 방법은 다음과 같은 두 가지 방법입니다. 1. Object.assign 메서드 사용하기 Object.assign() 메서드는 첫 번째 인수로 전달된 객체에 다른 객체를 병합할 때 사용됩니다. 예를 들어, 다음과 같이 두 개의 객체를 합쳐보겠습니다. const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; const obj3 = Object.assign(obj1, obj2); console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 } console.log(obj1); // { a: 1, b: 2, c: 3, d: 4 } 위의 코드에서 Object.as.. 2023. 3. 10.
[자바스크립트] 유효성 검증 (회원가입) HTML 폼에서 유효성 검증은 일반적으로 JavaScript를 사용하여 수행됩니다. 이를 통해 사용자가 유효하지 않은 데이터를 입력하지 못하도록하고, 폼이 서버로 제출되기 전에 유효성 검사를 수행하여 더 나은 사용자 경험을 제공할 수 있습니다. 1. 예시 1) HTML 폼에 필요한 필드를 추가합니다. 이름: 이메일: 비밀번호: 제출 2) JavaScript 함수를 만들어서 유효성 검사를 수행 이 함수는 HTML 폼의 submit 이벤트에 바인딩되어 있으므로, 폼이 제출되기 전에 자동으로 호출됩니다. function validateForm() { const name = document.getElementById("name").value; const email = document.getElementById(.. 2023. 3. 10.
[자바스크립트] async 와 await JavaScript에서 async/await은 비동기적으로 실행되는 코드를 더 쉽게 작성하고 관리하기 위한 기능입니다. 이전에는 Promise를 사용하여 비동기 코드를 처리했지만, Promise를 처리하기 위해 then/catch 등의 콜백 함수를 작성해야 했습니다. 이는 코드의 가독성을 낮추고 에러 핸들링을 어렵게 만들 수 있습니다. 1. 간단한 사용법 async/await은 이러한 문제를 해결하기 위해 등장했습니다. async/await은 함수의 반환값을 Promise로 만들어주며, async 함수 내부에서 await 키워드를 사용하여 Promise가 resolve될 때까지 기다릴 수 있습니다. 이로 인해 코드의 가독성이 향상되며, 에러 핸들링도 간편해집니다. 1) async 함수의 특징 async .. 2023. 3. 10.

티스토리툴바