타이머 + 비동기 프로그래밍

yeseul·2024년 7월 6일

41장 타이머

✔️ 호출 스케줄링

함수를 명시적으로 호출하면 함수가 즉시 실행된다.
함수를 명시적으로 호출하지 않고 일정시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다.

-> 호출 스케줄 텍스트
- 타이머 생성 함수 : setTimeout, setInterval
- 타이머 제거 함수 : clearTimeout, clearInterval
성능 최적화를 위해 자주 쓰인다.

❗ 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다.

하지만 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다.
즉, 타이머 함수는 호스트 객체다.

setTimout과 setInterval 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성한다.
setTimout 함수가 생성한 타이머는 단 한 번 동작하고, setInterval 함수가 생성한 타이머는 반복 동작한다.
자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다.
즉, 자바스크립트 엔진은 싱글 스레드로 동작한다.

이런 이유로 타이머 함수 setTimeout과 setInterval은 비동기 처리 방식으로 동작한다.

✔️ 타이머 함수

💠 setTimeout / clearTimeout

setTimeout 함수는 두 번째 인수로 전달받은 시간(ms)으로 단 한 번 동작하는 타이머를 생성한다.
이후 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수가 호출된다.
const timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);

// 1초 후 타이머가 만료되면 콜백 함수가 호출된다.
const timerId = setTimeout(() => console.log("Hi"), 1000);

// 1초 후 타이머가 만료되면 콜백 함수가 호출된다.
// 이때 콜백 함수에 'Lee'가 인수로 전달된다.
setTimeout((name) => console.log(`Hi ${name}`), 1000, "Lee");

// setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
const timerId = setTimeout(() => console.log("Hi!"), 1000);

// 타이머 취소
// setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소한다.
clearTimeout(timerId);

💠 setInterval / clearInterval

setInterval 함수는 두번째 인수로 전달받은 시간(ms)으로 반복동작하는 타이머를 생성한다.
이후 타이머가 만료될 때마다 첫번째 인수로 전달받은 콜백함수가 반복호출된다. (타이머 취소될 때 까지 계속된다.)
const timerId = setInterval(func|code[, delay, param1, param2, ...])
setInterval 함수가 반환한 타이머 id를 clearInterval 함수의 인수로 전달하여 타이머를 취소한다.

let count = 1;

const timeoutId = setInterval(() => {
  console.log(count); // 1 2 3 4 5
  if (count++ === 5) clearInterval(timeoutId);
}, 1000);

✔️ setTimeout 과 setInterval 비교

setTimeout

기능: 일정 시간이 지난 후에 한 번 함수를 실행

사용법: setTimeout(callback, delay)

예시:
setTimeout(function() {
  console.log('3초 후에 실행됩니다.');
}, 3000);

setInterval

기능: 일정 시간 간격으로 함수를 반복해서 실행

사용법: setInterval(callback, interval)

예시:
setInterval(function() {
  console.log('2초마다 실행됩니다.');
}, 2000);

setTimeout은 지정된 시간이 `지난 후`에 한 번만 함수를 실행하고,

setInterval은 지정된 시간 `간격마다` 반복적으로 함수를 실행한다.

✔️ 디바운스와 스로틀

🔗 관련자료

scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다.
이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.

디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.

-> 성능상의 유리함을 가져오기 위한 개념.

즉, Throttle 는 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아서, 한번씩 출력을 제한한다.

Debounce 는 입력 주기가 끝나면, 출력한다.

ex) 자동완성

keyboard 가 한자씩 입력될 때마다 api 로 데이터를 가져오게 되면, 사용자의 의도와 무관한 요청이 자주 발생되는데,

이를 줄이기 위해 입력이 끝난후나, 입력되는 중간 중간 200ms 마다 api 값을 가져온다면 성능에서 매우 유리해 진다.
- Throttle : 200ms 마다 api 값을 가져오는 것
- Debounce : 입력이 끝난후 api 값을 가져오는 것이다.

✔️ 디바운스

디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다.

-> 즉, 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화하여 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다.
- resize 이벤트 처리, input 요소에 입력된 값으로 ajax 요청하는 입력 필드 자동완성 UI 구현, 버튼 중복 클릭 방지 처리 등에 유용하게 사용된다.
- 실무에서는 Underscore의 debounce 함수나 Lodash의 debounce 함수를 사용하는 것을 권장한다.

// 라이브러리 설치
// npm install lodash

// Lodash를 임포트
import _ from "lodash";

// 어떤 작업을 수행하는 함수
function doSomething() {
  console.log("작업 수행 중...");
}

// debounce 함수를 사용하여 doSomething 함수가 일정 시간 내에 여러 번 호출되지 않도록 함
const debouncedFunction = _.debounce(doSomething, 300);

// 이벤트 리스너에 debouncedFunction을 사용
document
  .getElementById("inputField")
  .addEventListener("input", debouncedFunction);

✔️ 스로틀

스로틀은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.

-> 즉, 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기 를 만든다.
- scroll 이벤트 처리, 무한 스크롤 UI 구현 등에 유용하게 사용된다.
- 실무에서는 Underscore의 throttle 함수나 Lodash의 throttle 함수를 사용하는 것을 권장한다.

💭 상태변화도 Debounce 할 수 있지 않을까?

💡useDebounce 커스텀 훅

🔗 useDebounce

: 디바운스는 실행을 제약하는 장치가 필요하기때문에 useEffect 와 상태관리를 하는 useState 와 함께 커스텀훅을 만들 수 있다.
이때 실행을 제약하는 장치로 의존성 배열과 클린업함수를 활용할 수 있기 때문이다.

입력값이 지속적으로 변경될 때, 일정 시간 동안 입력이 멈추면 최종 입력값을 처리하는 데 유용하다.

ex) 검색기능에서 setTimeout

사용자가 검색어를 입력할 때마다 즉시 API 요청을 보내는 대신, 입력이 일정 시간 멈췄을 때 한 번만 요청을 보내도록 한다.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

value가 변경될 때마다 useEffect가 실행.
useEffect 내부에서 setTimeout을 사용하여 delay 시간 후에 debouncedValue를 업데이트한다.
cleanup 함수로 clearTimeout을 호출하여 이전 타이머를 정리한다. -> value가 변경될 때마다 이전 타이머를 취소하고 새로운 타이머를 설정하는 역할을 합니다.
value와 delay가 변경될 때마다 useEffect가 실행되고, 이로 인해 디바운스된 값이 적절히 업데이트된다.

ex) 교보문고, 주식거래 애플리케이션, 채팅창과 같은 사용자 입력이 잦고 실시간 데이터 업데이트가 필요한 곳에 자주 쓰일것같다.

42장 비동기 프로그래밍

✔️ 동기 처리와 비동기 처리

함수 실행 과정
- 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다.
- 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다.
- 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.

함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다.
자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

-> 즉, 함수를 실행할 수 있는 창구가 단 하나이기 때문에 2개 이상의 함수를 동시에 실행할 수 없다.

-> 현재 실행 중인 함수가 종료하면 비로소 다른 함수가 실행되기 시작한다.

자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.

-> 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우, 블로킹(작업 중단)이 발생한다.

ex) 1번 함수가 실행되고나서 3초 후에 2번 함수가 실행되고, 그 후에 3번 함수가 실행되도록 한다면 3번 함수는 그 시간 동안 호출되지 못하고 블로킹된다.

✔️ 동기와 비동기

현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 한다.
"동기"의 한자 의미는 "같을 동(同)"과 "기약할 기(期)"를 조합한 것이다.

-> "동기(同期)"는 "같은 시기" 또는 "같은 시간에 맞추다"라는 의미
동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있다.
하지만 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹되는 단점이 있다.
현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다.
비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있다.
하지만 태스크의 실행 순서가 보장되지 않는 단점이 있다.
비동기 처리를 수행하는 비동기 함수는 전통적으로 콜백 패턴을 사용한다.
그러나 콜백 패턴은 콜백 헬을 발생시켜 가독성을 나쁘게 하고, 에러의 예외 처리가 곤란하며, 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다.
타이머 함수인 setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다.

비동기 처리는 이벤트 루프와 태스크 큐와 깊은 관계가 있다.

✔️ 이벤트 루프와 태스크 큐

자바스크립트는 싱글 스레드 방식으로 동작하기 때문에 한 번에 하나의 태스크만 처리할 수 있지만, 브라우저가 동작하는 것을 보면 태스크가 동시에 처리되는 것처럼 느껴진다.

ex. HTTP 요청을 통해 서버로부터 데이터를 가져오면서 렌더링이 동시에 이루어짐.

이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프다.

이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나다.
구글의 V8 자바스크립트 엔진을 비롯한 대부분의 자바스크립트 엔진은 크게 2개의 영역으로 구분할 수 있다.

💠 콜 스택

: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이 콜 스택이다.

💠 힙

: 객체가 저장되는 메모리 공간이다.

콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.

콜 스택과 힙으로 구성되어 있는 자바스크립트 엔진은 단순히 태스크가 요청되면 콜 스택을 통해 요청된 작업을 순차적으로 실행한다.
비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Nods.js가 담당한다.
예를 들어, 비동기 방식으로 동작하는 setTimeout의 콜백 함수의 평가와 실행은 자바스크립트 엔진이 담당하지만 호출 스케줄링을 위한 타이머 설정과 콜백 함수의 등록은 브라우저 또는 Node.js가 담당한다.

-> 브라우저와 자바스크립트 엔진이 협력하여 비동기함수인 setTimeout 함수를 실행한다.

이를 위해 브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다.

💠 태스크 큐

: setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.

💠 이벤트 루프

: 이벤트 루프는 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다.

만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.

-> 즉, 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다.

yeseul

이전 포스트

[TIL] 07/05 :: 포켓몬 2.

다음 포스트

타이머 + 비동기 프로그래밍

<TIL>

41장 타이머

✔️ 호출 스케줄링

❗ 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다.

✔️ 타이머 함수

💠 setTimeout / clearTimeout

💠 setInterval / clearInterval

✔️ setTimeout 과 setInterval 비교

setTimeout은 지정된 시간이 `지난 후`에 한 번만 함수를 실행하고,

setInterval은 지정된 시간 `간격마다` 반복적으로 함수를 실행한다.

✔️ 디바운스와 스로틀

🔗 관련자료

ex) 자동완성

✔️ 디바운스

✔️ 스로틀

💭 상태변화도 Debounce 할 수 있지 않을까?

💡useDebounce 커스텀 훅

🔗 useDebounce

42장 비동기 프로그래밍

✔️ 동기 처리와 비동기 처리

`자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.`

자바스크립트 엔진은 `한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식`으로 동작한다.

✔️ 동기와 비동기

`현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 한다.`

`현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다.`

타이머 함수인 `setTimeout, setInterval, HTTP 요청, 이벤트 핸들러`는 비동기 처리 방식으로 동작한다.

✔️ 이벤트 루프와 태스크 큐

💠 콜 스택

💠 힙

💠 태스크 큐

💠 이벤트 루프

[TIL] 07/05 :: 포켓몬 2.

[TIL] 07/09 :: quill

0개의 댓글

타이머 + 비동기 프로그래밍

<TIL>

41장 타이머

✔️ 호출 스케줄링

❗ 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다.

✔️ 타이머 함수

💠 setTimeout / clearTimeout

💠 setInterval / clearInterval

✔️ setTimeout 과 setInterval 비교

setTimeout은 지정된 시간이 지난 후에 한 번만 함수를 실행하고,

setInterval은 지정된 시간 간격마다 반복적으로 함수를 실행한다.

✔️ 디바운스와 스로틀

🔗 관련자료

ex) 자동완성

✔️ 디바운스

✔️ 스로틀

💭 상태변화도 Debounce 할 수 있지 않을까?

💡useDebounce 커스텀 훅

🔗 useDebounce

42장 비동기 프로그래밍

✔️ 동기 처리와 비동기 처리

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.

✔️ 동기와 비동기

현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 한다.

현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다.

타이머 함수인 setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다.

✔️ 이벤트 루프와 태스크 큐

💠 콜 스택

💠 힙

💠 태스크 큐

💠 이벤트 루프

[TIL] 07/05 :: 포켓몬 2.

[TIL] 07/09 :: quill

0개의 댓글

setTimeout은 지정된 시간이 `지난 후`에 한 번만 함수를 실행하고,

setInterval은 지정된 시간 `간격마다` 반복적으로 함수를 실행한다.

`자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.`

자바스크립트 엔진은 `한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식`으로 동작한다.

`현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 한다.`

`현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다.`

타이머 함수인 `setTimeout, setInterval, HTTP 요청, 이벤트 핸들러`는 비동기 처리 방식으로 동작한다.