비동기

비동기

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 처리방식이다. 이런 방식으로 구동할 경우, idle time이 사라져 컴퓨터 자원을 최대한 사용할 수 있어 효율적이다. 그러나, 프로그래머가 원하는 순서대로 실행되지 않는 문제점이 발생한다.

 

콜백함수

코드가 순서대로 실행되지 않는 문제를 해소하기 위해 콜백함수가 탄생했다. 식당을 예약하듯이 우선 A(자리에 착석)라는 작업이 끝나야 B(음식 주문)를 실행할 수 있도록 한다. 마치 함수 안의 인자 안에 함수를 심은 모양새이다.

 

Callback hell

callback hell 예시

위와 같은 형태를 callback hell이라고 부른다. 가독성이 떨어지고 로직을 변경하기 어렵다. 이를 해결하기 위한 두 가지 문법이 존재한다.

 

promise

promise 예시

promise는 pending, fulfilled, Rejected 총 3가지 상태가 존재한다.

Pending : 비동기 처리 로직이 아직 완료되지 않은 상태이다. new Promise() 메서드를 호출하면 이 상태가 된다.

fulfilled : 비동기 처리가 완료되어 결과값을 반환해준 상태이다. resolve()가 실행되면 이 상태가 된다. then()을 이용해서 결과값을 받을 수 있다.

rejected : 비동기 처리가 실패하거나 오류가 발생한 상태이다. reject()가 실행되면 이 상태가 된다. catch()를 이용해서 결과값을 받을 수 있다.

 

promise chaining

promise chaining 예시

여러 개 promise를 연결하여 사용할 수 있다. then을 이용해 연결한다.

 

async & await

async & await 예시

비동기 처리 패턴 중 가장 최근에 나온 문법이다. 동기 처리와 같이 코딩할 수 있고 가독성이 뛰어난 장점이 있다. 

fetchUser 함수에 await를 붙이지 않으면 코드의 실행 순서를 보장 받을 수 없다.

 

출처

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

http://callbackhell.com/

Callback Hell

SOPT 25th Server Seminar PPT