비동기를 동기로 처리하는 이유

작성한 질문수 12

7

안녕하세요 이정환입니다.

자바스크립트에는 다음과 같은 내장 또는 외장 비동기 함수들이 존재합니다.

• fetch : 서버로부터 데이터를 받아오는 API 호출을 해주는 함수

• setTimeout : 특정 시간 이후 콜백함수를 실행시켜주는 함수

• setInterval : 특정 시간 마다 틱을 발생시켜 콜백함수를 주기적으로 실행시키는 함수

이런 함수들은 모두 Promise를 반환하기 때문에
자동으로 비동기적으로 동작하게 됩니다.

그런데 가끔 우리가 코드를 작성하다보면, 이런 비동기 함수의 결과값들을 바로바로 이용하고 싶을 때가 있습니다. 예를 들면 다음과 같은 상황이 있을 수 있죠

1. fetch를 이용해 A서버로부터 배열 형태의 게시글 데이터를 불러오기

2. 데이터를 불러왔다면 특정 조건을 이용해 필터링 하기

이때 2번 동작을 실행시키기 위해서는 1번 동작이 끝난 다음에, 결과값을 받아와 실행시켜줘야 합니다.
그런데 1번 동작이 비동기적으로 동작하기 때문에 이를 동기적으로 처리하기가 어렵습니다.

따라서 위와같은 경우에 async, await 키워드를 이용해 다음과 같이 동기적으로 직관적으로 코드를 작성할 수 있습니다.

async function getDataAndFiltering(){
  
  // 비동기 작업 : 1번에 해당함
  const data = await fetch(...).then((res)=>res.json());
  
  // 동기 작업 : 2번에 해당함
  const filteredData = data.filter(...);
  return filteredData;
}