프론트엔드와 백엔드가 통신을 할때 동기적으로 처리를 해야 하는 경우가 있고, 비동기적으로 처리를 해야 하는 경우가 있다. 먼저 동기와 비동기의 정의와 적합한 사용방법에 대해 알아보려 한다.

동기와 비동기

동기: 동기적인 처리라 함은 차례로 순차적으로 처리하는 것 즉, 서버 컴퓨터가 작업이 끝날때까지 기다리는 통신. 비동기: 여러가지 일을 동시에 처리하는 것 즉, 통신에 적용해봤을때 서버 컴퓨터가 작업이 끝날때까지 기다리지 않는 통신.

그렇다면 비동기적인 처리가 무조건 좋은 방식이라 할 수 있을까? 그렇지는 않다. 동기적인 처리와 비동기적인 처리가 필요한 경우가 각각 다르다.

1. 상품을 등록 후 등록한 상품을 조회하는 기능을 개발할때 : 유저가 등록 버튼을 클릭하고 > 조회버튼을 클릭했을때, 저장되어 있는 DB가 보여주어야 한다. 만약 이때 비동기 통신을 한다면 등록이 채 되지도 않았을때 조회하는 API가 등록API의 완료를 기다리지 않고 동시에 실행되어 원하는 결과를 제때 불러올 수가 없다. 따라서 이러한 경우에는 동기적 통신이 적합하다.

2. 네이버나 다음 등 포털 사이트에 들어갔을때 유저에게 보여지는 수많은 UI: 비동기적으로 처리해야 한다. 광고 API, 쇼핑 API, 웹툰 API 등 여러 API를 화면에 보여주어야 한다고 했을때, 1개가 다운받아진 후에 차례차례 다음 데이터를 불러온다면 화면 렌더링 시간이 그만큼 느리고 사용자 편의성에도 좋지 않다. 따라서 모든 데이터를 비동기적으로 한꺼번에 요청하여 빠르게 보여질 수 있도록 비동기 통신이 적합하다.

그렇다면 자바스크립트 엔진은 비동기적일까 동기적일까? 기본적으로 자바스크립트 엔진은 순차적으로 코드를 읽어나가기 때문에 동기적이라고 할 수 있다. 하지만, http 통신에 많이 사용되는 axios 같은 도구들은 대게 비동기적이다. REST-API를 받아오기 위해 axios 설치하는데 조회기능을 많이 구현해서 인지 대게 나오는 요즘 나오는 axios같은 도구들은 대게 비동기 처리를 한다. 아래 코드를 살펴보면,

function myfunc() {
  const data = axios.get("API주소");
  console.log(data);
}
//Promise

위 코드처럼 요청을 한 후 console.log를 찍어보면 Promise가 뜬다. 이는 조회요청을 한 후, 요청이 완료되기 까지 소요되는 시간이 있는데 이를 기다리지 않고 비동기적으로 아래 코드를 읽었기 때문에, Promise 곧 받아올 것이라는 약속밖에 안 들어 있는 것이다.

그렇다면 이렇게 axios같이 비동기적 처리를 하는 도구들을 동기적으로 바꾸어 주어, 통신이 완료 되었을때 다음 코드로 넘어갈 수 있게 해주는 방법이 없을까?

async-await

async-await는 ES8에 나온 문법으로 Promise 를 쉽게 사용할 수 있게 해준다. 사용법은 아래와 같다. 위의 코드가 있을때, 데이터 통신이 되었을때 다음 코드를 실행하게 하고 싶다면

async function myfunc() {
  const data = await axios.get("API주소");
  console.log(data);
}

위 처럼 통신 앞부분에 await로, 함수 앞부분에 async로 기재해주면 통신이 완료되기까지 동기적으로 기다렸다가 다음 코드를 실행시키기 때문에, consoel.log를 찍었을때 해당 받아온 데이터를 출력한다.

위처럼 async-await를 사용하면 비동기처리를 동기처리로 쉽게 바꾸어줄 수 있다.