비동기 처리 함수

비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로서, 암시적으로 Promise를 사용하여 결과를 반환한다.

mdn web Docs에서는 위와 같이 설명되어 있다. 비동기는 둘 이상의 객체 또는 이벤트가 동시에 존재하지 않고 발생하는 경우 또는 이전 객체 또는 이벤트가 완료될 때까지 기다리지 않고 실행한다는 의미이다.

그러므로 비동기 함수는 async/await을 이용하여 많이 사용하는데 이는 최근에 나온 방법으로써 비동기처리에 이용되는 콜백함수나 프로미스의 단점을 보완하고 코드를 효율적이게 짤 수 있도록 도움을 준다.

{/* 내가 구현한 코드에서 post를 받는 임의 비동기 함수로 수정 */}
const postApi = {
  getList: async (postId: string, params: postData) => {
    const { data } = await axiosInstance.get(END_POINTS.POST.LIST(postId), {
      params,
    });

    return data.result;
  },
  
  generalGetList: async function(postId: string, params: postData) {
    const { data } = await axiosInstance.get(END_POINTS.POST.LIST(postId), {
      params,
    });
    
    return data.result
  } 
}

화살표 함수를 이용하여 구현하였기에 익숙한 함수 코드가 아닐 수 있다. 화살표 함수는 함수의 이점은 코드를 직관적으로 표현할 수 있다는 것인데 function과 반환 값을 가질 때는 {}를 생략하면 바로 따로 return 문을 입력하지 않아도 반환할 수 있다는 장점들이 있다.

나중에 ES6 문법에 대해서 글을 쓸때 자세히 설명하기로 하겠다. 궁금한 사람은 직접 공부해보아도 좋을 것 같다.

https://www.w3schools.com/js/js_es6.asp

async/await 비동기 처리함수 원리

클라이언트에서 비동기 처리는 요청을 보내고 받지 않아도 다음 작업을 처리하도록 되어 있기에 콜백함수를 받아와서 요청에 대한 응답이 올 경우 Promise를 반환 후 처리를 할 수 있도록 비동기 함수를 동기적인 처리 방식으로 사용하는 것이 async/await 인 것이다.

비동기 처리 함수가 중요한 이유

비동기 함수를 사용할 때 보통 위 코드와 같이 백엔드에 api를 요청할 때 많이 작성한다.

이때 async과 await 처리를 해주지 않으면 데이터를 받기 전에 요청을 반환하여 undefined나 null 값을 받는 오류가 발생한다. 물론 async과 await을 이용하지 않는 방법도 있다 요청을 받을 변수를 담는 값 (위 코드에서는 data)이 undefined나 null 값이 아닐 경우에 반환을 하게 되면 된다.

if (data !== null && data != undefined) return data.result;

/* 플래그를 생성해서 비동기 처리 값을 받는 방법 : 값을 받기를 기다리는 로딩 상태때 특정 이벤트나 로직을 추가할 수 있게 된다. */
isLoading = false;

if (data !== null && data != undefined) isLoading = true;

if (isLoading === false) {
  {/* 데이터를 받고 있을 때 콘솔에 로그를 찍는 로직 */}
  console.log('데이터 받는 중');
}else {
  return data.result;
}

이런식으로 코드가 길어지는 상황이 발생한다. 그렇기에 async/await 비동기 처리 함수를 이용해 특별한 로직을 추가하지 않고 데이터를 받기전에 반환되는 오류를 막을 수 있다.

비동기 처리 함수 구현할 때 마주친 문제

api요청 후 데이터가 안 받아지는 문제가 발생한다면 async/await을 함수/함수 메서드 에 붙였는지를 잘 확인해보아야 한다.

이러한 사소한 실수로 인해 오류가 발생할 경우 에러를 찾는데 많은 시간을 할애 할 수밖에 없고 코드가 많아 지는 대형 프로젝트의 경우 더욱 찾기 어려워진다는 것을 프로젝트를 하면서 많이 느끼게 되었다.

그렇기에 발생되는 버그의 원인을 유추 할 수 있을 경우 버그를 고치는데 할애하는 시간은 더욱 짧아질 것이라고 생각한다.