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

📌 동기와 비동기 처리의 차이점을 설명해주세요.

• 동기
  • 정의 : 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식
  • 장점 : 설계 간단, 직관적
  • 단점 : 요청 결과가 반환되는 시간 동안 다른 작업 수행 불가능
• 비동기
  • 정의 : 요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작하는 방식
  • 장점 : 요청 결과가 반환되는 시간 동안 다른 작업 수행 가능
  • 단점 : 설계 복잡, 직관적 x

📌 이벤트 루프의 동작 방식을 마이크로태스크, 매크로태스크를 포함하여 설명하세요.

이벤트 루프 알고리즘을 요약하면 다음과 같습니다
1. 매크로태스크 큐에서 가장 오래된 태스크를 꺼내 실행합니다(예: 스크립트를 실행).
2. 모든 마이크로태스크를 실행합니다. (이 작업은 마이크로태스크 큐가 빌 때까지 이어지고, 태스크는 오래된 순서대로 처리됩니다.)
3. 렌더링할 것이 있으면 처리합니다.
4. 매크로태스크 큐가 비어있으면 새로운 매크로태스크가 나타날 때까지 기다립니다.
5. 1번으로 돌아갑니다.

setTimeout(() => alert("timeout"));

Promise.resolve()
  .then(() => alert("promise"));

alert("code");

alert 창엔 아래 순서대로 문자열이 출력됩니다.

1. code – 일반적인 동기 호출이므로 가장 먼저 매크로태스크 큐에 들어간 후 실행됩니다.
2. promise – .then은 마이크로태스크 큐에 들어가 처리되기 때문에, 현재 코드(alert("code"))가 실행되고 난 후에 실행됩니다.
3. timeout – setTimeout에서 설정한 시간이 끝난 후 콜백 함수를 실행하는 것은 매크로태스크이기 때문에 가장 마지막에 출력됩니다.

📌 비동기 코드에서 발생할 수 있는 문제 중 하나는 무엇이며, 그 문제를 어떻게 해결할 수 있을까요?

• 비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우, 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 콜백 헬이 발생
• 가독성 bad, 에러 처리 곤란
• 프로미스는 후속 처리 메소드인 then이나 catch로 메소드를 체이닝(chainning)하여 여러 개의 프로미스를 연결하여 사용할 수 있다. 이로써 콜백 헬을 해결한다.

📌 디바운스와 스로틀의 차이점에 대해 설명해주세요.

• 디바운스
  • 정의 : 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
  • 예시 : 주로 ajax 검색
    • 엔터 없이도 결과를 즉시 보여주려면 항상 input 이벤트에 대기
    • 한 글자 칠 때마다 ajax 요청이 실행된다는 것. 'ㅈ', '제', '젤', '제로', '제롳', '제로초' 모두 요청이 실행
    • '제로초'를 다 쳤을 때 ajax 요청을 보내고 싶다
    • 즉 타자를 칠 때(input 이벤트 발생)마다 타이머를 설정합니다. 200ms동안 입력이 없으면 입력이 끝난 것으로 칩니다(시간은 적당히 설정하면 됩니다). 200ms 이전에 타자 입력이 발생하면 이전 타이머는 취소하고 새로운 타이머를 다시 설정하는 겁니다.
  • 코드

    var timer;
    document.querySelector('#input').addEventListener('input', function(e) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function() {
        console.log('여기에 ajax 요청', e.target.value);
      }, 200);
    });

• 쓰로틀
  • 정의 : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
  • 예시 : 스크롤 올리거나 내릴 때
    • 스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생합니다.
    • scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면 매우 빈번하게 실행되기 때문에 엄청 렉이 걸릴 것입니다.
    • 그럴 때 쓰로틀링을 걸어줍니다. 몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것이죠

📌 블로킹과 논블로킹은 제어권의 관점에서 어떻게 다른가요?

• blocking은 특정 작업이 실행될 때, 제어권을 함께 넘겨주며 작업이 끝나야 제어권을 돌려받는다
• Non-Blocking은 특정 작업에게 실행 명령만 내리고, 제어권은 곧바로 다시 돌려받습니다.