비동기의 정의
비동기는 간극(시간 사이의 틈)에 비교할 수 있을 것 같다.
이 틈이 프론트엔드에서는 엄밀하게 다루어져야 한다는 것인데..
왜 그 틈이 프론트엔드에서 엄밀하게 다뤄져야 할까?
과거에 웹 페이지는 단방향으로 단순 정보만 표기해주었지만 현대 사회에서는 사용자와 상호작용을 이끌 수 있도록 진화했다.
- 주기적으로 발생하는 사용자의 인터랙션 처리
- 연속적으로 변경되는 정보를 사용자에게 표시
등 들어오는 순서대로만 처리를 하기에는 한계가 있을 수 밖에 없었다.
기술이 발전하면서 타이머 이벤트, 서버와의 네트워크 통신, 애니메이션 등 간극을 예측하기 힘든 요인들이 생기기 시작했고, 자연스럽게 대기시간이 발생할 수 밖에 없어진 것이다.
프론트엔드에서 비동기 처리를 해야하는 이유
무언가를 기다려야하는 것은 유저가 아닌 브라우저의 역할이니까 🤭
비동기 처리 방식
자바스크립트 개발자들은 꽤 오랜시간 비동기 처리를 위해 Callback 방식을 사용했었다. 하지만 이 방식만으로 처리하기에는 한계가 잇따랐다.
그래서 그 대안점으로 출현한 방법이 Promise, Async Function이다.
과연 Callback의 한계점은 무엇이였고, 이들이 해결하고자한 것이 무엇일까?
1. CallBack
낮은 신뢰성
필요한 데이터를 Callback에 잘 전달했는가?
호출 시점(느리거나 빠르거나)
호출 횟수(많이 하거나 적게하거나)
낮은 가독성
콜백지옥도 문제지만 사실 비동기 자체의 한계점이라고 생각한다.
일반적으로 인간의 사고방식은 일이 순차적으로 이루어지는 것에 친숙하다.
코드를 읽을 때도 직선적인 논리 흐름으로 이끌어지는데,
비동기는 동작방식 특성상 직선적인 추론을 제시할 수 없다.
2. Promise (ES6)
Promise는 한마디로 미래에 값을 반환할 수도 있는 함수를 캡슐화한 객체다.
이 친구는 외부 라이브러리에 Callback 함수를 넘겨주지 않고도 비동기 요청에 대한 결과를 받아와서 직접 처리할 수 있다.
Callback보다는 신뢰성이 높다.
특징
- 비동기 요청 수행에 대한 3가지 상태(성공, 실패, 대기)를 가지고 있다.
- 내부에서 비동기 요청이 끝나고나면 Callback에 그 결과 값을 넘겨준다.
- Promise를 생성하면 내부 로직은 바로 실행된다.
- Promise 객체의 then, catch 메소드를 통해 외부 라이브러리에 Callback을 넘겨주지 않고도 직접 처리가 가능하다.
- 단순 Callback 처리와 비교했을 때 성능이 저하된다.
3. Async Function (ES2017)
Generator라는 친구가 있는데 이 친구로 가독성이 높게 비동기 처리를 하는 코드를 짤 수 있다고 한다.
Async Function은 Promist(신뢰성) + Generator(가독성)을 결합한 방식이라고도 볼 수 있다.
가독성을 향상 시키는 동시에 폭넓은 예외처리도 가능하게 되었다.
특징
- 함수 내에서 await를 만나면 함수 실행을 일시 중지한다.
- await 뒤에 있는 Promise의 수행 결과 값을 받아와서 다시 함수를 재실행한다.
async function asyncTask() {
const data = await request()
}
function request() {
return new Promise(resolve => {
ajax('url', function(data) {
resolve(data)
})
})
}await문은 뒤에 오는 주체가 Promise 일 때만 간극을 기다린다.
Promise 내부 수행과정에서 에러가 발생하면 throw와 같은 동작을 수행하고,
성공하면 그 결과값을 반환한다.
장점
1. await를 통해서 반환 받은 것이 Promise의 수행된 값이기 때문에 외부에서 예외처리가 가능하다.
2. 앞의 두 방법보다는 가독성이 높다.
단점
1. 관련 함수마다 async 키워드를 일일이 선언해줘야할 수도 있다.
2. 하나의 함수 안에서 다수의 Promise를 병렬적으로 처리할 수 없다. (Promise.all)
해당 게시글은 [10분 테코톡] 📖 카일의 프론트엔드의 비동기를 참고하여 작성하였습니다.
