버튼 눌렀는데 데이터가 없대요 — 비동기가 뭔가요?

AI한테 "이 버튼 누르면 서버에서 데이터 가져와서 화면에 보여줘"라고 시켰는데, 화면엔 분명 있어야 할 데이터가 안 보이고 콘솔엔 undefined만 찍혀 있던 적 있으신가요?

한 줄 정의

비동기(Async)는 "결과가 올 때까지 기다렸다가 다음 걸 하는" 처리 방식이고, 이 기다림을 빼먹는 게 그 오류의 원인인 경우가 많습니다.

왜 필요한가

서버에 데이터를 요청하는 건 시간이 걸립니다. 그동안 화면이 멈춰버리면 안 되니까, 코드는 "요청은 보내놓고 일단 다음 줄로 넘어가는" 식으로 동작합니다. 근데 그 다음 줄에서 아직 도착하지 않은 데이터를 바로 쓰려고 하면 undefined가 뜨는 거죠.

실전에서 이렇게

AI가 짜준 코드에 fetch나 axios로 데이터를 가져오는 부분이 있다면, 그 앞에 await이라는 단어가 붙어 있는지 확인해보세요. "데이터를 콘솔에 찍었더니 Promise {pending}이라고 나와요"라고 AI에게 물어보면, 대부분 await을 빠뜨렸거나 함수에 async를 안 붙인 경우라 바로 고쳐줍니다.

비유

카페에서 커피를 주문하면 진동벨을 받고 자리에서 기다리죠. 진동벨이 울리기도 전에 "커피 어디 있지?"라고 하면 당연히 없습니다. await은 "진동벨이 울릴 때까지 기다린다"는 뜻이고, 이걸 빼먹으면 커피가 나오기도 전에 빈 잔을 들고 자리로 돌아오는 것과 같습니다.