[2019.04.26] 자바스크립트의 비동기 특징과 비동기 방식을 다루는 법

자바스크립트는 싱글 스레드이다. 그래서 비동기 방식의 함수를 정말 많이 내장하고 있다.

# 비동기 방식의 특징

동기적 함수들은 절대 비동기 함수를 기다려주지 않는다. 그래서 비동기 방식의 함수는 동기적 방식의 함수들이 처리를 다 하면, 그제서야 이벤트 큐에서 하나씩 가져와서 처리가 된다. 그래서 비동기적 방식의 함수를 호출 후 처리해야할 작업은, 처리할 함수를 콜백으로 넘기는 등 전부 비동기 함수 쪽에 몰아 넣어야 한다.

 

# 비동기 방식의 필요성

자바스크립트는 네트워크 상 웹 브라우저에서 사용하는 언어이다. 그러므로 자바스크립트는 통신이라는 개념을 가지고 있다. 통신 중 어떤 함수가 일 처리가 길어지면, 웹 브라우저는 계속 멈춤 상태가 되고 기다려야 된다. 통신 중 계속 기다려야 되는 상황을 방지하기 위해 비동기 방식을 가지게 된다.

 

비동기 처리 후 작업해야 하는 함수의 호출 방식

function timer(count, callback){
  setTimeout(function(){
    callback(count + 1);
  },1000);
}

timer(0, function(count){
  console.log(count);
});

 

그러나, 비동기 호출 후 처리할 함수가 많다면, 하나하나 콜백으로 넘겨주어야 하는 불편함이 있다. 그러면 코드의 가독성이 떨어지게 된다.

또한 비동기 함수들끼리는 절대 서로 기다려 주지 않는다... 비동기 함수들끼리 나온 데이터로 처리할 일이 있으면, 엄청 복잡해진다..

 

그래서 비동기 방식의 함수를 순차적으로 쓰기 위한 방법이 Promise와 async await 이다.

promise와 sync await을 쓰면, 가독성 있기 비동기 함수들을 순차적으로 처리할 수 있다.

 

# Promise

 

프로미스는 이전에 정리한 내용이 두개나 있으므로...

https://helloinyong.tistory.com/31

[2019.03.06] 비동기 처리방식 Promise와 Async await

https://helloinyong.tistory.com/68

[2019.04.14] fetch API의 개념, 그리고 다시 정리해본 Promise

 

 

# async await

Promise만으로로 비동기의 순차적 처리가 가능하나, then then이 싫어서, 더 가독성이 있는 코드를 위해 나온 녀석이 async await이다.

 

• async : 비동기 순차적 처리를 할 함수들의 필드(?)
• await : 비동기 함수를 순차적 처리로 호출할 키워드

 

function time(count){
  return new Promise((resolve, reject)=>{
    setTimeout(functon(){
    	resolve(count + 1);  //비동기 함수
  	},1000);
  });
}

async function field (){
	var result = await time(10);

    /*  혹은 이렇게도 호출 가능 */
    
    var result = await time(10)
    .then(data =>{
      data
    });
    
    return result;
}

field.then(data => {
  console.log(data); // 11
});

 

await의 특징

• await로 실행할 함수는 무조건 promise를 반환해야한다.
• 반환값을 그냥 받아도 되고, then()으로 받을 수도 있다.

async의 특징

• async의 함수에서 반환되는 값은 promise이므로, async로 선언된 함수의 반환값은 then()으로 받아야한다.

 

이전에도 promise나 async await는 미리 공부 해보기도 하고 블로깅도 얼추 해봤었는데...지금까지 내가 제대로 이해를 못하고 있었나보다..

이번 server-side 스프린트를 진행하면서 보다 조금 더 비동기 방식 다루는 법에 익숙해질 수 있었던 것 같다.