Async/Await 문법 알아보기

"처음 하는 분들은 더 헷갈릴 문법!"

생각보다 자주 쓰지만 생각보다 헷갈리는 Async/Await

개발을 하다보면 자주 사용하는 문법 중 하나인 Async와 Await에 대해서 개념을 정리해보려고 합니다. 이 글이 다른 사람들에게도 도움이 되었으면 합니다. 혹시 보면서 수정 할 내용이나 조금 더 보완을 했으면 좋겠다는 것이 있으면 댓글로 남겨주세요

목차

async/await

자바스크립트 기준으로 설명을 작성해보려고 합니다. 우선, 해당 문법의 경우 비동기 프로그래밍을 위한 구문 중 하나이며 이를 통해 프로미스(Promise)를 더욱 간결하고 직관적으로 사용 할 수 있는 방법 중 하나입니다. 기본적인 개념은 모든 언어에서 비슷합니다만 각 언어 특성상 약간은 다를 수 있으니 큰 개념에선 이렇다라고 이해하시면 됩니다.

비동기 처리가 필요한 이유

비동기 처리가 왜 필요한지에 대해서 먼저 알아보도록 하겠습니다. 다양한 이유가 있겠지만 저의 경우 여러 글을 확인을 했을 때 몇가지를 줄여본다면 아래와 같다고 생각을 합니다.

1. I/O 작업의 처리를 위한 네트워크, 파일시스템, 데이터베이스를 처리 할 때

- 위 작업들은 생각보다 처리 할 때 시간이 필요한 경우가 있는데 이럴 경우 동기적으로 처리를 한다면 해당 행위가 끝날 때까지 멈추다보니 사용자 입장에선 느리다고 느껴질 수 밖에 없습니다.

2. 사용자 응답성 유지

- 위 이유 중 하나인  동기 처리처럼 멈춤이 없고 비동기 처리이기 때문에 사용자의 사용에 대해 별도의 개입이 없습니다.

3. 서버 동시성 처리

- 동시 여러개의 요청을 처리하기 위해 비동기로 하는 것이 적합합니다. 또한 효율적인 자원 사용을 통해 필요하지 않는 동안에도 CPU나 메모리를 점유하지않습니다.

단점도 있겠죠?

네! 물론 단점이 있긴 합니다, 적절히 내가 필요한 상황에서만 사용을 하여야 겠죠 그럼, 어떤 단점이 있는지 간단하게 알아보겠습니다.

1. 코드 복잡성 증가

- 비동기를 처리하기 위해선 아래에도 다시 설명을 하겠지만 콜백, 프로미스 체인, async, await 등 사용을 하다보면 코드가 더욱 복잡해지고 유지보수와 함께 디버깅이 어려워지는 것을 확인을 할 수 있습니다.

2. 에러, 디버깅 대응 문제

- 비동기 처리를 하다보니 여러개에서 처리를 할 때 어느 부분에서 해당 에러가 발생이 되었는지 확인을 하는 것이 상대적으로 어렵습니다. 디버깅 또한 비동기는 크게 정해진 순서가 없다보닌깐 명확하지 않아 확인에 더욱 시간이 들 수 있습니다.

3. 메모리 문제

어떠한 오류나 문제로 해당 비동기 작업이 완료되지 않거나 취소되지 않으면 메모리 누수 현상이 발생이 될 수 있습니다.

비동기(asynchronous)/기다리다(await)

비동기 작업을 처리를 할 수 있도록 도와주는 함수라고 생각을 하고 있으면 이해가 조금 더 쉬울겁니다. 또한 항상 프로미스(promise)를 반환하며 프로미스가 아닌 값을 반환하더라도 이행 상태의 프로미스로 값을 감싸 이행된 프로미스가 반환될 수  있도록 합니다. 이 함수 내부에는 await을 사용을 할 수 있습니다.

 

위와 같이 총 두가지로 간단하게 보면 됩니다.

1. 항상 프로미스 반환한다!

2. 함수 내부 await을 사용을 할 수 있다.

 

그럼, 기본 문법과 함께 간단한 예제를 보며 살펴봅시다.

/*
* 비동기 처리를 위한 Async 기본문법
*/
async function functionAsync(){
	// 수행 할 코드
}

비동기를 사용을 하기 위한 기본 문법입니다. 해당 함수 안에 어떤 행위를 할 것인지 적으면 됩니다.

async function searchData() {
	const response = await fetch('test');
    const data = await response.json();
    
    return data;
}

searchData().then(data => { console.log("수신결과 : ", data); })


// 에러 처리까지 해봅시다.
async function searchData() {
	try
    {
    	const response = await fetch('test');
    	const data = await response.json();
    
    	return data;
    } catch(error) {
    	console.log("에러 발생 코드 : ", error);
    }
}

searchData();

저의 경우 예시로 임의 searchData라는 함수를 만들었고 response라는 변수에 fetch를 활용하여 데이터를 가져옵니다. 여기서 아까 개념으로 await을 사용하면 fetch와 json 결과를 기다리며 반환된 프로미스가 해결되면 then에서 데이터를 출력을 합니다. 여기서 오류 처리를 위해 try catch를 활용하여 사용을 하면 오류발생을 더욱 자세히 알 수 있습니다.

 

여기서 여러 비동기화 함수를 사용을 하기 위해선 Promise.all을 활용을 하여 처리를 진행하시면 됩니다. 만약 비동기 진행중인 작업을 중간에 취소를 하고 싶다면 자바스크립트에서 공식적으로 지원을 하는 것은 없지만 AbortController를 사용하여 취소를 할 수 임ㅆ고 signal->fetch 전달하여 controller.abort()를 호출하여 요청을 중단할 수 있습니다.

 

이 글과 함께 보면 좋은 글 추천

내가 이해하기 쉽게 정리하는 프로미스(Promise) 알아보기 [#]

마무리

비동기에 대해서 알아봤습니다. 이 글과 함께 바로 위 설명에 올린 함께 보면 좋은 글을 같이 보시면 조금 더 이해를 잘 할 수 있습니다. 혹시나 이 글을 보시면 궁금한 사항이 있다면 댓글을 통해 남겨주시면 답변드리도록 하겠습니다.