JS 비동기

메론맛캔디·2021년 10월 16일

async/await callback promise 기술면접 자바스크립트

기술면접

목록 보기

3/30

Callback 패턴과 문제점

우선 동기와 비동기가 무엇인지 알아볼 필요가 있다.

동기 Synchronous

위에서 아래대로 순서대로 실행되는 흐름이다.
현재 실행 중인 코드가 완료된 후에 실행된다. 그 전까지는 blocking.

비동기 Asynchronous

실행 중인 코드가 완료되지 않아도 다음 코드를 실행한다.
별도의 요청, 실행 대기, 보류등과 같은 코드는 비동기적인 코드다.
eg) 이벤트 처리, 서버 통신 등은 비동기적인 작업

비동기 처리가 왜 필요할까?

싱글스레드는 여러 태스크를 동시에 처리할 수 없기 때문에 비동기적으로 태스크를 처리해 오래걸리는 작업을 기다리지 않고 다음 작업을 먼저 수행하는 것이다. 때문에 실행 순서가 보장되지 않는다.
non-blocking
JS에서 비동기처리를 하기 위해 callback을 사용한다.

콜백 함수

매개변수로 다른 코드의 인자로 넘겨주는 함수이다.
매개변수로 함수를 받는 함수는 High-Order Function이다.
콜백 함수를 넘겨받은 코드는 들어온 콜백 함수를 내부 로직에 의해 콜백 함수를 적절한 시점에 시행하게 된다.

콜백 지옥 은 콜백 함수를 익명 함수로 전달되는 과정을 반복해서 코드 들여쓰기가 감당하기 힘들정도로 깊어지는 현상을 의미한다. 이는 가독성과 유지보수 측면에서 좋지 않다

Promise란?

promise는 비동기작업을 완료 또는 실패를 나타내는 객체이다.
promise 객체는 아래와 같은 내부 프로퍼티를 갖게 된다.

state 상태
+ pending(대기) : resolve 또는 reject할지 결정 전인 상태
+ fullfilled(이행) : 요청이 성공적으로 완료된 상태
+ rejected(거부) : 요청이 실패한 상태
resolve : promise를 이행
reject : promise를 거부

상태들은 비동기 호출과 동시에 받는다. 대기중인 promise는 이행하거나 거부될 수 있다. 이후 상태에 따라 promise를 후속 처리하는 메서드가 있다.

.then : 2개의 콜백 함수를 인자로 전달받는다. 첫번째 콜백함수는 성공 시 호출되고, 두번째 콜백 함수는 실패 시 호출된다.
.catch : 비동기 처리에서 에러가 발생하는 경우 호출된다. promise를 반환한다.

chaining : .then과 .catch와 같이 promise를 후속 처리하는 메서드들은 다시 promise 메서드를 호출할 수 있는 것을 의미한다.

promise는 2개로 나누어진 큐 중, microTask에서 핸들링이 된다.
우선순위는 micro > task 순서이다.

Promise.all 언제 쓰이는지?

promise가 한개 이상인 경우

Promise.all([apiRequest(...), apiRequest(...), apiRequest(...)]).then(function(result) {
    // API 결과 값이 배열로 나온다.
}, function(err) {
    // 에러 처리
});

async/await

promise에 대한 syntatic sugar 이다.
promise를 읽기 좋고, 사용하기 쉽게 만든 wrapper이다.
async/await으로 감싸므로써 비동기 코드를 동기적이고 절차적인 코드처럼 보이게 해서 이해하기 쉽게 만든다.
await은 비동기 함수에서만 사용가능하다.비동기 함수를 호출하는데 사용되며, resolve 또는 reject 될때까지 기다린다. await은 코드가 위치한 비동기 함수 내에서 코드 실행을 차단한다.

async/await의 오류 처리

성공적으로 resolve가 되면 try를 사용하고, reject가 되면 catch를 사용한다.
try와 catch를 사용해 promise를 처리한 후 코드를 실행하려면 .finally() 메서드를 사용할 수 있다. .finally() 메서드 내부의 코드는 promise 상태에 관계없이 한번 실행된다.

정리

동기 : 위에서 아래대로 순서대로 실행되는 흐름이다. 어떤 코드가 실행되고 있다면 그 코드가 완료된 후에 실행된다.
비동기 : 이벤트 처리나 서버 통신과 같은 작업을 말한다. 즉, 실행 중인 코드가 완료되지 않아도 다음 코드를 실행한다.

콜백이 무엇인가요?

옵저버 패턴 (디자인 패턴중 하나)에서 나온 개념으로, 객체의 상태에 변화(이벤트)가 발생했을 때 함수를 통해 전달하는 것을 콜백함수라고 한다.
JS에서 비동기 프로그래밍을 위해 callback을 사용한다.
보통 서버로 어떠한 요청을 보낼 때 응답을 기다리는동안 가만히 시간을 버리는 것이 아닌, 다른 작업을 함으로써 동기적인 코드에 비해 성능을 향상시킬 수 있는데, 이러한 이유 때문에 콜백함수를 사용하게 된다.

콜백 지옥은 무엇인가요?

콜백 지옥 은 콜백 함수를 익명 함수로 전달되는 과정을 반복해서 코드 들여쓰기가 감당하기 힘들정도로 깊어지는 현상을 의미한다. 이는 가독성과 유지보수 측면에서 좋지 않다 => 이를 해결하기 위해 ES6에서는 Promise와 Generator, 그리고 ES2017에서는 async와 await이 나오게 된다.
이런 콜백 패턴이 가진 단점을 보완하기 위해 Promise가 나왔다.

Promise에 대해 설명해주세요.

Promise는 비동기 처리를 위한 객체이고, 상태를 3가지로 나타낸다. (pending, fulfilled, reject) 이 때문에 어떤 상태인지 쉽게 확인할 수 있다.
이 상태는 promise의 콜백인 resolve, reject 함수의 호출 여부에 따라서 결정된다.
장점 : 복잡한 비동기 처리를 쉽게 패턴화할 수 있다.
async / await 은 promise에 대한 syntatic sugar 이고, 비동기 코드를 동기적이고 절차적인 코드처럼 보이게 해서 이해하기 쉽게 만든다.