비동기 Asynchronous 이해하기

Asynchronous 비동기 

보통 코드는 한번에 한가지 사건만 발생하면서 순차적으로 진행된다.

만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 한다.

그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보면,  전체 프로그램이 모두 멈춘 것처럼 보이게 된다.

 

기다리는 동안 다른 작업을 수행할 수 있는것,

이것이 비동기 프로그래밍의 기본이다.

 

Blocking code

웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있다. 이러한 현상을 blocking 이라고 부른다. 

 

 

Threads

쓰레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스이다.

각 스레드는 한 번에 하나의 작업만 수행할 수 있다.

 

Task A --> Task B --> Task C

 

각 작업은 순차적으로 실행되며, 다음 작업을 시작하려면 앞의 작업이 완료되어야 한다.

 

자바스크립트는 기본적으로 single threaded이다.

 

비동기 처리

 Main thread: Task A --> Task B --> |Task D|
Worker thread: Task C -----------> |      |

Task D가 사용될 때 Task B, Task C 둘 중 어느 값이라도 입력이 되지 않을경우 에러가 발생한다.

 

브라우저를 통해 특정 작업을 비동기적으로 실행할 수 있다. Promises 를 사용하면 Task A가 서버에서 이미지를 가져오는 동안 Task B를 기다리게 할 수 있다.

Main thread: Task A                   Task B
    Promise:      |__async operation__|

 

Promise

프로미스 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

 

Promise가 갖는 상태

• 대기(pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

let myFirstPromise = new Promise((resolve, reject) => {  
  // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
  // In this example, we use setTimeout(...) to simulate async code. 
  // In reality, you will probably be using something like XHR or an HTML5 API.
  setTimeout(function(){
    resolve("Success!"); // Yay! Everything went well!
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage is whatever we passed in the resolve(...) function above.
  // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
  console.log("Yay! " + successMessage);
});

'use strict';
var promiseCount = 0;

function testPromise() {
    var thisPromiseCount = ++promiseCount;

    var log = document.getElementById('log');
    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') 시작 (<small>동기적 코드 시작</small>)<br/>');

    // 새 프로미스 생성 - 프로미스의 생성 순서를 전달하겠다는 약속을 함 (3초 기다린 후)
    var p1 = new Promise(
        // 실행 함수는 프로미스를 이행(resolve)하거나
        // 거부(reject)할 수 있음
        function(resolve, reject) {
            log.insertAdjacentHTML('beforeend', thisPromiseCount +
                ') 프로미스 시작 (<small>비동기적 코드 시작</small>)<br/>');
            // setTimeout은 비동기적 코드를 만드는 예제에 불과
            window.setTimeout(
                function() {
                    // 프로미스 이행 !
                    resolve(thisPromiseCount);
                }, Math.random() * 2000 + 1000);
        }
    );

    // 프로미스를 이행했을 때 할 일은 then() 호출로 정의하고,
    // 거부됐을 때 할 일은 catch() 호출로 정의
    p1.then(
        // 이행 값 기록
        function(val) {
            log.insertAdjacentHTML('beforeend', val +
                ') 프로미스 이행 (<small>비동기적 코드 종료</small>)<br/>');
        })
    .catch(
        // 거부 이유 기록
        function(reason) {
            console.log('여기서 거부된 프로미스(' + reason + ')를 처리하세요.');
        });

    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') 프로미스 생성 (<small>동기적 코드 종료</small>)<br/>');
}

 

 

일반적인 비동기 프로그래밍 개념

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise