30 Days of JavaScript - Promises and Time | LeetCode

Bori·2025년 11월 25일

LeetCode

목록 보기

3/5

문제를 풀면서 문제의 의도와 연관된 개념에 대해 정리합니다.

여러 Promise를 동시에 처리하고, 그 결과를 합산하여 새로운 Promise를 반환하기

Promise 병행 처리 이해
- Promise의 동작 원이를 이해하고, 여러 Promise를 동시에 처리하는 방법 학습
- Promise.all과 같은 패턴을 활용하여 여러 비동기 작업을 한 번에 처리
비동기 함수와 async/await 활용
- async/await을 활용하여 비동기 함수의 결과 처리

일시적으로 지연 후 완료되는 비동기 함수 작성하기

비동기 함수와 Promise 활용 이해
- setTimeout과 Promise를 결합하여 비동기 처리 패턴 학습
타이머 기반 비동기 처리 이해
- JavaScript에서 시간 지연을 구현할 때 setTimeout을 자주 사용함
- 이벤트 루프와 비동기 동작 방식의 이해

지연 실행되는 함수를 동적으로 취소하는 메커니즘 구현하기

setTimeout을 이용한 지연 실행의 이해
- 함수를 즉시 실행하지 않고 t 밀리초 이후 실행하도록 구현
clearTimeout을 이용한 setTimeout 취소
- 예약된 타이머를 취소하기 위해서 clearTimeout 사용
- cancelFn이 호출되면 clearTimeout이 수행되어야 함
클로저를 이용한 타이머 id 저장
- 타이머 id는 cancellable 함수가 종료되어도 유지되어야 함
- cancelFn이 나중에 호출되더라도 타이머 id에 접근할 수 있어야 하므로 클로저를 이용한 id 저장
시간에 따른 함수 실행/미실행 여부 이해
- fn가 실행되는 경우(cancelTimeMs > t)
  - fn이 실행된 후 cancelFn이 실행됨
  - cancelFn은 아무것도 취소하지 못함
- fn이 취소되는 경우(cancelTimeMs < t)
  - cancelFn이 타이머를 먼저 제거
  - fn이 실행되지 않음

주기적으로 반복 실행되는 함수를 동적으로 취소하는 메커니즘 구현하기

즉시 실행과 주기적으로 반복 실행 흐름 이해
- 먼저, fn을 한 번 즉시 실행
- 이 후 setInterval을 이용한 함수 반복 호출
- setInterval의 첫 번째 실행은 delay 후에 발생
clearInterval을 이용한 setInterval 취소 이해
- 반복 실행을 취소하기 위해 clearInterval 사용
- cancelFn이 호출되면 clearInterval이 수행되어야 함

Promise 기반 비동기 함수에 시간 제한을 걸어 동작 제어하기
⇒ 타임아웃 제어가 가능한 Promise 패턴 구현

Promise 동작 원리 및 Promise.race 패턴 이해
비동기 제어 흐름 이해
- fn이 언제 resolve/reject 되는지
- setTimeout의 타임아웃이 언제 reject 되는지
- Promise.race를 사용하는 경우 두 가지가 경쟁하는 개념
비동기 함수 에러 처리
- fn에서 에러가 발생하는 경우, 타임아웃과 별개로 즉시 reject

시간 기반 캐싱 구현하기
⇒ 일정 시간이 지나면 자동으로 무효화 되는 key-value 캐시 만들되, 만료/덮어쓰기/정확한 count 값 올바르게 처리

객체 또는 Map 을 이용한 key-value 저장
시간 기반 유효성(TTL, Time-To-Live) 관리
- 캐시가 일정 시간이 지나면 무효화되는 TTL 구조 구현
- setTimeout으로 일정 시간이 지난 후 key 제거
- clearTimeout 으로 만료된 타이머 정리
- Date.now를 이용하여 만료 시점 계산
기존 키 덮어쓰기 및 상태 업데이트
- set 호출 시 다음 조건 확인
  - 기존 key의 만료 여부
  - value, duration 덮어쓰기
  - 기존 타이머 clear 후 새로운 타이머 등록(clearTimeout)
  - 새로운 타이머 등록(setTimeout)
race condition 방지를 위한 만료 검증
- setTimeout은 정확한 시간을 보장하지 않으므로 이를 방지하기 위해 get, count에서 만료 검증
- Date.now로 만료 여부 확인
- 만료된 key 제거
count의 데이터 정합성
- Map을 순회하며 만료 검증 후 만료된 key 제거
prototype 기반 메서드 정의
자원 정리(cleanup) 패턴
- 기존 타이머 clear
- 만료된 key 제거

비동기 타이머의 예약/취소 흐름 이해하며 debounce 직접 구현하기

Debounce
- 일정 시간 동안 동일한 이벤트가 반복되면 이전 실행은 취소하고 마지막 호출만 실행하는 패턴
- 지연(delay) + 취소(cancel)의 조합
클로저
- 타이머가 걸려 있는 상태에서 새로운 요청이 오면 기존 타이머를 clearTimeout으로 취소
- 클로저를 이용하여 마지막 호출만 실행되도록 타이머 id를 저장
타이머 제어
- setTimeout으로 호출 예약
- 마지막 호출만 실행하기 위해 이전 호출을 clearTimeout으로 취소
비동기 실행 시점 이해
- 타이머의 실행 시점은 실제 호출 시점보다 늦음
- 호출 시점(t)과 실행 시점(t + debounce 시간)을 명확히 비교하기

Promise.all 직접 구현하기

비동기 함수 병렬 실행
- 각 비동기 함수를 동시에 실행하고, 완료된 순서와 무관하게 결과를 기다린 후 최종 결과를 처리하는 로직 구현
Promise 상태 관리
- 여러 개의 Promise를 동시에 실행 후 성공과 실패를 추적
- 모든 Promise가 성공할 경우, 모든 결과를 배열로 모아 반환
- 하나라도 실패하면 즉시 reject 처리