async await

카페 진동벨을 받고 자리에 편하게 앉아 있다가, 벨이 울릴 때만 다음 주문 단계를 차례대로 이어가는 똑똑한 주문 방식이에요.

정의 async와 await는 오래 걸리는 작업(비동기 작업)을 처리할 때, 복잡한 코드 대신 마치 순서대로 차례차례 실행되는 글처럼 읽기 쉽게 작성하도록 돕는 프로그래밍 문법이에요. 작업이 끝날 때까지 전체 프로그램을 멈추지 않으면서도, 결과를 받아오는 순서를 자연스럽게 정리해 줍니다.

진동벨을 쥐고 기다리는 카페 주문

카페에서 음료를 주문하고 직원이 음료를 완성할 때까지 카운터 앞에 멍하니 서 있다면 어떻게 될까요? 뒤에 줄 선 다른 손님들은 주문조차 하지 못하고 매장 전체가 멈춰버릴 거예요. 컴퓨터 프로그램도 마찬가지예요. 먼 곳에 있는 서버에서 큰 사진을 내려받거나 데이터를 가져오는 작업은 생각보다 시간이 꽤 오래 걸려요. 만약 데이터가 올 때까지 컴퓨터가 모든 동작을 멈춘다면 화면이 하얗게 굳어버리고 말 거예요.

그래서 컴퓨터는 시간이 걸리는 작업을 어딘가에 맡겨두고 곧바로 다른 일부터 척척 처리해요. 이를 '비동기 처리'라고 불러요. 진동벨을 손에 쥐고 자리로 돌아와 스마트폰을 보며 시간을 아끼는 것과 같아요. 하지만 이전 방식에서는 '다운로드가 끝나면 A를 하고, A가 끝나면 B를 하고, B가 끝나면 C를 하라'는 지시를 꼬리에 꼬리를 무는 방식으로 작성해야 했어요.

이러다 보면 코드가 오른쪽으로 점점 밀려나며 알아보기 힘든 계단 모양이 되어버렸어요. 개발자들은 이를 '콜백 지옥'이라 불렀죠. async와 await는 바로 이 지저분하고 얽힌 코드를 한 줄씩 위에서 아래로 깔끔하게 읽히도록 정리해 주는 가장 세련된 도구예요.

콜백 지옥과 async/await 비동기 처리 방식 비교 콜백 지옥 (중첩) async / await (순차) 1. 요청 보내기 2. 대기 (await) 3. 결과 처리

async와 await의 완벽한 역할 분담

두 단어는 항상 짝을 이루어 움직여요. 먼저 함수 이름 앞에 붙이는 async(에이싱크)는 '이 함수 안에는 시간이 걸려서 기다려야 하는 작업이 들어있어요'라고 컴퓨터에게 미리 알려주는 안내판이에요. 이 단어가 붙은 함수는 자동으로 결과를 미래에 돌려주겠다는 특별한 상자에 담아 전달해요.

함수 안에서 실제로 기다림이 필요한 코드 앞에는 await(어웨이트)를 붙여요. 이는 '이 작업의 결과가 나올 때까지 이 자리에서 잠깐만 기다려줘'라는 멈춤 신호예요. 서버에서 날씨 정보를 완전히 받아올 때까지 다음 줄로 넘어가지 않고 차분히 대기하는 것이죠.

여기서 가장 중요한 점은 해당 함수 안에서만 순서를 기다릴 뿐, 프로그램 전체의 화면이나 다른 작업은 전혀 멈추지 않는다는 사실이에요. 손님이 자리에 앉아 친구와 대화하더라도 커피 제조는 주방에서 알아서 진행되는 것처럼, 컴퓨터는 화면을 부드럽게 유지하면서 백그라운드에서 데이터를 착실하게 받아와요.

async await 비동기 처리 다이어그램 async 함수 await 서버_요청() 결과 대기 중 (멈춤) 도착 후 다음 줄 실행 메인 화면 (UI) 멈춤 없이 계속 실행 중!

조금 더 정확히 말하면: 문법적 설탕의 마법

조금 더 정확히 말하면, async와 await는 컴퓨터의 작동 원리 자체를 통째로 바꾼 완전히 새로운 기술이 아니에요. 기존에 자바스크립트 같은 언어에서 비동기 작업을 다루기 위해 쓰던 Promise(프로미스, 미래에 값을 주겠다는 약속 객체)라는 문법을 사람이 더 읽기 편하게 감싼 껍데기에 가까워요.

프로그래밍 세계에서는 이렇게 작동 방식은 같지만 사람이 읽고 쓰기 편하게 다듬은 문법을 '문법적 설탕(Syntactic Sugar)'이라고 불러요. 컴퓨터 내부에서는 여전히 복잡한 비동기 규칙에 따라 약속 상자를 주고받지만, 작성하는 개발자의 눈에는 순서대로 차례차례 실행되는 일반 코드처럼 보이게 만들어 주는 것이죠.

이런 직관적인 구조 덕분에 오류를 잡아내는 방법도 훨씬 쉬워졌어요. 평소 프로그래밍에서 쓰던 일반적인 예외 처리 문법(try-catch)을 그대로 사용하여, 인터넷 연결이 끊기거나 서버에 문제가 생겼을 때 어디서 에러가 났는지 손쉽게 찾아내고 대처할 수 있게 되었어요.

🤔 흔한 오해

✕ 오해

await를 사용하면 프로그램 전체가 멈춰서 사용자가 버튼도 누를 수 없게 된다.

✓ 사실

await는 해당 비동기 함수 내부의 다음 줄 실행만 잠시 대기시킬 뿐이에요. 웹 브라우저의 화면 렌더링이나 사용자의 마우스 클릭 등 전체 프로그램은 멈춤 없이 정상적으로 동작해요.

✕ 오해

async/await는 Promise(프로미스)를 쓰지 않기 위해 만들어진 대체재다.

✓ 사실

async/await는 내부적으로 여전히 Promise를 기반으로 동작해요. Promise 코드를 사람이 더 읽기 편한 형태로 표현해 준 문법적 포장지(문법적 설탕)에 불과해요.

🧺 일상에서 만나요

1 쇼핑몰 앱에서 상품 목록을 서버에서 다 받아올 때까지 기다린 후 화면에 출력할 때 사용해요.
2 로그인 버튼을 눌렀을 때 아이디와 비밀번호가 맞는지 서버의 응답을 확인하고 다음 화면으로 넘길 때 써요.
💡 그러니까 한마디로

오래 걸리는 비동기 작업을 사람이 읽기 쉬운 순서대로 작성하게 돕는 프로그래밍 문법이에요.