230317_TIL

·2023년 3월 17일
0

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

  1. pending
  • 이제 막 promise가 만들어진 상태
  1. fulfilled
  • 성공적으로 promise가 수행된 상태
  1. 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);

비동기함수

자바스크립트에는 콜백 함수, Promise, async await 이렇게 크게 3가지 비동기 방식이 존재한다.

profile
개자이너 하고싶어요

0개의 댓글