비동기는 무엇일까? 먹는건가?
API 개발을 하다보니 동기 비동기라는 개념이 나타난다.
처음에는 낯설다보니 무섭게만 느껴지는 존재였다.
하지만 무섭다고 계속 피할수만은 없으니 간단하게 알아보자.
비동기 통신
동기, 비동기는 알고보면 굉장히 단순한 친구이다. 동기는 순서대로 흘러가는 친구이고 비동기는 순서대로 흘러가지 않는 친구이다.
Javascript에서 주로 비동기 처리를 많이 하는데 스크립트 코드는 자바스크립트 엔진에서 관리한다. 우리가 흔히 알듯이 자바 스크립트는 싱글 쓰레드를 사용하는데 동기와 비동기를 함께 사용하는 경우가 많다. 이렇게 쓰면 비효율적일 것이라는 생각이 드는데 사용하는 이유를 들어보면 이유가 합당하다.
우리가 API를 사용하여 서버단에서 데이터를 받을 때 동기적으로 해결하려면 블로킹이라는 장애물에 막혀서 사이트에 렉이 생길 수도 있고, 이미지를 불러오는데 시간이 오래 걸려서 이미지가 안 띄워질 수도 있다.
이러한 이유에서 우리는 필수적으로 비동기 통신을 선택해야 하는데 비동기 통신이 작동하는 원리는 무엇일까?
작동원리
자바스크립트는 싱글 쓰레드를 사용하여 비동기 통신을 사용하면 효율이 떨어질거라 생각하지만 사실 자바스크립트에는 숨겨진 조력자가 있다.
태스크 큐라는 든든한 조력자가 있는데 만약 동기와 비동기의 코드가 함께 실행된다면 먼저 비동기 코드들을 WebAPI라는 창고에 넣어둔 후 동기 코드들을 처리하고 비동기를 처리한 후 태스크 큐에서 이벤트 루프를 타고 쓰레드에 올려 처리하는 방식이다.
문제점
무슨 방식이던지 장점이 있으면 단점도 있다. 위와 같은 방식을 사용했을 때 문제점이 있는데 비동기 처리가 하나가 아닌 여러개 이거나 컴포넌트가 많아 순서가 복잡하다면 문제가 발생한다. 프론트 개발자들이 무서워한다는 콜백지옥이 펼쳐지게 된다. 하지만 이 문제점도 해결할 수 있는 방법이 있다. 바로 자바스크립트에서 지원하는 Promise, async, Await 를 통해서 문제점을 해결할 수 있다.
해결
해결방법을 알기 위해서 예시코드를 살펴보자
function first_Promise (data) {
return new Promise(function(resolve, reject) {
ajax(Url정보,
function(response){
resolve(response);
})
}
}
function second_Promise (data1) {
return new Promise(function(resolve, reject) {
ajax(Url정보,
function(response){
resolve(response);
})
}
}
async function result(data) {
let first_data = await first_Promise(data);
let second_data = await second_Promise(first_data);
}
result("1234"); 위에 코드를 살펴보자면 먼저 Promise 함수로 ajax 비동기 호출을 해준 후, 그 데이터를 순차적으로 받아올 때 async 와 await를 사용해서 콜백지옥 없이 상당히 가독성 높은 코드로 받아올 수 있다.
참고
