3주차 개념 스터디 - Javascript의 비동기 기술

[ 동기와 비동기 ]

동기와 비동기는 추상적인 개념이다

 

동기 (stnchronous)

동기란 요청과 그 결과가 동시에 일어난다는 것으로, 바로 요청을 하면 결과가 나올때까지 기다렸다가 해당 요청을 먼저 처리하고 다음 요청으로 넘어간다.

설계가 간단하고 직관적이지만, 결과가 주어질 때까지 다른 요청은 수행하지 못하고 대기해야 한다는 단점이 있다.

 

비동기 (asynchronous)

비동기란 요청과 결과가 동시에 일어나지 않는 것으로, 요청이 들어오고 시간이 걸리면 다음 요청부터 처리하고 이전 요청이 끝나면 그 결과를 전달한다.

동기보다 복잡하지만, 요청에 대한 결과 처리가 오래 걸리면 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다.

 

 

[ blockging과 non-blocking ]

Blocking과 Non-Blocking은 함수 호출에서 호출자의 태도로, 주로 IO의 읽기, 쓰기에서 사용된다.

 

Blocking

요청한 작업을 마칠때까지 계속 대기한다.

즉시 return한다 -> return 값을 받아야 끝난다

Thread 관점으로 본다면, 요청한 작업을 마칠 때까지 계속 대기하며 return 값을 받을 때까지 한 Thread를 계속 사용/대기한다.

 

Non-blocking

요청한 작업을 즉시 마칠 수 없다면 즉시 return한다.

즉시 리턴하지 않는다. -> 일을 못하게 막는다.

(Thread 관점) 하나의 Thread가 여러 개의 IO를 처리할 수 있다.

 

 

[ 동기/비동기, 블록/논블록 사이의 관계 ]

동기/비동기 : 호출되는 함수의 작업 완료 여부를 누가 신경쓰는가!

 

호출되는 함수에게 callback을 전달하여 호출되는 함수의 작업이 완료되면 호출되는 함수가 전달받은 callback을 실행하고, 호출한 함수는 작업 완료 여부를 신경쓰지 않는다면? -> 비동기

 

호출하는 함수가 호출되는 함수의 작업 완료 후 return을 기다리거나 호출되는 함수로부터 바로 return 받더라도 작업 완료 여부를 호출한 함수 스스로 확인하며 신경 쓴다면? -> 동기

 

 

blocking/non-blocking : 호출되는 함수가 바로 return하는가!

 

호출된 함수가 바로 return해서 호출된 함수에게 제어권을 넘겨주고 호출한 함수가 다른 일을 할 수 있는 기회를 줄 수 있다? -> non-blocking

 

호출된 함수가 자신의 작업을 모두 마칠 때까지 호출한 함수에게 제어권을 넘겨주지 않고 대기하게 만든다? -> blocking

 

출처) https://musma.github.io/2019/04/17/blocking-and-synchronous.html

 

 

[ 자바스크립트의 비동기 처리 기술 변화(callback부터 promise, async-await까지) ]

자바스크립트는 single thread이기 때문에 이벤트를 처리할 수 있는 call stack이 하나뿐이다.

따라서 여러가지 이벤트를 처리할 때 동기적으로 처리하게 된다면 하나의 이벤트라 모두 처리될 때까지 다른 작업을 수행하지 못한다.

따라서 자바스크립트는 즉시 처리하지 못하는 이벤트들을 Web API로 보내 콜스택이 비었을 때 먼저 처리된 이벤트들을 줄세워 다시 이벤트 큐에 놓는다.

즉, Web API가 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요하다

(=실행순서가 불확실한 비동기)

하지만 비동기 처리 이벤트들의 순서가 중요하다면 이 순서를 정하기 위해 아래의 방식들을 사용한다!

 

콜백 함수

콜백 함수는 처리되어야 하는 이벤트들을 순차적으로 콜백 함수로 넣어주는 방식이다.

(일명 콜백 지옥)

함수의 반환 값을 받아서 다음 비동기 처리를 해야하는 경우에 위처럼 콜백으로 받아 비동기 처리가 가능하다.

 

하지만 이는 너무 고전적인 방식이라 아래와 같은 단점이 있다

- 가독성이 떨어진다

- 에러처리를 하려면 모든 콜백에서 각각 에러 핸들링을 해주어야 한다

 

 

Promise 객체

Promise 객체는 콜백 함수의 단점을 해결하기 위해 ES6에서 비동기 흐름을 컨트롤하는 방법으로 등장한 객체로, 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

이를 통해 비동기 작업이 성공 또는 실패로 완료된 후의 결과 값을 받을 수 있다. 이를 통해 결과 값을 돌려받을 수 있기 때문에 이후 처리를 컨트롤 할 수 있게 된다.

 

※ Promise의 상태값

Promise 객체는 new 키워드로 생성할 수 있으며, 총 4개의 상태 값을 갖는다.

• Pending: 아직 결과 값이 반환되지 않은 진행 중인 상태
• fulfilled: 성공
• Rejected: 실패
• Settled: 결과 값이 성공 혹은 실패로 반환된 상태 (fulfilled, Rejected)로, 한번 Setteld된 값은 재실행할 수 없다.

 

async/await

async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의한다.

이 때 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다.

비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는 것과 꽤 비슷하다.

 

 

 

참고)

https://velog.io/@yejinh/%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0#%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%9D%90%EB%A6%84%EC%9D%84-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EC%8B%9D%EB%93%A4

자바스크립트 비동기 처리 방식