Week 4. 컴포넌트, 비동기, API 다루기

클로저 발표랑 과제 준비 하느라 강의가 좀 밀려서 이번 주에 같이 듣기로 했다.

키워드

• 싱글 스레드

• 비동기
  - callback

  • AJAX
  • promise
  • async, await

• fetch api
  - XMLHTTPRequest 대체

  • Promise 기반

• history api

• 낙관적 업데이트

• 디바운스
  일정 시간 안에 이벤트가 연속해서 발생할 경우 이벤트 핸들러를 호출하지 않다가,
  일정 시간이 경과한 후에 이벤트 핸들러가 호출되도록 하는 것.
  - setTimeout과 clearTimeout 사용
  

const debounce = (callback, delay) => {
  let timerID = null // 자유변수
  
  return event => {
  	if (timerID) clearTimeout(timerID); // delay 시간보다 이벤트가 발생 시 직전 timer를 클리어
    timerID = setTimeout(callback, delay, event); // delay 시간을 넘기면 callback 실행
  }

1. debounce가 호출되면 timerID가 falsy한 값(null, undefined...) 일 땐 clearTimeout 이 실행되지 않음.
2. 이후 setTimeout은 호출 후, Web API의 timer API를 호출하고 콜스택에서 제거된다.
   timer API는 delay만큼 callback 함수 카운트 다운을 시작한다.
3. 만약 delay만큼 이벤트가 또 실행되지 않는다면 무사히 callback을 이벤트 큐로 넘기게 되고,
   콜스택이 비워지게 되면 이벤트 루프에서 callback을 콜스택으로 푸쉬한다.
   그럼 자연스럽게 callback 함수가 실행될 수 있다.
4. 그러나 delay전에 이벤트가 실행된다면 setTimeout이 실행되고 반환된 값인 timeoutID를 통해
   timer API 에서 카운트다운 하고 있는 callback을 clearTimeout에서 없애버리게 된다.
5. 다시 이벤트가 실행되면 timerID가 nulld

서버에 부담을 주는 불필요한 처리를 줄이고, 사용자가 입력을 완료했을 때 AJAX를 요청할 수 있다.