데이터가 분명 있는데 undefined로 나와요 — 비동기(async)가 뭔가요?

"코드는 위에서 아래로 순서대로 실행된다"고 알고 있었는데, AI가 짜준 코드는 그렇지 않을 때가 있습니다.

서버에서 데이터를 받아와서 화면에 찍었는데 콘솔에는 undefined만 뜨고, 새로고침하면 그제서야 제대로 나오는 경우. 분명 순서대로 썼는데 왜 이런 일이 생길까요.

한 줄 정의

비동기(async)는 "시간이 걸리는 작업은 기다리는 동안 다른 일을 먼저 처리하고, 끝나면 알려달라"는 방식입니다. 서버 요청, 파일 읽기처럼 얼마나 걸릴지 모르는 작업에 쓰입니다.

왜 필요한가

만약 코드가 무조건 위에서 아래로, 하나가 끝나야 다음이 실행되는 방식이라면 서버 응답을 1초 기다리는 동안 화면 전체가 멈춰버립니다. 버튼도 안 눌리고 스크롤도 안 되는 먹통 상태가 되는 거죠.

그래서 "오래 걸리는 일"은 따로 떼어내서 백그라운드에 맡기고, 결과가 오면 그때 처리하도록 만든 게 비동기입니다. 화면은 계속 멈추지 않고 돌아갑니다.

실전에서 이렇게

AI에게 "유저 정보 가져와서 화면에 보여줘"라고 시켰는데, 코드에 `await`이라는 단어 없이 짜여 있으면 데이터가 도착하기도 전에 화면에 찍는 코드가 먼저 실행됩니다. 그 결과가 undefined입니다.

이럴 때 "이 함수 앞에 await 빠진 것 같은데 확인해줘"라고 되물으면, AI가 "결과를 기다렸다가 그 다음 코드를 실행하도록" 고쳐줍니다. 또는 "데이터 오기 전에 화면 그려지는 문제 있어, 로딩 상태 추가해줘"라고 요청해도 됩니다.

비유

카페에서 커피를 주문하면 진동벨을 받습니다. 커피가 나올 때까지 카운터 앞에 서서 기다리지 않고, 자리에 앉아 다른 일을 하다가 벨이 울리면 가서 받죠.

비동기는 이 진동벨과 같습니다. "결과 기다리는 동안 딴 일 하다가, 준비되면 알려줄게"라는 약속이고, `await`은 "여기서는 진동벨 울릴 때까지 기다렸다가 진행할게"라고 못 박는 지점입니다.