230317_TIL

휜·2023년 3월 17일

debounce throttle

Debounce

많은 변경사항이 있을 때, 일괄 처리하기 때문에 서버에 10번 요청할 것을 1번만 처리할 수 있게끔 해줌.

디바운스 스로틀을 사용하여 한 번에 모두 보낼 수 있는 것처럼 모든 것이 변경된 후, 하나의 요청을 수행해야 한다.

Throttle

스로틀은 마우스 움직임 감지가 필요할 때, 아주 유용하다. 드래그 앤 드롭을 위한 마우스 이동과 같은 작업을 할 때, 수행할 수 있으며 스크롤 크기 조정과 같은 작업을 가능하게 한다.

JS

JS Runtime Environment

Memory Heap

처리할 함수들

Call Stack

한 번에 하나의 함수만 처리 할 수 있음. 실행순서를 기억함.

Event Loop

Call Stack이 비어있을 때, Task Queue에서 함수를 꺼내어 Call Stack으로 전달함.

Task Queue

처리해야할 함수들의 대기줄

하나의 싱글 컨텍스트 스택

싱글 스레드
기본적으로 동기적으로 하나씩 실행함.

Web, Node APIs

DOM API, setTimeout, setInterval, fetch, event listener

해당 API들은 비동기적으로 실행되기 때문에 멀티 스레드 처리.
자바스크립트는 동기적으로 함수를 처리하지만, 위 API를 활용하면 비동기적으로 함수를 처리할 수 있다.

Promise

pending

이제 막 promise가 만들어진 상태

fulfilled

성공적으로 promise가 수행된 상태

rejected

promise 처리가 실패한 상태

Promise의 콜백함수로는 성공했을 때(resolve)와 실패했을 때(reject) 함수를 넣을 수 있다.

function runInDelay(seconds) {
  return new Promise((resolve, reject) => {
    if (!seconds || seconds < 0) {
      reject(new Error("seconds가 0보다 작습니다.")); // 실패시 reject함수에 Error객체 생성
    } else {
      setTimeout(() => {
        resolve(seconds * 1000); // 성공시 실행 함수
      });
    }
  });
}

runInDelay(1)
  .then(() => console.log("타이머 완료."))
  .catch(console.error)
  .finally(console.log("함수를 반환 완료했습니다."));

에러 버블링 처리를 함수 스코프 안에서 제대로 해준다면 .catch 후에도 코드가 정상작동 할 수 있음.

function fetchEgg(chicken) {
  return Promise.resolve(`${chicken} => 🥚`); // static함수인 resolve를 사용. Promise가 즉시 성공하면, 결과값을 즉시 반환
}

function fryEgg(egg) {
  return Promise.resolve(`${egg} => 🍳`);
}

function getChicken() {
//  return Promise.resolve(`🍀 => 🐓`);
  return Promise.reject(new Error("치킨을 가지고 올 수 없습니다."));
}

fetchEgg("🐓") //
  .then((egg) => console.log(egg)); // .then은 두 개의 콜백 함수를 인수로 받는다.

// getChicken() // 에러 버블링 처리 전
//   .then((chicken) => fetchEgg(chicken))
//   .then((egg) => fryEgg(egg))
//   .then((friedEgg) => console.log(friedEgg))
//   .catch((error) => console.log(error.message));

getChicken() // 에러 버블링 처리 후
  .catch((error) => {
    console.log(error.message);
    return "😭";
  })
  .then((chicken) => fetchEgg(chicken))
  .then((egg) => fryEgg(egg))
  .then((friedEgg) => console.log(friedEgg));

// .catch의 에러 처리 예시
getChicken() //
  .catch(() => "🐶")
  // .then((chicken) => fetchEgg(chicken)) // 전달하는 인자와 호출하는 인자가 동일하므로 밑에 코드처럼 축약가능하다.
  .then(fetchEgg)
  .then(fryEgg)
  .then(console.log);