ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 14-1. JavaScript 비동기의 개념과 타임아웃
    JavaScript 2023. 4. 10. 12:09

    I. 동기 (Synchronous) vs 비동기 (Asynchronous)

     

    // 동기
    짜장면_배달();
    짜장면_먹기_동기식();
    다음_장소로();
    
    // 비동기
    짜장면_배달();
    짜장면_먹기_비동기식();
    다음_장소로();

    예를 들어, 위와 같은 코드가 있다고 가정해보자.

    동기 방식은,

    1. 짜장면 배달

    2. 주문자가 짜장면 먹기 (배달부는 다 먹을때까지 기다림)

    3. 다 먹으면 배달부가 빈 그릇을 들고 다음 장소로 이동

    이런식으로 순서대로 실행하는 것을 볼 수 있다.

    이 때, 배달부는 주문자가 짜장면을 다 먹을때까지 아무것도 할 수 없다.

     

    하지만 비동기 방식은,

    1. 짜장면 배달

    2. 다음 장소로 이동

    3. 주문자가 짜장면 다 먹는 시간에 맞춰서 빈 그릇

    이렇게 꼭 순서대로 실행되는 것은 아니다.

     

    비동기 방식으로 프로그래밍을 하면 순서대로 일을 처리하는 것보다

    더 효율적으로 프로그래밍을 할 수 있게 된다. 

     

     

    1. setTimeout 함수

    - 첫 번째 인자로 넣은 콜백 함수를 두 번째 인자로 넣은 수 만큼의 밀리초 후 실행

    - Web API, Node.js 등 자바스크립트 환경의 기능 (언어의 기능이 아님)

    - 자바스크립트 코드는 본래 싱글스레드로 실

    setTimeout(() => {
      console.log('타임아웃!');
    }, 1000);

     

    2. 비동기 (asynchronous) 코드

    - 동기 코드와 달리, 코드가 순서대로 실행되지 않음

    console.log('하나');
    
    setTimeout(() => {
      console.log('둘');
    }, 1000); // 💡 0으로 바꿔 다시 실행해 볼 것
    
    console.log('셋');
    
    // 하나
    // 셋
    // (1초 후) 둘

    - 일반적으로 타임아웃, 네트워크 요청 등 시간이 걸리는 작업에 사용

    - 당장 할 수 있는 것들을 먼저 다 하고, 시간이 걸리는 작업은 뒤로 넘기기

     

Designed by Tistory.