async / 1 주차 과제

Soozynn·2021년 11월 20일
0

JavaScript

목록 보기
3/6

자바스크립트동기(Synchronous) 처리 방식이기 때문에
왼쪽 아래 그림처럼 로직을 순서대로 하나씩 처리하게 된다.

즉, 현재 진행하고 있는 로직의 동작이 끝나야지만 다음 로직을 실행한다는 것이다.

만약 현재 동작을 하고 있는 로직이 굉장히 오랜 시간이 걸리는 로직이라면 그 다음의 로직은
현재의 로직이 끝날 때까지 기다려야 할 것이다.

유저가 이런 싱글 스레드의 동기 처리로만 된 웹을 쓰게 된다면, 위와 같은 문제 때문에 멍하니 계속 빈 페이지만 보고 있을 수도 있는 상황이 생길 수도 있지 않을까? 🤔

이로 인한 문제 때문에 비동기가 등장하였다.

비동기 async

대표적으로 우리가 흔하게 쓰고 있는 타이머 함수인 setTimeoutsetInterval이 비동기 처리 방식으로 동작한다.

비동기는 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하므로
블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는 단점이 있다.

반면에 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만,
위에서 말한 것 처럼 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 되는 단점이 있다.

나는 이 실행 순서가 보장되지 않는다는 말 뜻을 계속 이해하지 못했었는데, 위 사진을 한 번 다시 살펴보자.

사진의 왼쪽에 있는 동기 처리방식은 태스크를 순서대로 하나씩 처리하기 때문에
실행 순서가 보장되어 파란색 -> 빨강색 -> 노란색 순서로 실행이 된다.

하지만 오른쪽에 있는 비동기 처리 방식을 보면 비동기는 여러개의 요청을 동시에 처리할 수 있는 능력을 가지고 있기 때문에 실행시간이 각기 다른 업무를 요청했을 때 순서대로 일을 제어하는 것이 아니라
동시에 일을 처리해 입력한 순서대로 결과값이 나오기 때문에 가장 빨리 수행한 값부터 결과값으로 나오게 된다.

-> 비동기적(Asynchronous) 실행은 코드가 작성된 순서와 무관하게 실행되는 것을 말한다.
-> 동기적(Synchronous) 실행은 코드가 작성된 순서대로 실행되는 것을 말한다.


이벤트 루프와 태스크 큐

  • 비동기 함수인 setTimeout콜백 함수는 태스크 큐에 푸시되어 대기하다가 콜 스택이 비게 되면, 다시 말해 전역 코드 및 명시적으로 호출된 함수가 모두 종료하면 비로소 콜 스택에 푸시되어 실행된다.
function foo() {
  console.log("foo");
}

function bar() {
  console.log("bar");
}

setTimeout(foo, 0);
bar();

따라서 위에 코드를 실행하면 setTimeout이 먼저 실행되었고 0초의 시간을 설정하였다 하더라도 bar()가 먼저 실행되어 콘솔에 "bar"가 먼저 찍히게 된다.

유의) 자바스크립트 엔진만 싱글스레드, 브라우저는 멀티스레드이다.



과제 내용

태스크의 실행 순서가 보장되지 않는 비동기 타이머함수 setTimeout 을 콜백함수를 이용하여 동기 처리 방식처럼 실행 순서가 보장되도록 만들기.

  • 비동기를 주어진 배열 순대로 처리하기 위해서 즉시실행함수를 사용하였는데, 즉시실행함수란 무엇인가?
    -> 말그대로 함수를 정의하자마자 바로 호출하는 것을 즉시 실행 함수.

이번에 즉시실행함수를 처음 사용해보았는데 이 부분에 대해서도 더 공부가 필요할 듯 하다.

0개의 댓글